@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>Details</th>
                        <th>Payment Status</th>
                        <th>Bot 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 class="rounded-r-xl pr-0!"></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)
                        @if (! isset($document->payment['amount']))
                            @continue
                        @endif
                        {{-- Calculate amount based on payment gateway --}}
                        @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;
                            }
                            elseif (str_starts_with($document->payment_gateway, 'tailoredpay')) {
                               $amount = (float) $document->payment['amount'] ?? 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['transactionid']) ? $document->payment['transactionid'] : (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>
                            <!-- view document -->
                            <th>
                                @if (!empty($document->key))
                                    <a
                                        href="{{ route('documents.edit', $document->key) }}"
                                        class="cursor-pointer"
                                        title="Editar documento"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="-4 -2 24 24">
                                            <path fill="#bbb20b" d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3m0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2m0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2m0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2m0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2"/>
                                        </svg>
                                    </a>
                                @endif
                            </th>
                            <td>
                                <div @class([
                                    'text-green-500' => !$document->refund,
                                    'text-red-500' => $document->refund,
                                ])>
                                    {{ $document->refund ? 'Refunded' : 'Paid' }}
                                </div>
                            </td>
                            <td>
                               <div @class([
                                    'text-green-500' => $document->bot_status === 'COMPLETED',
                                    'text-yellow-500' => $document->bot_status === 'PROCESSING',
                                    'text-blue-500' => $document->bot_status === 'IN_QUEUE',
                                    'text-gray-500' => $document->bot_status === 'WAITING',
                                    'text-red-500' => !$document->bot_status,
                                ])>

                                    <span style="white-space: nowrap">
                                        <span @class(['hidden' => $document->bot_status !== 'WAITING'])>🟤</span>
                                        <span @class(['hidden' => $document->bot_status !== 'IN_QUEUE'])>🔵</span>
                                        <span @class(['hidden' => $document->bot_status !== 'PROCESSING'])>🟡</span>
                                        <span @class(['hidden' => $document->bot_status !== 'COMPLETED'])>🟢</span>
                                        <span @class(['hidden' => $document->bot_status !== null])>🔴</span>
                                        {{ $document->bot_status ? $document->bot_status : 'N/A' }}
                                    </span>
                                </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();fixed
            };
            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