@extends('admin::layouts.master')

@push('styles')
    <style>
        table#attribute-table tr td a.button {
            display: none;
        }

        table#attribute-table tr:hover td a.button {
            display: inline-block;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <form class="" id="sort_orders" action="" method="GET">

            <div class="card-header row gutters-5">
                <div class="col text-center text-md-left">
                    <h5 class="mb-md-0 h6">{{ translate('Packed Orders') }}</h5>
                </div>
                <div class="col-xl-3 col-md-3 ml-auto">
                    <select class="form-control aiz-selectpicker" name="payment_status" onchange="sort_orders()"
                        data-selected="{{ $payment_status }}">
                        <option value="">{{ translate('Filter by Payment Status') }}</option>
                        <option value="paid">{{ translate('Paid') }}</option>
                        <option value="unpaid">{{ translate('Unpaid') }}</option>
                        <option value="Pending">{{ translate('Pending') }}</option>
                    </select>
                </div>

                <div class="col-xl-3 col-md-3 ml-auto">
                    <select class="form-control aiz-selectpicker" name="order_status" onchange="sort_orders()"
                        data-selected="{{ $order_status }}">
                        <option value="">{{ translate('Filter by Order Type') }}</option>
                        <option value="cod">{{ translate('COD') }}</option>
                        <option value="online">{{ translate('Online') }}</option>
                    </select>
                </div>

                <div class="col-xl-2 col-md-3">
                    <div class="input-group">
                        <input type="text" class="form-control" id="sort_product" name="filters[name]"
                            @isset(request()->get('filters')['name']) value="{{ request()->get('filters')['name'] }}" @endisset
                            placeholder="{{ translate('Type order code or name & Enter') }}">
                    </div>
                </div>

                {{-- <div class="col-xl-2 col-md-3">
                    <select class="form-control aiz-selectpicker" id="import-export-select" name="export_import"
                        data-selected="">
                        <option value="">{{ translate('Export or Import') }}</option>
                        <option value="export">{{ translate('Export') }}</option>
                        <option value="import">{{ translate('Import') }}</option>

                    </select>

                </div> --}}

            </div>
        </form>

        <div class="card-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>SN</th>
                        <th>{{ translate('Order Code') }}</th>
                        <th>{{ translate('No. of Products') }}</th>
                        <th>{{ translate('Customer Details') }}</th>
                        <th>{{ translate('Amount') }}</th>
                        <th>{{ translate('Payments') }}</th>
                        <th>{{ translate('Status') }}</th>
                        <th>{{ translate('Ordered At') }}</th>
                        <th width="15%">{{ translate('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($orders as $key => $order)
                        <tr>
                            <td>
                                {{ $key + 1 + ($orders->currentPage() - 1) * $orders->perPage() }}
                            </td>
                            <td>

                                {{ $order->order_code }}
                                <input type="hidden" value="{{ $order->order_code }}" id="orderCode{{ $key }}">
                                <i class="fa fa-copy" onclick="copyToClipboard('orderCode{{ $key }}')"
                                    style="cursor: pointer; color:rgb(195, 195, 195);"></i>
                            </td>
                            <td>
                                {{ $order->number_of_products }}
                            </td>
                            <td>
                                {{ $order->user->name }}, {{ $order->user->phone }}
                            </td>
                            <td>
                                @if (auth('admin')->user()->country->symbol_position == 'left')
                                    {{ auth('admin')->user()->country->currency_symbol }}
                                @endif

                                {{ $order->total_amount }}
                                @if (auth('admin')->user()->country->symbol_position == 'right')
                                    {{ auth('admin')->user()->country->currency_symbol }}
                                @endif
                            </td>
                            <td>
                                {{ strtoupper($order->payment_type) }}: @if ($order->payment_status == 'paid')
                                    <span class="badge badge-inline badge-success">{{ translate('Paid') }}</span>
                                @elseif($order->payment_status == 'unpaid')
                                    <span class="badge badge-inline badge-danger">{{ translate('Unpaid') }}</span>
                                @elseif($order->payment_status == 'pending')
                                    <span class="badge badge-inline badge-danger">{{ translate('Pending') }}</span>
                                @endif
                            </td>
                            <td>
                                {{ ucfirst($order->order_status) }}
                            </td>
                            <td>
                                {{ $order->created_at }}
                            </td>
                            <td>
                                <a class="btn btn-soft-primary btn-icon btn-circle btn-sm"
                                    href="{{ route('admin.orders.show', $order->id) }}" title="{{ translate('View') }}">
                                    <i class="las la-eye"></i>
                                </a>
                                <a class="btn btn-soft-success btn-icon btn-circle btn-sm"
                                    title="{{ translate('Print Invoice') }}" href="javascript:void(0)"
                                    onclick="print_invoice('{{ route('admin.orders.invoice.print', $order->id) }}')">
                                    <i class="las la-print"></i>
                                </a>

                                <a class="btn btn-soft-info btn-icon btn-circle btn-sm"
                                    href="{{ route('admin.orders.invoice.download', $order->id) }}"
                                    title="{{ translate('Download Invoice') }}">
                                    <i class="las la-download"></i>
                                </a>
                                <a href="#" class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete"
                                    data-href="{{ route('admin.orders.destroy', $order->id) }}"
                                    title="{{ translate('Delete') }}">
                                    <i class="las la-trash"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="aiz-pagination">
                {{ $orders->links() }}
            </div>
        </div>
    </div>
@endsection


@section('modal')
    @include('admin::modals.delete_modal')
    @include('admin::modals.confirm_modal')
@endsection



@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0/axios.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#from_date').daterangepicker({
                locale: {
                    format: "DD/MM/YYYY"
                },
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                maxYear: parseInt(moment().format('YYYY'), 10)
            });
            $('#to_date').daterangepicker({
                locale: {
                    format: "DD/MM/YYYY"
                },
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                maxYear: parseInt(moment().format('YYYY'), 10)
            });

            $(".custom-file-input").on("change", function() {
                var fileName = $(this).val().split("\\").pop();
                $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
            });

            $('#shipping_location_select').on('hidden.bs.select', function() {
                if ($('#shipping_location_select').val() != '') {

                    // $('#shipping_location_select').trigger('change');

                    shipping_location_change($('#shipping_location_select').val());
                }
            });


            $('#import-export-select').on('hidden.bs.select', function() {
                if ($('#import-export-select').val() != '') {

                    // $('#import-export-select').trigger('change');
                    importExportInit($('#import-export-select').val());
                }
            });


        });



        function sort_orders(el) {
            $('#sort_orders').submit();
        }

        function importExportInit(selected_option) {
            //    let selected_option = event.target.value;

            if (selected_option == "export") {

                // $.ajax({
                //     headers: {
                //         'X-CSRF-TOKEN': AIZ.data.csrf,
                //         "Content-Type": "application/json"
                //     },
                //     responseType: "blob", 
                //     type: "get",
                //     data: {
                //         attribute_id: 10
                //     },
                //     url: '',
                //     success: function(response) {
                //       console.dir(response);
                //         let url = URL.createObjectURL(new Blob([response]));

                //         let link = document.createElement("a");
                //         link.href = url;
                //         link.setAttribute("download", 'sales-orders.xlsx');
                //         // link.download = "orders.xls";
                //         document.body.appendChild(link);
                //         link.click();
                //     }
                // });


                let form = document.getElementById('sort_orders');
                let formData = new FormData(form);
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));


                axios.post("", formData, {
                        responseType: "blob",
                        headers: {
                            "Content-Type": "multipart/form-data"
                        },
                        data: formData
                    })
                    .then(response => {
                        const url = window.URL.createObjectURL(new Blob([response.data]));
                        const link = document.createElement("a");
                        link.href = url;
                        link.setAttribute("download", "sales-orders.xlsx");
                        document.body.appendChild(link);
                        link.click();
                    })

            }

            if (selected_option == "import") {
                $("#order-status-import-modal").modal("show");
            }



        }

        function print_invoice(url) {
            var h = $(window).height();
            var w = $(window).width();
            window.open(url, '_blank', 'height=' + h + ',width=' + w + ',scrollbars=yes,status=no');
        }

        function shipping_location_change(selected_option) {

            // let selected_option = event.target.value;

            if (selected_option == "zone") {
                $("#order-zone-modal").modal("show");
            }
            if (selected_option == "state") {
                $("#order-location-state-filter-modal").modal("show");
            }

            if (selected_option == "city") {
                $("#order-location-city-filter-modal").modal("show");
            }
            if (selected_option == "custom") {
                $("#all-order-custom-date-filter-modal").modal("show");
            }
        }

        function change_zone(event) {

            let selected_zone_id = event.target.value;
            $("#selected-zone-id").val(selected_zone_id);
            $("#selected-state-id").val('');
            $("#selected-city-id").val('');

            $("#custom-from-date").val('');
            $("#custom-to-date").val('');
        }

        function location_state_filter_change_state(event) {

            let selected_state_id = event.target.value;
            $("#selected-state-id").val(selected_state_id);
            $("#selected-zone-id").val('');
            $("#selected-city-id").val('');
            $("#custom-from-date").val('');
            $("#custom-to-date").val('');
        }

        function location_state_filter_init() {

            if ($("#selected-state-id").val() != '') {
                sort_orders();
            }
        }

        function location_zone_filter_init() {

            if ($("#selected-zone-id").val() != '') {
                sort_orders();
            }
        }

        function location_city_filter_change_state(event) {

            let selected_state_id = event.target.value;

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': AIZ.data.csrf,
                    "Content-Type": "application/json"
                },
                responseType: "html",
                type: "get",
                data: {
                    'selected_state_id': selected_state_id
                },
                url: '',
                success: function(response) {
                    $("#city-selection").empty();
                    $("#city-selection").append(response);
                    $("#city-selection").selectpicker("refresh");
                }
            });

        }

        function location_state_filter_change_city(event) {
            let selected_city_id = event.target.value;
            $("#selected-city-id").val(selected_city_id);
            $("#selected-zone-id").val('');
            $("#selected-state-id").val('');
            $("#custom-from-date").val('');
            $("#custom-to-date").val('');

        }

        function location_city_filter_init() {

            if ($("#selected-city-id").val() != '') {
                sort_orders();
            }
        }

        function custom_date_filter_init() {
            let from_date = $('#from_date').val();
            let to_date = $('#to_date').val()
            $("#custom-from-date").val(from_date);
            $("#custom-to-date").val(to_date);

            if (from_date != "" && to_date != "") {
                sort_orders();
            }


        }
    </script>

    <script>
        async function copyToClipboard(elementId) {

            var copyText = document.getElementById(elementId).value;

            try {
                await navigator.clipboard.writeText(copyText);
                alert("Copied the text: " + copyText);
            } catch (err) {
                console.error('Failed to copy text: ', err);
            }
        }
    </script>
@endsection