@extends('dashboard.base')

@section('content')

<div class="container-fluid">
  <div class="fade-in">
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header"><h4>Orders Management</h4></div>
            <div class="card-body">
                @yield('nav')
                @if($errors->any())
                    <br>
                    {!! implode('', $errors->all('<div class="alert alert-danger" role="alert">:message</div>')) !!}
                @endif
                @if(session()->has('message'))
                    <br>
                    <div class="alert alert-success" role="alert">{{ session("message") }}</div>
                @endif
                @if(session()->has('error'))
                    <br>
                    <div class="alert alert-danger" role="alert">{{ session("error") }}</div>
                @endif

                @if(request()->route()->getName() == "orders_management.all")
                    <div class="row mb-4 mt-2 justify-content-end">
                        <div class="col-md-3">  
                            <label>Status</label>
                            <select name="payment_status" class="form-control" id="payment_status">
                                <option value="">All</option>
                                <option value="0">Unpaid</option> 
                                <option value="1">Payment Under Process</option> 
                                <option value="2">Paid</option> 
                                <option value="3">Refunded</option> 
                            </select>    
                        </div>
                    </div>
                @endif

                @if(request()->route()->getName() == "orders_management.preOrders")
                    <div class="row mb-4 mt-2 justify-content-end">
                        <div class="col-md-3">  
                            <label>Status</label>
                            <select name="status" class="form-control" id="status">
                                <option value="">All</option>
                                <option value="0" selected>Waiting Arrival</option> 
                                <option value="1">Arrived</option> 
                            </select>    
                        </div>
                    </div>
                @endif

                <div class="clearfix"></div>
                {{ $dataTable->table(['class' => 'table table-striped table-bordered dt-responsive', 'style' => 'width:100%;']) }}
            
                @if(request()->route()->getName() == "orders_management.preOrders")
                    <form id="mark-arrived" method="POST" action="{{ route('orders_management.bulkMarkAsArrived') }}">
                        {{ csrf_field() }}
                        <input type="hidden" id="entries" name="entries">
                    </form>
                @else
                    <form id="update-orders" method="POST" action="{{ route('orders_management.bulkUpdate') }}">
                        {{ csrf_field() }}
                        <input type="hidden" id="boxes" name="boxes">
                        <input type="hidden" id="action" name="action">
                    </form>
                @endif
                                
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- Modal --> 
<div class="modal fade" id="viewOrder">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title text-primary">{{Request::segment(3) == 'pre-orders' ? 'View Items' : 'View Order'}}</h5>
                <button type="button" class="close" data-dismiss="modal">
                  <span class="fa fa-close"></span>
                </button>
            </div>
            <div class="modal-body" id="viewOrderData">
                
            </div>
            <div class="modal-footer">
                @if(request()->route()->getName() == "orders_management.toBePacked")
                    <button type="button" class="btn btn-primary btn-sm change-item-status" id="mark-as-packed" disabled>Mark as Packed Selected Items</button>
                    <button type="button" class="btn btn-primary btn-sm change-item-status" id="mark-as-open" disabled>Mark as Open Selected Items</button>
                @endif
                @if(request()->route()->getName() == "orders_management.open")
                    <button type="button" class="btn btn-primary btn-sm change-item-status" id="mark-as-shipout" disabled>Mark as Shipout Selected Items</button>
                @endif
                @if(request()->route()->getName() == "orders_management.toBeShipped")
                    <button type="button" class="btn btn-primary btn-sm change-item-status" id="mark-as-shipped" disabled>Mark as Shipped Selected Items</button>
                @endif
            </div>
        </div>
    </div>
</div> 

<!-- Delivery Address Modal -->
<div class="modal fade" id="viewAddress">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change Delivery Address</h5>
                <button type="button" class="close" data-dismiss="modal">
                  <span class="fa fa-close"></span>
                </button>
            </div>
            <div class="modal-body" id="viewAddressData">
                
            </div>
        </div>
    </div>
</div>  
@endsection


@section('javascript')
@push('scripts')
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>

<script src="{{ asset('js/sweet-alert/sweetalert.min.js') }}"></script>
{{ $dataTable->scripts() }}
<script type="text/javascript">
    $(document).ready(function(){
        @if(request()->route()->getName() == "orders_management.all")
            runDatatableAjax();

            // filter by payment status
            $('#payment_status').on('change',function(){  
                runDatatableAjax();
            });
        @endif

        @if(request()->route()->getName() == "orders_management.preOrders")
            runDatatableAjax();

            // filter by payment status
            $('#status').on('change',function(){  
                runDatatableAjax();
            });
        @endif

        @if(request()->route()->getName() == "orders_management.toBePacked" || request()->route()->getName() == "orders_management.open" || request()->route()->getName() == "orders_management.toBeShipped")
            async function runDatatableAjax(){  
                let url = "{{ route(request()->route()->getName()) }}";

                var params = { 
                    status : $('#status').val(),
                };   
                $('#orders-management').DataTable().ajax.url(url+"?"+$.param(params)).load(null, false);            
            }
            
            function toggleItemStatusChangeButton() {
                if ($('.rowCheckbox:checked').length > 0) {
                    $(document).find('.change-item-status').attr('disabled', false);
                } else {
                    $(document).find('.change-item-status').attr('disabled', true);
                }
            }

            async function updateInvoiceItemStatus(selectedIds,changeStatusTo){
                if(changeStatusTo != ""){

                    // AJAX Call
                    $.ajax({
                        url: "{{ route('orders_management.updateInvoiceItemOrderStatus') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}', // Laravel CSRF token
                            ids: selectedIds,
                            pageName: "{{ Request::segment(3) }}",
                            changeStatusTo: changeStatusTo
                        },
                        success: function(response) {
                            // Handle success (you can close modal or update the page)
                            $('#viewOrder').modal('hide');
                            runDatatableAjax();
                            if(response.status){
                                swal("Success",response.message,"success")
                            }else{
                                swal("Error",response.message,"error")
                            }
                        },
                        error: function(xhr, status, error) {
                            swal("Error",error,"error")
                        }
                    });
                }
                return false;
            }
        
            $(document).on('change','#selectAll', function() {
                var isChecked = $(this).prop('checked');
                $('.rowCheckbox').prop('checked', isChecked);

                toggleItemStatusChangeButton();
            });

            // Handle row checkbox change
            $(document).on('change','.rowCheckbox', function() {
                toggleItemStatusChangeButton();

                var allChecked = $('.rowCheckbox').length === $('.rowCheckbox:checked').length;
                $('#selectAll').prop('checked', allChecked);
            });

            $(document).on('click','.change-item-order-status', function(event) {
                event.preventDefault();
                if(confirm('Are you sure, do you want to change item status?')){
                    let itemId = $(this).attr('data-invoice_item_id');
                    let changeStatusTo = $(this).attr('data-action');
                    
                    let selectedIds = [];
                    if(itemId != "" && $.isNumeric(itemId)){
                        selectedIds.push(itemId);
                    }
    
                    updateInvoiceItemStatus(selectedIds,changeStatusTo);
                }

            });

            $(document).on('click','.change-item-status', function(event) {
                event.preventDefault();
                if(confirm('Are you sure, do you want to change item status?')){
                    let selectedIds = [];
                    $('.rowCheckbox:checked').each(function() {
                        selectedIds.push($(this).val());
                    });

                    let buttonId =  $(this).attr('id');
                    let changeStatusTo = '';
                    if(buttonId == 'mark-as-packed'){
                        changeStatusTo = 'packed';
                    }else if(buttonId == 'mark-as-open'){
                        changeStatusTo = 'open';
                    }else if(buttonId == 'mark-as-shipout'){
                        changeStatusTo = 'shipout';
                    }

                    updateInvoiceItemStatus(selectedIds,changeStatusTo);
                }
            });

        @endif

        @if(request()->route()->getName() == "orders_management.toBePacked")
            $(document).on('click', '.change-address', function(event){
                event.preventDefault();
                $("#backLoader").fadeIn();　
                var url = $(this).attr('href');
                $.ajax({
                    type: "GET",
                    url: url,                    
                    success: function(response){
                        $("#backLoader").fadeOut();　
                        $('#viewAddress').find('#viewAddressData').html(response.html);
                        $('#viewAddress').modal('show');
                    }
                });
            });

            $(document).on('submit','#updateAddress', function(event){
                event.preventDefault();
                $("#backLoader").fadeIn();　
                $(document).find("#submitBtn").attr('disabled', true);
                var url = $(this).attr('action');
                $.ajax({
                    type: "POST",
                    url: url,  
                    data: $(this).serialize(),                  
                    success: function(response){
                        $("#backLoader").fadeOut();　
                        $('#viewAddress').modal('hide');
                        if(response.status){
                            swal("Success",response.message,"success")
                        }else{
                            swal("Error",response.message,"error")
                        }
                    },
                    error: function(response) {
                        $(document).find("#submitBtn").attr('disabled', false);
                        var errorLabelTitle = '';
                        $.each(response.responseJSON.errors, function(key, item) {
                            errorLabelTitle = '<span class="text-danger">' + item + '</sapn>';
                            $("select[name='" + key + "']").after(errorLabelTitle);
                            $(errorLabelTitle).insertAfter("input[name='" + key + "']");
                        });
                    }
                });
            });
            
        @endif
    });

    function bulkUpdate(action)
    {
        var form = $('#update-orders');
        var rows_selected = window.LaravelDataTables["orders-management"].column(1).checkboxes.selected();
        var boxes = [];
        $.each(rows_selected, function(index, rowId){
            boxes.push(rowId);
        });

        $('#boxes').val(boxes);
        $('#action').val(action);
        form.submit();
    }
    
    function viewOrder(date_of_live='',invoice_id=''){
        $.ajax({
            type: "POST",
            url: "{{ route('orders_management.viewInvoiceOrders') }}",
            data: {
                page_name       : "{{ Request::segment(3) }}",
                date_of_live    : date_of_live,
                invoice_id      : invoice_id,
                _token          : "{{ csrf_token() }}"
            },
            success: function(data){
                $('#viewOrder').find('#viewOrderData').html(data);
                $('#viewOrder').modal('show');
            }
        });
    }

    function viewPreOrder(order_id=''){
        $.ajax({
            type: "POST",
            url: "{{ route('orders_management.viewPreOrders') }}",
            data: {
                order_id      : order_id,
                _token          : "{{ csrf_token() }}"
            },
            success: function(data){
                $('#viewOrder').find('#viewOrderData').html(data);
                $('#viewOrder').modal('show');
            }
        });
    }
    
    function viewCustomerOrders(customer_id=''){
        $.ajax({
            type: "POST",
            url: "{{ route('orders_management.viewCustomerInvoiceOrders') }}",
            data: {
                page_name       : "{{ Request::segment(3) }}",
                customer_id     : customer_id,
                _token          : "{{ csrf_token() }}"
            },
            success: function(data){
                $('#viewOrder').find('#viewOrderData').html(data);
                $('#viewOrder').modal('show');
            }
        });
    }
    
    @if(request()->route()->getName() == "orders_management.all")
        // run datatable ajax without reinitlize
        function runDatatableAjax(){  
            var params = { 
                payment_status : $('#payment_status').val(),
            };   
            $('#orders-management').DataTable().ajax.url("{{ route('orders_management.all') }}?"+$.param(params)).load(null, false);            
        }
    @endif

    @if(request()->route()->getName() == "orders_management.preOrders")
        // run datatable ajax without reinitlize
        function runDatatableAjax(){  
            var params = { 
                status : $('#status').val(),
            };   
            $('#orders-management').DataTable().ajax.url("{{ route('orders_management.preOrders') }}?"+$.param(params)).load(null, false);            
        }

        function bulkMarkAsArrived(){
            var form = $('#mark-arrived');
            var rows_selected = window.LaravelDataTables["orders-management"].column(1).checkboxes.selected();
            
            var boxes = [];
            $.each(rows_selected, function(index, rowId){
                boxes.push(rowId);
            });

            $('#entries').val(boxes);
            form.submit();
        }
        
    @endif

</script>
@endpush
@endsection