@extends('layouts.admin')

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

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/css/date-picker.css')}}">
@endsection

@section('breadcrumb-item')
    <li class="breadcrumb-item">Orders</li>
    <li class="breadcrumb-item active">Create</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">Create Order</div>
        <div class="card-body">

            @if(session()->get('cart_errors'))
               <div class="alert alert-danger">
                   The Following products are out of stock:
                   <ul>
                       @foreach(session()->get('cart_errors')['out_of_stock'] as $error)
                           <li>{{ $error }}</li>
                       @endforeach
                   </ul>
               </div>
            @endif

            <form action="javascript:void(0)"  id="createOrder">
                @csrf
                @include('admin.order.form')
                <br>
                <button class="btn btn-success pull-right" onclick="createOrdersubmit()">Create</button>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{asset('assets/js/datepicker/date-picker/datepicker.js')}}"></script>
    <script src="{{asset('assets/js/datepicker/date-picker/datepicker.en.js')}}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">

    <script>
        function createOrdersubmit() {
            var csrfToken = $('input[name="_token"]').val(); // Get the CSRF token value

            // Perform your custom AJAX validation
            $.ajax({
                url: "{{ route('admin.order.store') }}",
                method: 'POST',
                data: $('#createOrder').serialize(), // Serialize the form data
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': csrfToken // Include the CSRF token in the headers
                },
                success: function (response) {
                    console.log(response)
                    if(response){
                        toastr.success('Order Created')
                        $('#createOrder').trigger('reset')
                        window.location.href = "{{ route('admin.orders') }}"
                    }

                },
                error: function (response) {
                    if (response.responseJSON.cart_errors) {
                        $.each(response.responseJSON.cart_errors.out_of_stock, function(field, message) {
                                toastr.error(message); // Display validation errors

                        });
                        toastr.error('The Following products are out of stock:')
                    }

                    if (response.responseJSON.errors) {
                    $.each(response.responseJSON.errors, function(field, messages) {
                        
                            $.each(messages, function(key, message) {
                                toastr.error(message); // Display validation errors
                            });
                        });
                    }
                }
            });
        };
    </script>
@endsection