@extends('layouts.admin')

@section('title' , 'Update 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">Update</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            Update Order
        {{-- <span class="float-right"> <a class="font-light btn btn-success" href="https://percentagecalculator.net/"> Calculate Percentage </a> </span> --}}
        </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="updateOrder"
            {{-- action="{{ route('admin.order.update', $order->id) }}" method="post" --}}
            >
                @csrf
                @include('admin.order.form')
                <br>
                <button class="btn btn-success pull-right" onclick="updateOrdersubmit()">Update</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="{{asset('js/datepicker.custom.js')}}"></script>
    <script>
        $('#updateOrder').on('keydown', 'input, select, textarea', function(e) {
        if (e.keyCode === 13) { // Enter key pressed
            e.preventDefault(); // Prevent default form submission or other default behavior
            
            // Get all focusable elements within the form
            var focusableElements = $('#updateOrder').find('input:visible, select:visible, textarea:visible, button:visible').filter(':not([readonly]):not([disabled])');
            
            // Find current element index
            var currentIndex = focusableElements.index(this);
            
            // Move to next element, or loop back to first if at the end
            var nextIndex = (currentIndex + 1) % focusableElements.length;
            
            // Focus on next element
            focusableElements.eq(nextIndex).focus();
            
            return false; // Prevent event bubbling
        }
    });
    
    // Optional: Handle specific cases where you still want Enter to perform its original action
    // For example, if you have a textarea where you want Enter to create new lines:
    $('#updateOrder').on('keydown', 'textarea.allow-enter', function(e) {
        if (e.keyCode === 13) {
            // Remove the event handler temporarily to allow default behavior
            e.stopPropagation();
        }
    });
        function updateOrdersubmit() {
            var csrfToken = $('input[name="_token"]').val(); // Get the CSRF token value
            var currentPage = {{ $currentPage }};
            // Perform your custom AJAX validation
            $.ajax({
                url: `{{ route('admin.order.update', $order->id) }}`,
                method: 'POST',
                data: $('#updateOrder').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 updated')
                        {{--window.location.href = "{{ route('admin.orders') }}" + "?page=" + currentPage;--}}

                    }

                },
                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