@extends('layouts.app')
@section('content')
<div id="layout-wrapper">
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Visa Fees</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
                                    <li class="breadcrumb-item active">Visa Fees</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card" id="visaFeeList">
                            <div class="card-header border-0">
                                <div class="row g-4 align-items-center">
                                    <div class="col-sm-4">
                                        <form action="{{ route('visa-fees.index') }}" method="GET">
                                            <input type="hidden" name="country_id" value="{{ request('country_id') }}">
                                            <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                                            <input type="hidden" name="is_active" value="{{ request('is_active') }}">
                                            <input type="hidden" name="date_from" value="{{ request('date_from') }}">
                                            <input type="hidden" name="date_to" value="{{ request('date_to') }}">
                                            <div class="search-box">
                                                <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="Search visa fee name...">
                                                <i class="ri-search-line search-icon"></i>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-sm-auto ms-auto">
                                        <div class="hstack gap-2">
                                            <button type="button" class="btn btn-info" data-bs-toggle="offcanvas" href="#offcanvasExample">
                                                <i class="ri-filter-3-line align-bottom me-1"></i> Filters
                                            </button>
                                            <button
                                                type="button"
                                                class="btn btn-success add-btn visa-fee-modal-trigger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#visaFeeModal"
                                                data-mode="create"
                                                data-store-url="{{ route('visa-fees.store') }}">
                                                <i class="ri-add-line align-bottom me-1"></i> Add Visa Fee
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="table-responsive table-card">
                                    <table class="table align-middle" id="visaFeeTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="width: 70px;">SL</th>
                                                <th>Name</th>
                                                <th>Visa Fee</th>
                                                <th>Country</th>
                                                <th>Category</th>
                                                <th>Status</th>
                                                <th>Created Date</th>
                                                <th style="width: 180px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody class="list form-check-all">
                                            @forelse ($visaFees as $visaFee)
                                            <tr>
                                                <td>{{ $visaFees->firstItem() + $loop->index }}</td>
                                                <td>{{ $visaFee->name }}</td>
                                                <td>{{ $visaFee->visa_fee }}</td>
                                                <td>{{ optional($visaFee->country)->name_en ?? '-' }}</td>
                                                <td>{{ optional($visaFee->category)->name ?? '-' }}</td>
                                                <td>
                                                    @if ($visaFee->is_active === 't')
                                                    <span class="badge bg-success">Active</span>
                                                    @else
                                                    <span class="badge bg-danger">Inactive</span>
                                                    @endif
                                                </td>
                                                <td>{{ $visaFee->created_at->format('d M, Y') }}</td>
                                                <td>
                                                    <ul class="list-inline hstack gap-2 mb-0">
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="View">
                                                            <a href="javascript:void(0);"
                                                                class="text-muted d-inline-block visa-fee-modal-trigger"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#visaFeeModal"
                                                                data-mode="view"
                                                                data-visa-fee-name="{{ $visaFee->name }}"
                                                                data-visa-fee-amount="{{ $visaFee->visa_fee }}"
                                                                data-visa-fee-country-id="{{ $visaFee->country_id }}"
                                                                data-visa-fee-category-id="{{ $visaFee->category_id }}"
                                                                data-visa-fee-is-active="{{ $visaFee->is_active }}"
                                                                data-visa-fee-created-at="{{ $visaFee->created_at->format('d M, Y') }}"
                                                                data-update-url="{{ route('visa-fees.update', $visaFee->id) }}">
                                                                <i class="ri-eye-fill align-bottom"></i>
                                                            </a>
                                                        </li>
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
                                                            <a href="javascript:void(0);"
                                                                class="text-muted d-inline-block visa-fee-modal-trigger"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#visaFeeModal"
                                                                data-mode="edit"
                                                                data-visa-fee-name="{{ $visaFee->name }}"
                                                                data-visa-fee-amount="{{ $visaFee->visa_fee }}"
                                                                data-visa-fee-country-id="{{ $visaFee->country_id }}"
                                                                data-visa-fee-category-id="{{ $visaFee->category_id }}"
                                                                data-visa-fee-is-active="{{ $visaFee->is_active }}"
                                                                data-visa-fee-created-at="{{ $visaFee->created_at->format('d M, Y') }}"
                                                                data-update-url="{{ route('visa-fees.update', $visaFee->id) }}">
                                                                <i class="ri-pencil-fill align-bottom"></i>
                                                            </a>
                                                        </li>
                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Delete">
                                                            <form action="{{ route('visa-fees.destroy', $visaFee->id) }}" method="POST" class="d-inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Do you want to delete this visa fee?');">
                                                                    <i class="ri-delete-bin-fill"></i>
                                                                </button>
                                                            </form>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="8" class="text-center text-danger">
                                                    <strong>No visa fee found.</strong>
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex justify-content-end mt-3">
                                    {{ $visaFees->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('layouts.footer')
    </div>
</div>

<div class="modal fade" id="visaFeeModal" tabindex="-1" aria-labelledby="visaFeeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="visaFeeModalLabel">Visa Fee</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="visaFeeModalForm" method="POST" autocomplete="off">
                @csrf
                <input type="hidden" id="visa-fee-modal-method" name="_method" value="PUT">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-lg-12">
                            <label for="modal-visa-fee-name" class="form-label">Name</label>
                            <input type="text" id="modal-visa-fee-name" name="name" class="form-control" required>
                        </div>
                        <div class="col-lg-12">
                            <label for="modal-visa-fee-amount" class="form-label">Visa Fee</label>
                            <input type="number" id="modal-visa-fee-amount" name="visa_fee" class="form-control" min="0" step="0.01" required>
                        </div>
                        <div class="col-lg-12">
                            <label for="modal-visa-fee-country-id" class="form-label">Country</label>
                            <select id="modal-visa-fee-country-id" name="country_id" class="form-select" required>
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name_en }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-12">
                            <label for="modal-visa-fee-category-id" class="form-label">Category</label>
                            <select id="modal-visa-fee-category-id" name="category_id" class="form-select" required>
                                <option value="">Select Category</option>
                                @foreach ($visaCategories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-12">
                            <label for="modal-visa-fee-is-active" class="form-label">Status</label>
                            <select id="modal-visa-fee-is-active" name="is_active" class="form-select" required>
                                <option value="t">Active</option>
                                <option value="f">Inactive</option>
                            </select>
                        </div>
                        <div class="col-lg-12 existing-visa-fee-only">
                            <label for="modal-visa-fee-created-at" class="form-label">Created At</label>
                            <input type="text" id="modal-visa-fee-created-at" class="form-control" readonly>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="visaFeeModalSubmitBtn">Update Visa Fee</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header bg-light">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Visa Fee Filters</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <form action="{{ route('visa-fees.index') }}" method="GET" class="d-flex flex-column justify-content-end h-100">
        <input type="hidden" name="q" value="{{ request('q') }}">
        <div class="offcanvas-body">
            <div class="mb-4">
                <label for="country_id" class="form-label text-muted text-uppercase fw-semibold mb-3">Country</label>
                <select class="form-select" id="country_id" name="country_id">
                    <option value="">All Countries</option>
                    @foreach ($countries as $country)
                    <option value="{{ $country->id }}" {{ (string) request('country_id') === (string) $country->id ? 'selected' : '' }}>{{ $country->name_en }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label for="category_id" class="form-label text-muted text-uppercase fw-semibold mb-3">Category</label>
                <select class="form-select" id="category_id" name="category_id">
                    <option value="">All Categories</option>
                    @foreach ($visaCategories as $category)
                    <option value="{{ $category->id }}" {{ (string) request('category_id') === (string) $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label for="is_active" class="form-label text-muted text-uppercase fw-semibold mb-3">Status</label>
                <select class="form-select" id="is_active" name="is_active">
                    <option value="">All Status</option>
                    <option value="t" {{ request('is_active') === 't' ? 'selected' : '' }}>Active</option>
                    <option value="f" {{ request('is_active') === 'f' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="mb-4">
                <label for="date_from" class="form-label text-muted text-uppercase fw-semibold mb-3">From Date</label>
                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
            </div>
            <div class="mb-4">
                <label for="date_to" class="form-label text-muted text-uppercase fw-semibold mb-3">To Date</label>
                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
            </div>
        </div>
        <div class="offcanvas-footer border-top p-3 text-center hstack gap-2">
            <a href="{{ route('visa-fees.index') }}" class="btn btn-light w-100">Clear</a>
            <button type="submit" class="btn btn-success w-100">Apply</button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modalTriggers = document.querySelectorAll('.visa-fee-modal-trigger');
        const modalForm = document.getElementById('visaFeeModalForm');
        const modalTitle = document.getElementById('visaFeeModalLabel');
        const modalSubmitButton = document.getElementById('visaFeeModalSubmitBtn');
        const modalMethodField = document.getElementById('visa-fee-modal-method');
        const nameField = document.getElementById('modal-visa-fee-name');
        const amountField = document.getElementById('modal-visa-fee-amount');
        const countryField = document.getElementById('modal-visa-fee-country-id');
        const categoryField = document.getElementById('modal-visa-fee-category-id');
        const statusField = document.getElementById('modal-visa-fee-is-active');
        const createdAtField = document.getElementById('modal-visa-fee-created-at');
        const existingOnlyFields = document.querySelectorAll('.existing-visa-fee-only');

        modalTriggers.forEach(function (trigger) {
            trigger.addEventListener('click', function () {
                const mode = this.dataset.mode || 'view';
                const isCreateMode = mode === 'create';
                const isViewMode = mode === 'view';

                modalForm.action = isCreateMode ? this.dataset.storeUrl : this.dataset.updateUrl;
                modalMethodField.disabled = isCreateMode;
                modalMethodField.value = isCreateMode ? 'POST' : 'PUT';

                nameField.value = isCreateMode ? '' : (this.dataset.visaFeeName || '');
                amountField.value = isCreateMode ? '' : (this.dataset.visaFeeAmount || '');
                countryField.value = isCreateMode ? '' : (this.dataset.visaFeeCountryId || '');
                categoryField.value = isCreateMode ? '' : (this.dataset.visaFeeCategoryId || '');
                statusField.value = isCreateMode ? 't' : (this.dataset.visaFeeIsActive || 't');
                createdAtField.value = isCreateMode ? '' : (this.dataset.visaFeeCreatedAt || '');

                modalTitle.textContent = isCreateMode ? 'Add Visa Fee' : (isViewMode ? 'View Visa Fee' : 'Edit Visa Fee');
                modalSubmitButton.textContent = isCreateMode ? 'Create Visa Fee' : 'Update Visa Fee';
                modalSubmitButton.classList.toggle('d-none', isViewMode);

                nameField.readOnly = isViewMode;
                amountField.readOnly = isViewMode;
                countryField.disabled = isViewMode;
                categoryField.disabled = isViewMode;
                statusField.disabled = isViewMode;

                existingOnlyFields.forEach(function (element) {
                    element.classList.toggle('d-none', isCreateMode);
                });
            });
        });
    });
</script>
@endsection