@extends('backend.layouts..master')

@section('title', 'Create Invoice')

@push('css')
    <link rel="stylesheet" href="{{asset('backend/plugins/select2.min.css')}}">
	<link rel="stylesheet" href="{{ asset('myfile/backend/assets/datepicker/zebra_datepicker.min.css') }}" type="text/css">
	<link rel="stylesheet" href="{{ asset('myfile/backend/assets/datepicker/examples.css') }}" type="text/css">
@endpush

<!-- page content -->
@section('content')
    <div class="right_col" role="main">
        <div class="">
            <div class="clearfix"></div>
            @if(Session::has('success'))
                <div class="alert alert-success">
                    {{ Session::get('success') }}<div id="msg"></div>
                </div>
            @endif
            @if(Session::has('error'))
                <div class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif
            <div class="resp"></div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2> Create Invoice</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#">Settings 1</a>
                                        </li>
                                        <li><a href="#">Settings 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <form action="{{route('sales.create')}}" method="Get" class="form-" role="form" autocomplete="off" >
                                <hr/>
                                <div class="row">
                                    <div class="col-sm-3"></div>
                                    <div class="col-sm-3">
                                        <div class="form-group ">
                                            <label>Select Type <span class="required">*</span></label>
                                            <select class="form-control select2" name="type" id="type_id" required >
                                                <option value="">- Select Type -</option>
                                                @foreach($types as $type)
                                                <option value="{{ $type->id }}" {{$type->description == 'Default' ? 'selected' : '' }} > {{ $type->name }} </option>
                                                @endforeach
                                            </select>
                                        </div> 
                                          
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="form-group">
                                            <label>Select Date <span class="required">*</span></label>
                                            <input id="datepicker" type="text" name="sale_date"  class="form-control" data-zdp_readonly_element="true" value="{{ date('d-m-Y')}}" placeholder="dd-mm-yyyy">
                                        </div>  
                                    </div>
                                    <div class="col-sm-3"></div>
                                </div>
                                
                                <hr>
                                <div class="form-group">
                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-5">
                                      <a href="javascript:history.back()" class="btn btn-warning"><i class="ace-icon fa fa-arrow-left"></i> Back</a>
                                      <button type="submit" class="btn btn-success"> <i class="ace-icon fa fa-arrow-right"></i> Create Invoice </button>
                                    </div>
                                </div>
                                <br><br>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /page content -->
@endsection
@push('js')
    <script src="{{asset('backend/plugins/select2.min.js')}}"></script>
    <!-- Jquery Plugin For Date Calender-->
    <script type="text/javascript" src="{{ asset('myfile/backend/assets/datepicker/zebra_datepicker.src.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#datepicker').Zebra_DatePicker({
                format: 'd-m-Y',
                //direction: 1,
            });
            
            $(".select2").select2();
        });
    </script>
@endpush