@extends(ucfirst(activeGuard()).'.layout')

@section('pagetitle', __('trans.orders'))
@section('content')


    <div class="row  my-4">
        
        
        
        <div class="my-2 col-md-6 col-lg-2" >
            <div>
                <label for="id">UUID</label>
                <input type="text" name="id" id="id" class="form-control">
            </div>
        </div>
        
        <div class="my-2 col-md-6 col-lg-2" >
            <div>
                <label for="from">@lang('trans.from')</label>
                <input value="" type="date" name="from" id="from" class="form-control">
            </div>
        </div>
        
        <div class="my-2 col-md-6 col-lg-2" >
            <div>
                <label for="to">@lang('trans.to')</label>
                <input value="" type="date" name="to" id="to" class="form-control">
            </div>
        </div>
    
        <div class="my-2 col-md-6 col-lg-2" >
            <div>
                <label for="phone">@lang('trans.phone')</label>
                <input type="tel" name="phone" id="phone" class="form-control">
            </div>
        </div>
        
        <div class="my-2 col-md-6 col-lg-2" >
            <div>
                <label for="name">@lang('trans.name')</label>
                <input type="text" name="name" id="name" class="form-control">
            </div>
        </div>
        
        <div class="my-2 col-md-6 col-lg-2" >
            <div>
                <label for="filter">@lang('trans.status')</label>
                <select id="filter" class="form-control">
                    <option status="" follow="">--------</option>
                    <option status="0" follow="0">{{ __('trans.pending') }}</option>
                    <option status="1" follow="1">{{ __('trans.accepted') }}</option>
                    <option status="1" follow="2">{{ __('trans.order_onway') }}</option>
                    <option status="1" follow="3">{{ __('trans.order_delivered') }}</option>
                    <option status="2" follow="0">{{ __('trans.declined') }}</option>
                    <option status="5" follow="5">{{ __('trans.not_complete') }}</option>
                </select>
            </div>
        </div>
    
    </div>
    
<table class="table table-bordered dataTable table-striped" id="DataTable">
    <thead>
        <tr>
            <th>#</th>
            <th>@lang('trans.actions')</th>
            <th>UUID</th>
            <th>@lang('trans.status')</th>
            <th>@lang('trans.name')</th>
            <th>@lang('trans.phone')</th>
            <th>@lang('trans.device_type')</th>
            <th>@lang('trans.payment')</th>
            <th>@lang('trans.type')</th>
            <th>@lang('trans.sub_total')</th>
            <th>@lang('trans.discount')</th>
            <th>@lang('trans.charge_cost')</th>
            <th>@lang('trans.vat')</th>
            <th>@lang('trans.coupon')</th>
            <th>@lang('trans.net_total')</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
@endsection



@push('css')
<style>
    td {
        min-width: 140px;
    }
    .modal {
        background: rgb(57 57 57 / 60%);
    }
</style>
@endpush
@push('js')
    <script>
        var table = $('#DataTable').DataTable({
            scrollX: true,
            autoWidth : true,
            stateSave: true,
            oLanguage: {
                sUrl: $('meta[name="DT_Lang"]').attr('content')
            },
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            dom: 'Blfrtip',
            buttons: [
                {
                    extend: 'copy',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: function (idx, data, node) {
                            return idx !== 0 && idx !== 1;
                        }
                    }
                },
                'colvis'
            ],
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("admin.datatable-orders") }}',
                data: function(d) {
                    d.from = $('#from').val();
                    d.to = $('#to').val();
                    d.id = $('#id').val();
                    d.name = $('#name').val();
                    d.phone = $('#phone').val();
                    d.status= $('#filter').find(':selected').attr('status');
                    d.follow= $('#filter').find(':selected').attr('follow');
                    d.sort_column = 'id';
                    d.sort_direction = 'desc';
                }
            },
            columns: [
                { data: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'actions', orderable: false, searchable: false },
                { data: 'id', orderable: false, searchable: false },
                { data: 'status-icon', orderable: false, searchable: false },
                { data: 'name', orderable: false, searchable: false },
                { data: 'phone', orderable: false, searchable: false },
                { data: 'device_type', orderable: false, searchable: false },
                { data: 'payment', orderable: false, searchable: false },
                { data: 'delivery', orderable: false, searchable: false },
                { data: 'sub_total', orderable: false, searchable: false ,visible: false},
                { data: 'discount', orderable: false, searchable: false ,visible: false},
                { data: 'charge_cost', orderable: false, searchable: false ,visible: false},
                { data: 'vat', orderable: false, searchable: false ,visible: false},
                { data: 'coupon', orderable: false, searchable: false ,visible: false},
                { data: 'net_total', orderable: false, searchable: false },
            ]
        });
        
        
        let previousFromValue = $('#from').val();
        let previousToValue = $('#to').val();
        
        $(document).on('change input', '#from, #to, #filter, #name, #phone, #id', function() {
            var fromValue = $('#from').val();
            var toValue = $('#to').val();
            
            if (toValue < fromValue) {
                $('#from').val(previousFromValue);
                $('#to').val(previousToValue);
            } else {
                previousFromValue = fromValue;
                previousToValue = toValue;
            }
            table.draw();
        });
        $(document).on('change', '.select', function() {
            id = $(this).find(':selected').attr('data-id')
            status = $(this).find(':selected').attr('data-status')
            follow = $(this).find(':selected').attr('data-follow')
            $('#status-'+id).modal('hide');
            $.ajax({
                url: "{{ route(activeGuard().'.orders.status') }}",
                type: 'GET',
                data: {
                    _token: $('meta[name="csrf_token"]').attr('content'),
                    status: status,
                    follow: follow,
                    id: id,
                }
                , dataType: 'json'
                , cache: false
                , success: function (checked) {
                    table.draw();
                }
                , error: function (request, status, error) {
                    console.log(request)
                }
            });
        });
        
        $(document).on("click", "[data-bs-toggle='modal']", function (e) {
            let targetModal = $(this).attr("data-bs-target");
        
            if (!$(targetModal).length) {
                e.preventDefault();
                return;
            }
        
            if ($(targetModal).length > 1) {
                e.preventDefault();
                return;
            }
        
            $(".modal-backdrop").remove();
            $("body").css({
                "overflow-x": "hidden",
                "overflow-y": "auto" 
            });
        });

    </script>
@endpush
