@extends('layouts.master')
@section('title', 'bKash Fund Transfer Report')
@section('styles')
    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .loader-spin {
            width: 40px;
            height: 40px;
            border: 4px solid #e2e8f0; /* light gray */
            border-top: 4px solid #f59e0b; /* amber-600 */
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        /* Sticky Header */
        .sticky-header th {
            position: sticky;
            top: 0;
            z-index: 30;
            background: #fef3c7; /* must have solid background */
        }


    </style>
@endsection
@section('content')
    <div class="max-w-4xl mx-auto mt-10 px-4">
        <!-- Card -->
        <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">

            <!-- Card Header -->
            <div class="px-8 py-6 bg-gradient-to-r from-amber-50 to-white border-b border-gray-100 text-center">
                <h2 class="text-2xl font-semibold text-gray-800">
                    Fund Transfer Report
                </h2>
                <p class="mt-1 text-sm text-gray-500">
                    Choose a payment date range to view Account-To-Account & BEFTN/ RTGS fund transfer details
                </p>
            </div>

            <!-- Card Body -->
            <div class="px-8 py-6 space-y-6">

                <!-- Date Range -->
                <div class="flex flex-col gap-6">

                    <!-- Row 1 : Fund Transfer Type (Full Width) -->
                    <div class="w-full">
                        <label for="transferType" class="block text-sm font-medium text-gray-700 mb-1">
                            Select Fund Transfer Type <span class="text-red-600">*</span>
                        </label>
                        <select
                            id="transferType"
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
                   focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-amber-400"
                        >
                            <option value="">-- Select --</option>
                            <option value="BRAC">Account to Account Fund Transfer Report</option>
                            <option value="NON_BRAC">BEFTN/ RTGS Fund Transfer Report</option>
                        </select>
                    </div>

                    <!-- Row 2 : Start & End Date (2 Columns) -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        <!-- Start Date -->
                        <div>
                            <label for="startDate" class="block text-sm font-medium text-gray-700 mb-1">
                                Start Pay Date <span class="text-red-600">*</span>
                            </label>
                            <input
                                type="date"
                                id="startDate"
                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
                       focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-amber-400"
                            />
                        </div>

                        <!-- End Date -->
                        <div>
                            <label for="endDate" class="block text-sm font-medium text-gray-700 mb-1">
                                End Pay Date <span class="text-red-600">*</span>
                            </label>
                            <input
                                type="date"
                                id="endDate"
                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
                       focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-amber-400"
                            />
                        </div>

                    </div>
                </div>


                <!-- Action -->
                <div class="flex flex-col items-center gap-3">
                    <button id="generateReport" disabled class="inline-flex items-center gap-2 px-8 py-2.5 bg-amber-400 hover:bg-amber-300 text-gray-800 font-semibold
                           rounded-lg shadow-sm hover:shadow-md transition disabled:opacity-50 disabled:cursor-not-allowed">
                        Generate Fund Transfer Report
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 4h18M4 8h16M6 12h12M8 16h8" />
                        </svg>
                    </button>

                    <p class="text-xs text-gray-500 text-center">
                        Both start and end dates are required to generate the report.
                    </p>
                </div>

            </div>

        </div>
    </div>


@endsection
@push('scripts')
    <script>
        const startDate = document.getElementById('startDate');
        const endDate = document.getElementById('endDate');
        const generateReport = document.getElementById('generateReport');

        // Yesterday (no today / future)
        const yesterday = new Date();
        yesterday.setDate(yesterday.getDate() - 1);
        const maxDate = yesterday.toISOString().split('T')[0];

        // Apply max limit
        startDate.max = maxDate;
        endDate.max = maxDate;

        function updateButtonState() {
            const start = startDate.value;
            const end = endDate.value;

            const isValid =
                start &&
                end &&
                new Date(end) >= new Date(start) &&
                new Date(end) <= new Date(maxDate);

            generateReport.disabled = !isValid;
            generateReport.classList.toggle('pointer-events-none', !isValid);
        }

        // When start date changes
        startDate.addEventListener('change', () => {
            // End date must be >= start date
            endDate.min = startDate.value;

            // Auto-fix invalid end date
            if (endDate.value && new Date(endDate.value) < new Date(startDate.value)) {
                endDate.value = '';
            }

            updateButtonState();
        });

        // When end date changes
        endDate.addEventListener('change', updateButtonState);

        generateReport.addEventListener('click', function(e) {
            e.preventDefault();
            if (startDate.value && endDate.value) {
                // Redirect to report page with query params
                window.location.href = "{{ route('bkash.report') }}"
                    + "?transferType=" + transferType.value
                    + "&start_date=" + startDate.value
                    + "&end_date=" + endDate.value;
            }
        });

        // Initial state
        updateButtonState();
    </script>

@endpush