@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <h4 class="mb-3">Permit List</h4>

        {{-- existing filter form ... --}}

        <div class="table-responsive bg-white rounded shadow-sm">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="bg-success text-white">Permit No</th>
                        <th class="bg-success text-white">Business</th>
                        <th class="bg-success text-white">Owner</th>
                        <th class="bg-success text-white">Issue Date</th>
                        <th class="bg-success text-white">Valid Period</th>
                        <th class="bg-success text-white">Status</th>
                        <th class="bg-success text-white" class="text-end">Actions</th> {{-- NEW --}}
                    </tr>
                </thead>
                <tbody>
                    @forelse ($permits as $p)
                        <tr>
                            <td class="text-nowrap">{{ $p->permit_no }}</td>
                            <td>{{ $p->application->business->name ?? '—' }}</td>
                            <td>{{ optional(optional($p->application->business)->owner)->fullname ?? '—' }}</td>
                            <td>{{ \Illuminate\Support\Carbon::parse($p->issue_date)->format('M d, Y') }}</td>
                            <td>{{ $p->valid_from }} → {{ $p->valid_to }}</td>
                            <td>
                                <span
                                    class="badge {{ $p->status === 'RELEASED' ? 'bg-success' : ($p->status === 'PENDING_RELEASE' ? 'bg-warning text-dark' : 'bg-secondary') }}">
                                    {{ $p->status }}
                                </span>
                            </td>
                            <td class="text-end">
                                <button type="button" class="btn btn-sm btn-outline-primary btn-preview"
                                    data-preview-url="{{ route('permits.preview', $p->id) }}">
                                    <i class="bi bi-eye"></i> Preview
                                </button>
                                <a class="btn btn-sm btn-primary" href="{{ route('permits.preview', $p->id) }}?autoprint=1"
                                    target="_blank" rel="noopener">
                                    <i class="bi bi-printer"></i> Print
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">No permits found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">{{ $permits->links() }}</div>
    </div>

    {{-- Preview Modal with Iframe --}}
    <div class="modal fade" id="permitPreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Permit Preview</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0" style="height: 75vh;">
                    <iframe id="permitPreviewFrame" src="about:blank" style="border:0;width:100%;height:100%;"></iframe>
                </div>
                <div class="modal-footer">
                    <button id="btnPrintFromModal" class="btn btn-primary" disabled>
                        <i class="bi bi-printer"></i> Print
                    </button>
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            const $modal = $('#permitPreviewModal');
            const $frame = $('#permitPreviewFrame');
            const $btnPrint = $('#btnPrintFromModal');

            $(document).on('click', '.btn-preview', function() {
                $btnPrint.prop('disabled', true);
                const url = $(this).data('preview-url');
                // Load preview
                $frame.attr('src', url);
                $modal.modal('show');
            });

            // Enable print when content is loaded
            document.getElementById('permitPreviewFrame').addEventListener('load', function() {
                $btnPrint.prop('disabled', false);
            });

            // Trigger print of the iframe
            $btnPrint.on('click', function() {
                const iframe = document.getElementById('permitPreviewFrame');
                if (iframe && iframe.contentWindow) {
                    iframe.contentWindow.focus();
                    iframe.contentWindow.print();
                }
            });

            // Optional: clear iframe when modal hides
            $modal.on('hidden.bs.modal', function() {
                $frame.attr('src', 'about:blank');
                $btnPrint.prop('disabled', true);
            });
        });
    </script>
@endpush