@extends('layouts.base')

@section('title', 'Panel - Documents')

@section('content')
    <main class="p-4">
        <div class="mb-8">
            <h1 class="font-bold text-4xl">Documents</h1>

            <p class="text-neutral-400">
                Countries documents
            </p>
        </div>

        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-8">
            <div class="flex items-center gap-4">
                <x-input id="search" type="search" placeholder="Search documents" value="{{ request()->get('search') }}" />

                <x-button id="clear-filters" label="Clear filters" variant="secondary" />
            </div>

            <div class="*:w-full w-full sm:w-auto sm:*:w-auto">
                <x-a label="Go to Stats" href="{{ route('stats.index') }}" />
            </div>
        </div>

        <div class="mt-12 overflow-x-auto">
            <table class="min-w-full border-separate border-spacing-y-4 overflow-hidden rounded-xl">
                <thead class="bg-neutral-900">
                    <tr class="text-left capitalize *:p-4 *:font-normal">
                        <th class="rounded-l-xl">ID</th>

                        {{-- <th>Payment ID</th> --}}

                        <th>Date time</th>

                        <th>Country</th>

                        <th>Email</th>

                        <th>Passport</th>

                        <th>Payment</th>

                        <th>Status</th>

                        <th class="rounded-r-xl text-right">Actions</th>
                    </tr>
                </thead>

                <tbody>
                    <tr class="*:px-4">
                        <td class="rounded-l-xl pl-0!">
                            <x-input class="search" data-field="id" value="{{ request()->get('id') }}" />
                        </td>

                        {{-- <td class="rounded-l-xl pl-0!">
                            <x-input class="search" data-field="payment-id" value="{{ request()->get('payment-id') }}" />
                        </td> --}}

                        <td class="rounded-l-xl pl-0!">
                            <x-input name="range" value />
                        </td>

                        <td>
                            <x-select class="search" data-field="country" value="{{ request()->get('country') }}">
                                @foreach (config('countries') as $iso => $country)
                                    <option value="{{ $iso }}" @selected($iso === request()->get('country'))>
                                        {{ $country['name'] }}
                                    </option>
                                @endforeach
                            </x-select>
                        </td>

                        <td>
                            <x-input class="search" data-field="email" value="{{ request()->get('email') }}" />
                        </td>

                        <td>
                            <x-input class="search" data-field="passport" value="{{ request()->get('passport') }}" />
                        </td>

                        <td>
                            <x-input class="search" data-field="payment" value="{{ request()->get('payment') }}" />
                        </td>

                        <td>
                            <x-select class="search" data-field="status" value="{{ request()->get('status') }}">
                                <option value="paid" @selected('paid' === request()->get('status'))>Paid</option>
                                <option value="refunded" @selected('refunded' === request()->get('status'))>Refunded</option>
                            </x-select>
                        </td>

                        <td class="rounded-r-xl pr-0!"></td>
                    </tr>

                    @foreach ($documents as $document)
                        @php
                            $amount = 0;

                            if (str_starts_with($document->payment_gateway, 'stripe')) {
                                $amount = (float) ($document->payment['amount'] / 100) ?? 0;
                            } elseif (str_starts_with($document->payment_gateway, 'paypal')) {
                                $amount = (float) $document->payment['purchase_units'][0]['amount']['value'] ?? 0;
                            }
                        @endphp

                        <tr class="mt-4 bg-neutral-900 transition-colors *:p-4 hover:bg-neutral-800">
                            <td class="rounded-l-xl">
                                {{ $document->id }}
                            </td>

                            {{-- <td>
                                {{ $document->payment['id'] }}
                            </td> --}}

                            <td>
                                {{ $document->created_at->format('d-m-Y H:i:s') }}
                            </td>

                            <td>
                                <div class="flex items-center gap-2">
                                    <x-icon name="flag-country-{{ strtolower($document->iso) }}" class="size-8 rounded" />

                                    {{ config("countries.$document->iso")['name'] }}
                                </div>
                            </td>

                            <td title="{{ $document->data['email'] }}">
                                {{ Str::limit($document->data['email'], 30) }}
                            </td>

                            <td title="{{ $document->data['passport'] }}">
                                {{ Str::limit($document->data['passport'], 30) }}
                            </td>

                            <td>
                                <small class="text-neutral-400">ID:</small>
                                <p>{{ isset($document->payment['id']) ? trim(substr($document->payment['id'], 0, 5) . ' ... ' . substr($document->payment['id'], -5)) : 'N/A' }}
                                </p>

                                <small class="text-neutral-400">Amount:</small>
                                <p>{{ $amount }}
                                    USD
                                </p>

                                <small class="text-neutral-400">Last 4:</small>
                                <p>{{ isset($document->payment['latest_charge']['payment_method_details']['card']['last4']) ? $document->payment['latest_charge']['payment_method_details']['card']['last4'] : 'N/A' }}
                                </p>

                                <small class="text-neutral-400">Payment Gateway</small>
                                <p>{{ $document->payment_gateway }}
                                </p>
                            </td>

                            <td>
                                <div @class([
                                    'text-green-500' => !$document->refund,
                                    'text-red-500' => $document->refund,
                                ])>
                                    {{ $document->refund ? 'Refunded' : 'Paid' }}
                                </div>
                            </td>

                            <td class="rounded-r-xl">
                                <div class="flex items-center gap-4">
                                    @if (!$document->refund)
                                        <form action="{{ route('payment.refund', [$document->iso, $document->key]) }}"
                                            method="POST" id="refund-form-{{ $document->key }}">
                                            @csrf

                                            <x-button class="refund" data-key="{{ $document->key }}"
                                                data-iso="{{ $document->iso }}" label="Refund" variant="danger" />
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            @if (count($documents) === 0)
                <div class="text-center p-4 bg-neutral-900 rounded-xl">
                    <p class="text-neutral-400">
                        No documents found
                    </p>
                </div>
            @else
                <div class="pagination">
                    {{ $documents->links('vendor.pagination.tailwind') }}
                </div>
            @endif
        </div>
    </main>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/luxon@3.5.0/build/global/luxon.min.js"></script>
    <script>
        let url = new URL(window.location.href);

        function hasQueryParam(param) {
            return url.searchParams.has(param);
        }

        function setParam(param, value) {
            url.searchParams.set(param, value);
            window.history.pushState({}, '', url);
        }

        document.addEventListener("DOMContentLoaded", () => {

            // Select2
            $("select").each(function() {
                $(this).select2();
            });

            const DEBOUNCE_TIME = 1000;

            let searchTimeout = null;

            const changeParam = (key, value) => {
                const currentParams = new URLSearchParams(window.location.search);

                if (value) {
                    currentParams.set(key, value);
                } else {
                    currentParams.delete(key);
                }

                window.location.search = currentParams.toString();
            };

            document.getElementById('search').addEventListener('input', (event) => {
                const value = event.target.value;

                clearTimeout(searchTimeout);

                searchTimeout = setTimeout(() => {
                    const currentValue = event.target.value;

                    if (currentValue !== value) {
                        return;
                    }

                    changeParam('search', value);
                }, DEBOUNCE_TIME);
            });

            document.querySelectorAll('.search').forEach((element) => {
                if (element instanceof HTMLInputElement) {
                    element.addEventListener('input', (event) => {
                        const value = event.target.value;
                        const field = event.target.dataset.field;

                        clearTimeout(searchTimeout);

                        searchTimeout = setTimeout(() => {
                            const currentValue = event.target.value;

                            if (currentValue !== value) {
                                return;
                            }

                            changeParam(field, value);
                        }, DEBOUNCE_TIME);
                    });
                } else if (element instanceof HTMLSelectElement) {
                    $(element).on('select2:select', (event) => {
                        const value = event.target.value;
                        const field = event.target.dataset.field;

                        changeParam(field, value);
                    });
                }
            });

            document.getElementById('clear-filters').addEventListener('click', () => {
                window.location.search = '';
            });

            document.querySelectorAll('.refund').forEach((element) => {
                element.addEventListener('click', (event) => {
                    const key = event.target.dataset.key;
                    const iso = event.target.dataset.iso;

                    Swal.fire({
                        title: 'Are you sure?',
                        text: `Do you want to refund the document?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, refund it!',
                        confirmButtonColor: '#dc2626',
                        cancelButtonText: 'No, cancel!',
                        cancelButtonColor: '#6b7280',
                        reverseButtons: true,
                    }).then((result) => {
                        if (result.isConfirmed) {
                            document.getElementById(`refund-form-${key}`).submit();
                        }
                    });
                });
            });

            const DateTime = luxon.DateTime;
            // Range
            const picker = new easepick.create({
                element: "#range",
                css: [
                    "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css"
                ],
                zIndex: 10,
                format: "YYYY-MM-DD",
                readonly: false,
                AmpPlugin: {
                    dropdown: {
                        months: true,
                        years: true,
                        minYear: 2024,
                        maxYear: 2025
                    },
                    resetButton: true,
                },
                plugins: [
                    window.easepick_AmpPlugin,
                    window.easepick_RangePlugin,
                    window.easepick_KbdPlugin,
                ],
                setup(picker) {
                    picker.ui.container.dataset.theme = 'dark';
                }
            });

            console.log();

            if ("{{ $from }}" != null && "{{ $from }}".length > 0 && "{{ $to }}"
                .length > 0 && "{{ $to }}" != null) {
                picker.setStartDate(DateTime.fromISO("{{ $from }}").setZone("UTC").toISO());
                picker.setEndDate(DateTime.fromISO("{{ $to }}").setZone("UTC").toISO());
            } else {
                picker.clear();
            }


            picker.on("select", (event) => {
                const from = event.detail.start.toISOString().split("T")[0];
                const to = event.detail.end.toISOString().split("T")[0];

                setParam("from", from);
                setParam("to", to);

                window.location.reload();
            });

            picker.on("clear", () => {
                setParam("from", "");
                setParam("to", "");

                window.location.reload();
            });
        });
    </script>
@endpush