@extends('admin.layout')
@section('content')

    <!-- begin::main content -->
    <main class="main-content">
        <div class="container">
            <!-- begin::page header -->
            <div class="page-header">
                <h3>Create Order</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ asset('admin/order-list') }}">Order List</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Create Order</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <x-flashMessage />
            <div class="row">
                <div class="col-md-6">

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title m-t-10 pull-left">Create Order</h5>
                            <a href="{{ asset('admin/order-list') }}" class="btn btn-primary text-white pull-right"><i
                                    class="fa fa-list"></i>&nbsp;Order List</a>
                        </div>
                        <div class="card-body">
                            <form action="{{ asset('admin/create-order') }}" method="post" enctype="multipart/form-data">
                                @csrf
                                <span id="msg"></span>

                                <div class="form-group">
                                    <label for="user_id">Student</label>
                                    <select class="user-list category" multiple name="user_id[]" id="user_id">
                                        <option value="">Select User</option>
                                    </select>
                                    @if ($errors->has('user_id'))
                                        <div class="error">
                                            {{ $errors->first('user_id') }}
                                        </div>
                                    @endif
                                </div>


                                <div class="form-group">
                                    <label for="prod_id">Product</label>
                                    <select class="js-example-basic-single category" name="prod_id" id="prod_id">
                                        <option value="">Select Product</option>
                                        @if (!empty($products))
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}">{!! $product->name . '-(' . $product->type . ')' !!}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    @if ($errors->has('prod_id'))
                                        <div class="error">
                                            {{ $errors->first('prod_id') }}
                                        </div>
                                    @endif
                                </div>


                                <div class="form-group">
                                    <label for="mode_id">Mode</label>
                                    <select class="mode_id category" name="mode_id" id="mode_id">
                                        <option value="">Select Mode</option>
                                    </select>

                                    @if ($errors->has('mode_id'))
                                        <div class="error">
                                            {{ $errors->first('mode_id') }}
                                        </div>
                                    @endif
                                </div>

                                {{-- End Date --}}
                                <div class="form-group">
                                    <label for="single-date-picker1">Select Date for duration (Optional)</label>
                                    <input type="text" id="single-date-picker1" name="single-date-picker1" class="form-control">
                                </div>

                                <div class="form-group">
                                    <label for="duration">Duration (Days)</label>
                                    <input type="number" min="1" max="1000" class="form-control" name="duration"
                                        value="{{ old('duration') }}" id="duration" placeholder="Enter days">
                                    @if ($errors->has('duration'))
                                        <div class="error">
                                            {{ $errors->first('duration') }}
                                        </div>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="mode">Product Mode</label>
                                    <input type="text" readonly class="form-control" name="mode"
                                        value="{{ old('mode') }}" id="mode" placeholder="course mode">
                                    @if ($errors->has('mode'))
                                        <div class="error">
                                            {{ $errors->first('mode') }}
                                        </div>
                                    @endif
                                </div>


                                <div class="form-group">
                                    <label for="views">Views</label>
                                    <input type="text" readonly class="form-control" name="views"
                                        value="{{ old('views') }}" id="views" placeholder="course views">
                                    @if ($errors->has('views'))
                                        <div class="error">
                                            {{ $errors->first('views') }}
                                        </div>
                                    @endif
                                </div>



                                <div class="form-group">
                                    <label for="price">Price</label>
                                    <input type="text" class="form-control" name="price" value="0"
                                        id="price" placeholder="Enter Price">

                                    @if ($errors->has('price'))
                                        <div class="error">
                                            {{ $errors->first('price') }}
                                        </div>
                                    @endif
                                </div>

                                {{-- State List --}}
                                <div style="display:none;" class="form-group">
                                    <label for="state">Place of Supply</label>
                                    <select class="js-example-basic-single state" name="state" id="state">
                                        <option value="">-select-state--</option>
                                        <option value="Andhra Pradesh">Andhra Pradesh</option>
                                        <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                        <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                        <option value="Assam">Assam</option>
                                        <option value="Bihar">Bihar</option>
                                        <option value="Chandigarh">Chandigarh</option>
                                        <option value="Chhattisgarh">Chhattisgarh</option>
                                        <option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
                                        <option value="Daman and Diu">Daman and Diu</option>
                                        <option selected value="Delhi">Delhi</option>
                                        <option value="Lakshadweep">Lakshadweep</option>
                                        <option value="Puducherry">Puducherry</option>
                                        <option value="Goa">Goa</option>
                                        <option value="Gujarat">Gujarat</option>
                                        <option value="Haryana">Haryana</option>
                                        <option value="Himachal Pradesh">Himachal Pradesh</option>
                                        <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                                        <option value="Jharkhand">Jharkhand</option>
                                        <option value="Karnataka">Karnataka</option>
                                        <option value="Kerala">Kerala</option>
                                        <option value="Madhya Pradesh">Madhya Pradesh</option>
                                        <option value="Maharashtra">Maharashtra</option>
                                        <option value="Manipur">Manipur</option>
                                        <option value="Meghalaya">Meghalaya</option>
                                        <option value="Mizoram">Mizoram</option>
                                        <option value="Nagaland">Nagaland</option>
                                        <option value="Odisha">Odisha</option>
                                        <option value="Punjab">Punjab</option>
                                        <option value="Rajasthan">Rajasthan</option>
                                        <option value="Sikkim">Sikkim</option>
                                        <option value="Tamil Nadu">Tamil Nadu</option>
                                        <option value="Telangana">Telangana</option>
                                        <option value="Tripura">Tripura</option>
                                        <option value="Uttar Pradesh">Uttar Pradesh</option>
                                        <option value="Uttarakhand">Uttarakhand</option>
                                        <option value="West Bengal">West Bengal</option>
                                    </select>

                                    @if ($errors->has('state'))
                                        <div class="error">
                                            {{ $errors->first('state') }}
                                        </div>
                                    @endif
                                </div>

                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </main>
    <!-- end::main content -->

@endsection
@push('footer-script')
    <!-- begin::select2 -->
    <link rel="stylesheet" href="{{ asset('public/admin/vendors/select2/css/select2.min.css') }}" type="text/css">
    <!-- end::select2 -->
    <script src="{{ asset('public/admin/vendors/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('public/admin/js/examples/select2.js') }}"></script>
	
	<script src="{{ asset('public/admin/vendors/datepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('public/admin/js/examples/datepicker.js') }}"></script>
    
    <script>
       $(document).ready(function() {
		$("#mode_id").select2({});   
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $(".user-list").select2({
            placeholder: 'Select',
            multiple: true,
            tokenSeparators: [',', ' '],
            minimumInputLength: 3,
            minimumResultsForSearch: 10,
            ajax: {
                url: "{{asset('admin/user-list-ajax')}}",
                dataType: "json",
                type: "GET",
                delay: 50,
                cache: true,
                data: function (params) {
                    return {
                    _token: CSRF_TOKEN,
                    search: params.term // search term
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            console.log(item.text);
                            return {
                                text: item.text,
                                id: item.id
                            }
                        })
                    };
                }
            }
        });
		
		$('input[name="single-date-picker1"]').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true
        });
		
        $('#single-date-picker1').on('apply.daterangepicker', (e, picker) => {
            var date = $('#single-date-picker1').val();
            var currenDate = moment(new Date()).format("MM-DD-YYYY");
            var a = moment(currenDate, "MM-DD-YYYY");
            var b = moment(date, 'MM-DD-YYYY');
            $('#duration').val(0);
            if(b.diff(a, 'days')>0)
            {
                $('#duration').val(b.diff(a, 'days'));
            }
        });

            /* get product mode */
            $(document).on('change', '#prod_id', function() {
                var prod_id = $(this).val();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "post",
                    data: {
                        "prod_id": prod_id
                    },
                    url: "{{ asset('admin/get-product-price') }}",
                    dataType: "html",
					beforeSend:function(){
                        $('#mode_id').attr('disabled',true);
                    },
                    success: function(data) {
                        $('#mode_id').attr('disabled',false);
                        $('#mode_id').html(data);
                    }
                });
            });

            /* get price by product Mode */
            $(document).on('change', '#mode_id', function() {
                var mode_id = $(this).val();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "post",
                    data: {
                        "mode_id": mode_id
                    },
                    url: "{{ asset('admin/get-price-duration') }}",
                    dataType: "json",
                    success: function(result) {
                        $('#price').val(0);
                        $('#duration').val(result.duration);
                        $('#mode').val(result.mode);
                        $('#views').val(result.views);
                        // console.log(result);
                    }
                });
            });
        });
    </script>
    <!-- end::select2 -->
@endpush