@section('title','Add Order')

@push('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/select.dataTables.min.css')}}">
@endpush

@push('style')
<link rel="stylesheet" href="{{asset('css/admin/order/addOrder.css')}}">
@endpush

@push('vendor-script')
<script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/dataTables.select.min.js')}}"></script>
@endpush

@push('script')
<script src="{{asset('js/admin/order/addOrder.js')}}"></script>
@endpush

<x-admin-layout>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs"></x-breadcrumbs>

    <div class="row">
        <div class="col s12">
            <div class="container">
                {{-- Content --}}
                <div class="section">
                    <div class="card">
                        <div class="card-content">
                            <div class="row">
                                <div class="col s12">
                                    <form action="{{route('order_save')}}" id="orderForm" method="post">
                                        @csrf
                                        <div class="row justify-content-md-center">
                                            <div class="input-field col m6 s12">
                                                <label class="active" for="customer_id">
                                                    @lang('Customer') <span class="red-text">*</span>
                                                </label>
                                                <div>
                                                    <select name="customer_id" data-error="#customer_id-error-div" id="customer_id" data-placeholder="Select customer" data-option-url="{{route('options_searchcustomers')}}" class="select2-ajax browser-default">
                                                        @if(isset($old['customer_id']) && $old['customer_id']!='')
                                                        <option value="{{$old['customer_id']->id}}"> {{$old['customer_id']->name}} </option>
                                                        @endif
                                                    </select>
                                                </div>
                                                @error('customer_id')<small class="form-text error red-text">{{ $message }}</small>@enderror
                                                <div id="customer_id-error-div"></div>
                                            </div>
                                            <div class="input-field col m6 s12">
                                                <label class="active" for="division_id">
                                                    @lang('Division') <span class="red-text">*</span>
                                                </label>
                                                @if(auth()->user()->division_id==null)
                                                <div>
                                                    <select name="division_id" data-error="#division_id-error-div" id="division_id" data-placeholder="Select division" data-option-url="{{route('options_divisions')}}" class="select2-ajax browser-default">
                                                        @if(isset($old['division_id']) && $old['division_id']!='')
                                                        <option value="{{$old['division_id']->id}}"> {{$old['division_id']->name}} </option>
                                                        @endif
                                                    </select>
                                                </div>
                                                @else
                                                <label>{{$divisions->defaultLocale->name}}</label>
                                                <input type="hidden" name="division_id" id="division_id" value="{{auth()->user()->division_id}}">
                                                @endif
                                                @error('division_id')<small class="form-text error red-text">{{ $message }}</small>@enderror
                                                <div id="division_id-error-div"></div>
                                            </div>
                                        </div>
                                        <div class="row justify-content-md-center">
                                            <div class="input-field col m12 s12">
                                                <label class="active" for="delivery_address">
                                                    @lang('Delivery Address') <span class="red-text">*</span>
                                                </label>
                                                <div>
                                                    <textarea placeholder="Delivery Address" class="materialize-textarea" rows="8" name="delivery_address">{!! old('delivery_address') !!}</textarea>

                                                </div>
                                                @error('delivery_address')<small class="form-text error red-text">{{ $message }}</small>@enderror
                                                <div id="delivery_address-error-div"></div>
                                            </div>

                                        </div>
                                        <div class="row justify-content-md-center">
                                            <div class="input-field col m4 s6">
                                                <label class="active" for="placedOn">
                                                    @lang('Order Placed On') <span class="red-text">*</span>
                                                </label>
                                                <input autocomplete="off" type="text" readonly class="datepicker" value="{{old('placedOn')}}" name="placedOn" id="placedOn" data-format="{{config('date_format.date_only.js')}}">
                                                <label for="placedOn"> @lang('Order Placed On') </label>
                                                @error('placedOn')<small class="form-text error red-text">{{ $message }}</small>@enderror
                                                <div id="placedOn-error-div"></div>
                                            </div>
                                        </div>
                                        <div class="row justify-content-md-center">
                                            <div class="order-product-details col m12 s12 mb-3">
                                                <h4 class="card-title">Products</h4>
                                                <div id="addRow" class="row">
                                                    <div class="input-field col m3 s3">
                                                        <select class="select2-ajax browser-default" id="category_id" data-placeholder="Select category" data-option-url="{{route('options_division_categories')}}" data-error="#category_id-error-div">
                                                        </select><span class="red-star">*</span>
                                                        <div id="category_id-error-div"></div>
                                                    </div>
                                                    <div class="input-field col m3 s3">
                                                        <select class="browser-default select2-ajax" id="product_id" data-placeholder="Select product" data-error="#product_id-error-div" data-option-url="{{route('options_categoryBasedProducts')}}">
                                                        </select><span class="red-star">*</span>
                                                        <div id="product_id-error-div"></div>
                                                    </div>
                                                    <div class="input-field col m3 s3">
                                                        <input class="form-control" id="quantity" type="number" placeholder="Enter Quantity" data-error="#quantity-error-div" />
                                                        <span class="red-star">*</span>
                                                        <div id="quantity-error-div"></div>
                                                    </div>
                                                    <div class="input-field col m3 s3">
                                                        <button class="addBtn btn btn-success" type="button">
                                                            <i class="material-icons left">add</i>
                                                            <span>Add Item</span>
                                                            <div id="add_item-error-div"></div>
                                                        </button>
                                                    </div>
                                                </div>
                                                <table class="table" id="orderItems">
                                                    <thead>
                                                        <tr>

                                                            <th>Item</th>
                                                            <th>Qty</th>
                                                            <th></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if(old('products'))
                                                        @foreach(old('products') as $index => $product)
                                                        <tr>
                                                            <td>
                                                                <input type="hidden" name="productIds[]" value="{{$product['product_id']}}">
                                                                <input type="hidden" value="{{$product['product_id']}}" name="products[{{$product['product_id']}}][product_id]">
                                                                {{$old['products'][$product['product_id']]->name}}
                                                            </td>
                                                            <td>
                                                                <div class="input-field m-0"><input value="{{$product['quantity']}}" id="products[{{$product['product_id']}}][quantity]" name="products[{{$product['product_id']}}][quantity]" class="product-quantity" data-rule-greaterThanZero="true" data-msg-greaterThanZero="Please enter quantity" type="number" placeholder="0"></div>
                                                            </td>
                                                            <td>
                                                                <div class="deleteRow justify-content-between"> <span class="delete-row-btn"><i class="material-icons">clear</i></span></div>
                                                            </td>
                                                        </tr>
                                                        @endforeach
                                                        @endif
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <button class="SubmitBtn btn cyan waves-effect waves-light right mr-4" type="submit" name="action">
                                                Submit
                                                <i class="material-icons right">send</i></button>
                                            <button class="btn red waves-effect waves-light btn-reset right mr-4" type="reset">
                                                <i class="material-icons left">refresh</i>
                                                @lang('Reset')
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-admin-layout>