@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('Return Orders') }}</h5>
                </div>


                <div class="col-xl-3 col-md-3 ml-auto">
                    <select class="form-control aiz-selectpicker" name="payment_type" onchange="sort_orders()"
                        data-selected="{{ $payment_type }}">
                        <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-3 col-md-3">
                    <select class="form-control aiz-selectpicker" name="return_status" onchange="sort_orders()"
                        data-selected="{{ $return_status }}">
                        <option value="">{{ translate('Filter by Return Status') }}</option>
                        <option value="pending">{{ translate('Pending') }}</option>
                        <option value="accepted">{{ translate('Accepted') }}</option>
                        <option value="rejected">{{ translate('Rejected') }}</option>
                        <option value="returned">{{ translate('Returned') }}</option>

                    </select>
                </div>

                <div class="col-xl-3 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 return code or name & Enter') }}">
                    </div>
                </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 ($order_returns as $key => $return)
                        <tr>
                            <td>
                                {{ $key + 1 + ($order_returns->currentPage() - 1) * $order_returns->perPage() }}
                            </td>
                            <td>

                                {{ $return->return_id }}
                                <input type="hidden" value="{{ $return->return_id }}" id="orderCode{{ $key }}">
                                <i class="fa fa-copy" onclick="copyToClipboard('orderCode{{ $key }}')"
                                    style="cursor: pointer; color:rgb(195, 195, 195);"></i>
                            </td>
                            <td>
                                {{ $return->orderDetails->quantity }}
                            </td>
                            <td>
                                {{ $return->user->name }}, {{ $return->user->phone }}
                            </td>
                            <td>

                                @if (auth('admin')->user()->country->symbol_position == 'left')
                                    {{ auth('admin')->user()->country->currency_symbol }}
                                @endif

                                {{ $return->grand_total }}

                                @if (auth('admin')->user()->country->symbol_position == 'right')
                                    {{ auth('admin')->user()->country->currency_symbol }}
                                @endif
                            </td>
                            <td>
                                {{ strtoupper($return->order->payment_type) }}: @if ($return->order->payment_status == 'paid')
                                    <span class="badge badge-inline badge-success">{{ translate('Paid') }}</span>
                                @elseif($return->order->payment_status == 'unpaid')
                                    <span class="badge badge-inline badge-danger">{{ translate('Unpaid') }}</span>
                                @elseif($return->order->payment_status == 'pending')
                                    <span class="badge badge-inline badge-danger">{{ translate('Pending') }}</span>
                                @endif
                            </td>
                            <td>
                                {{ ucfirst($return->status) }}
                            </td>
                            <td>
                                {{ $return->created_at }}
                            </td>
                            <td>
                                <a class="btn btn-soft-primary btn-icon btn-circle btn-sm"
                                    href="{{ route('admin.orders.returns.show', $return->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.return.print', $return->id) }}')">
                                    <i class="las la-print"></i>
                                </a>

                                <a class="btn btn-soft-info btn-icon btn-circle btn-sm"
                                    href="{{ route('admin.orders.return.invoice.download', $return->id) }}"
                                    title="{{ translate('Download Invoice') }}">
                                    <i class="las la-download"></i>
                                </a>

                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="aiz-pagination">
                {{ $order_returns->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 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