@extends('layouts.base')

@section('title', 'Letter')

@php
    $trClass = 'px-2 py-1 text-xs leading-tight';
@endphp

@section('content')
    <div class="card">
        <div class="card-header bg-secondary rounded-t-lg">
            <div class="flex justify-between items-center">
                <h4 class="card-title text-white font-bold">@yield('title')</h4>

                <div class="flex items-center gap-2">
                    <x-buttons.form-create-button route="{{ route('letter.create') }}" />
                </div>
            </div>
        </div>

        <div class="p-6 shadow-md rounded-b-lg">
            <div class="relative bg-white p-4 pt-6 rounded-lg shadow-sm border mb-6">

                <!-- LEGEND (floating on border) -->
                <div class="absolute -top-3 left-4 bg-white px-2">
                    <h2 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                        <i class="fa fa-filter text-primary"></i>
                        Filter Records
                    </h2>
                </div>

                <!-- FILTER CONTENT -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                    <!-- Date -->
                    <x-fields.text-field label="Date" :value=null fieldName="date" :required=true />

                    <!-- Button -->
                    <div class="flex items-end">
                        <button type="button" id="filterBtn"
                            class="inline-flex items-center gap-2 px-3 py-2 rounded-lg shadow-sm font-semibold text-sm text-success border border-success hover:bg-success/80 hover:text-white focus:outline-none focus:ring-2 focus:ring-success">
                            <i class="fa fa-filter"></i>
                            Filter
                        </button>
                    </div>

                </div>
            </div>

            <table id="letterTable" class="min-w-full display table-auto text-sm" width="100%">
                <thead class="bg-gray-50">
                    <tr class="{{ $trClass }}">
                        <th>S.N.</th>
                        <th>Chalani No.</th>
                        <th>Date</th>
                        <th>QR</th>
                        <th>Created By</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody class="bg-white divide-y divide-gray-200">

                </tbody>
            </table>
        </div>
    </div>

    <div id="qrModal" class="fixed inset-0 hidden items-center justify-center bg-black/50 z-50">
        <div class="bg-white rounded-xl shadow-lg w-[360px] p-4 relative">

            <!-- Bubble close button -->
            <button id="closeQrModal"
                class="absolute -top-3 -right-3 bg-white border shadow-md w-8 h-8 rounded-full flex items-center justify-center text-gray-600 hover:text-black hover:scale-105 transition">
                <i class="fas fa-times"></i>
            </button>

            <div class="text-center">
                <img id="qrImage" class="mx-auto w-[300px] h-[300px]" src="" alt="QR Code">
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @include('letter.partials.scripts')
@endsection