@extends('layouts.app')

@section('subtitle', 'Detail Arsip Surat')

@section('content_body')
    <x-page-header 
        title="Detail Arsip Surat" 
        subtitle="Kelola dan verifikasi berkas dokumen arsip resmi desa."
        :breadcrumbs="['Dashboard' => route('dashboard'), 'Administrasi Surat' => '#', 'Arsip Surat' => route('surat-cetak.index'), 'Detail Arsip' => '#']"
    />

    <div class="container-fluid px-0">
        <div class="row">
            <div class="col-xl-11 col-lg-11 col-12 mx-auto">
                <!-- HEADER INFORMASI SATU BARIS -->
                <div class="d-flex align-items-center flex-wrap mb-4 py-3 px-3.5 bg-white border" style="gap: 16px; border-radius: 10px; border-color: #e2e8f0 !important; font-size: 0.9rem; color: #475569; box-shadow: 0 1px 3px rgba(0,0,0,0.02);">
                    <div class="d-flex align-items-center">
                        <strong class="text-muted mr-1.5"><i class="fas fa-hashtag mr-1"></i> Nomor Surat:</strong>
                        <span class="font-weight-bold text-dark">{{ $surat->nomor_surat }}</span>
                    </div>
                    <div class="text-muted d-none d-md-block" style="opacity: 0.4;">|</div>
                    <div class="d-flex align-items-center">
                        <strong class="text-muted mr-1.5"><i class="fas fa-user mr-1"></i> Pemohon:</strong>
                        <span class="font-weight-bold text-dark">{{ $surat->pengajuanSurat->penduduk->nama_lengkap }}</span>
                    </div>
                    <div class="text-muted d-none d-md-block" style="opacity: 0.4;">|</div>
                    <div class="d-flex align-items-center">
                        <strong class="text-muted mr-1.5"><i class="far fa-file-alt mr-1"></i> Jenis Surat:</strong>
                        <span class="font-weight-bold text-dark">{{ $surat->pengajuanSurat->jenisSurat->nama_surat }}</span>
                    </div>
                    <div class="text-muted d-none d-md-block" style="opacity: 0.4;">|</div>
                    <div class="d-flex align-items-center">
                        <strong class="text-muted mr-1.5"><i class="fas fa-info-circle mr-1"></i> Status:</strong>
                        @if (!$surat->file_scan_ttd)
                            <span class="badge py-1.5 px-2.5 d-inline-flex align-items-center ml-1" style="background-color: #FFEDD5; color: #C2410C; border: 1px solid #FED7AA; border-radius: 20px; font-weight: 600; font-size: 0.78rem;">
                                <span class="mr-1.5" style="width: 5px; height: 5px; background-color: #EA580C; border-radius: 50%;"></span>
                                Menunggu Scan
                            </span>
                        @else
                            <span class="badge py-1.5 px-2.5 d-inline-flex align-items-center ml-1" style="background-color: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; border-radius: 20px; font-weight: 600; font-size: 0.78rem;">
                                <span class="mr-1.5" style="width: 5px; height: 5px; background-color: #16A34A; border-radius: 50%;"></span>
                                Surat Resmi
                            </span>
                        @endif
                    </div>
                </div>

                <!-- CARD PRATINJAU SURAT (90% WIDTH CONTAINER) -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; overflow: hidden; margin-bottom: 24px !important;">
                    <div class="card-header bg-white py-3 border-0 d-flex align-items-center justify-content-between flex-wrap" style="gap: 12px;">
                        <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                            <i class="fas fa-file-pdf mr-2 text-primary"></i>Pratinjau Surat
                        </h5>
                        
                        <!-- TOOLBAR PREVIEW -->
                        <div class="preview-toolbar d-flex align-items-center bg-light border px-2 py-1" style="gap: 8px; border-radius: 8px;">
                            <button type="button" class="btn btn-sm btn-light border-0 btn-zoom-in" style="background: transparent; color: #475569;" title="Zoom In"><i class="fas fa-search-plus"></i></button>
                            <button type="button" class="btn btn-sm btn-light border-0 btn-zoom-out" style="background: transparent; color: #475569;" title="Zoom Out"><i class="fas fa-search-minus"></i></button>
                            <button type="button" class="btn btn-sm btn-light border-0 btn-rotate" style="background: transparent; color: #475569;" title="Rotate"><i class="fas fa-sync-alt"></i></button>
                            <button type="button" class="btn btn-sm btn-light border-0 btn-fullscreen" style="background: transparent; color: #475569;" title="Fullscreen"><i class="fas fa-expand"></i></button>
                            <button type="button" class="btn btn-sm btn-light border-0 btn-print-preview" style="background: transparent; color: #475569;" title="Print"><i class="fas fa-print"></i></button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div id="preview-wrapper" class="preview-container position-relative">
                            @if (!$surat->file_scan_ttd)
                                <!-- Preview generated draft PDF -->
                                <iframe id="preview-iframe" class="preview-element w-100 h-100" src="{{ URL::signedRoute('surat.download', ['id' => $surat->id]) }}" style="border: none; min-height: 600px;"></iframe>
                            @else
                                <!-- Preview scan file -->
                                @php
                                    $extension = pathinfo($surat->file_scan_ttd, PATHINFO_EXTENSION);
                                    $isImage = in_array(strtolower($extension), ['jpg', 'jpeg', 'png']);
                                    $scanUrl = URL::signedRoute('surat.downloadScan', ['id' => $surat->id]);
                                @endphp
                                @if ($isImage)
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center p-3" style="overflow: auto; min-height: 600px;">
                                        <img id="preview-img" class="preview-element img-fluid border shadow-sm" src="{{ $scanUrl }}" alt="Scan TTD Basah" style="max-height: 100%; object-fit: contain;">
                                    </div>
                                @else
                                    <iframe id="preview-iframe" class="preview-element w-100 h-100" src="{{ $scanUrl }}" style="border: none; min-height: 600px;"></iframe>
                                @endif
                            @endif
                        </div>

                        <!-- MAIN BOTTOM ACTION BUTTON -->
                        <div class="px-4 py-3 bg-light border-top">
                            @if (!$surat->file_scan_ttd)
                                <button type="button" class="btn btn-primary btn-lg w-100 d-inline-flex align-items-center justify-content-center py-2.5 btn-upload-scan-trigger" style="border-radius: 8px; font-weight: 700; gap: 8px; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2) !important;">
                                    <i class="fas fa-upload"></i> Upload Scan Surat Resmi
                                </button>
                            @else
                                <a href="{{ URL::signedRoute('surat.downloadScan', ['id' => $surat->id, 'download' => 1]) }}" class="btn btn-success btn-lg w-100 d-inline-flex align-items-center justify-content-center py-2.5" style="border-radius: 8px; font-weight: 700; gap: 8px; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;">
                                    <i class="fas fa-download"></i> Download Scan Surat Resmi
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- BOTTOM NAVIGATION ROW -->
                <div class="row mb-5 mt-4">
                    <div class="col-12 d-flex justify-content-between flex-wrap" style="gap: 12px;">
                        <a href="{{ route('surat-cetak.index') }}" class="btn btn-light border font-weight-bold px-4 py-2" style="border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;">
                            <i class="fas fa-arrow-left"></i> Kembali ke Arsip
                        </a>
                        
                        <a href="{{ URL::signedRoute('surat.download', ['id' => $surat->id]) }}" target="_blank" class="btn btn-primary font-weight-bold px-4 py-2" style="border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;">
                            <i class="fas fa-print"></i> Cetak Surat
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- MODAL UPLOAD SCAN -->
        @if (!$surat->file_scan_ttd)
            <div class="modal fade" id="modalUploadScan" tabindex="-1" role="dialog" aria-labelledby="modalUploadScanLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content border-0 shadow-lg rounded-lg" style="border-radius: 12px; overflow: hidden;">
                        <form id="formUploadScan" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="modal-header bg-primary text-white border-0 py-3" style="background-color: #0F766E !important;">
                                <h5 class="modal-title font-weight-bold" id="modalUploadScanLabel">
                                    <i class="fas fa-file-upload mr-2"></i> Upload Scan Surat Resmi
                                </h5>
                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body px-4 py-3">
                                <div class="alert alert-info py-2 px-3 border-0 rounded-lg mb-3" style="background-color: #f0f9ff; color: #0369a1; font-size: 0.875rem;">
                                    <i class="fas fa-info-circle mr-1.5"></i>
                                    Silakan upload scan berkas surat fisik bertanda tangan basah dan berstempel resmi.
                                </div>

                                <div class="form-group mb-3">
                                    <label class="text-muted mb-0 small font-weight-normal">Nomor Surat</label>
                                    <p class="form-control-plaintext font-weight-bold text-primary py-0 mb-0">{{ $surat->nomor_surat }}</p>
                                </div>

                                <div class="form-group mb-0">
                                    <label for="file_scan_ttd" class="font-weight-bold text-dark">Pilih Berkas Scan <span class="text-danger">*</span></label>
                                    <div class="custom-file shadow-sm">
                                        <input type="file" class="custom-file-input" name="file_scan_ttd" id="file_scan_ttd" accept=".pdf,.jpg,.jpeg,.png" required>
                                        <label class="custom-file-label text-truncate" for="file_scan_ttd">Pilih berkas...</label>
                                    </div>
                                    <small class="text-muted d-block mt-2" style="font-size: 0.8rem;">
                                        Format berkas: PDF, JPG, JPEG, atau PNG. Ukuran maksimal: 10MB.
                                    </small>
                                    <div class="invalid-feedback d-none" id="fileValidationError">
                                        Berkas harus bertipe PDF/JPG/JPEG/PNG dan berukuran di bawah 10MB.
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-0 bg-light px-4 py-3 justify-content-between">
                                <button type="button" class="btn btn-secondary font-weight-bold shadow-sm" data-dismiss="modal" style="border-radius: 8px;">
                                    Batal
                                </button>
                                <button type="submit" class="btn btn-success font-weight-bold shadow-sm" id="btnConfirmUpload" style="background-color: #10b981; border-color: #10b981; border-radius: 8px;">
                                    Upload Dokumen
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('css')
    @parent
    <style>
        .preview-container {
            background-color: #f8fafc;
            height: 600px;
            min-height: 600px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .preview-element {
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
            transform-origin: center center !important;
        }

        .preview-toolbar button {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .preview-toolbar button:hover {
            background-color: #e2e8f0 !important;
            color: #0F766E !important;
            transform: translateY(-1px);
        }
    </style>
@stop

@section('js')
    @parent
    <script>
        $(function() {
            let zoomLevel = 1.0;
            let rotationAngle = 0;
            const previewEl = $('#preview-iframe, #preview-img');

            // Zoom In
            $('.btn-zoom-in').on('click', function() {
                zoomLevel += 0.1;
                applyTransform();
            });

            // Zoom Out
            $('.btn-zoom-out').on('click', function() {
                if (zoomLevel > 0.5) {
                    zoomLevel -= 0.1;
                    applyTransform();
                }
            });

            // Rotate
            $('.btn-rotate').on('click', function() {
                rotationAngle = (rotationAngle + 90) % 360;
                applyTransform();
            });

            function applyTransform() {
                previewEl.css('transform', `scale(${zoomLevel}) rotate(${rotationAngle}deg)`);
            }

            // Fullscreen
            $('.btn-fullscreen').on('click', function() {
                let elem = document.getElementById('preview-wrapper');
                if (!document.fullscreenElement) {
                    if (elem.requestFullscreen) {
                        elem.requestFullscreen();
                    } else if (elem.webkitRequestFullscreen) { /* Safari */
                        elem.webkitRequestFullscreen();
                    } else if (elem.msRequestFullscreen) { /* IE11 */
                        elem.msRequestFullscreen();
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                }
            });

            // Print Document
            $('.btn-print-preview').on('click', function() {
                let iframe = document.getElementById('preview-iframe');
                if (iframe) {
                    try {
                        iframe.contentWindow.focus();
                        iframe.contentWindow.print();
                    } catch (e) {
                        window.open(iframe.src, '_blank').print();
                    }
                } else {
                    let img = document.getElementById('preview-img');
                    if (img) {
                        let win = window.open('');
                        win.document.write(`<img src="${img.src}" style="max-width:100%;" onload="window.print();window.close();">`);
                        win.document.close();
                    }
                }
            });

            // Open Upload Modal Trigger
            $(document).on('click', '.btn-upload-scan-trigger', function() {
                let actionUrl = "{{ route('surat.uploadScan', $surat->id) }}";
                $('#formUploadScan').attr('action', actionUrl);
                $('#file_scan_ttd').val('');
                $('.custom-file-label').text('Pilih berkas...');
                $('#fileValidationError').addClass('d-none');
                $('#modalUploadScan').modal('show');
            });

            // Update custom file label text on selection
            $('#file_scan_ttd').on('change', function() {
                let fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });

            // Form Validation on Submit (10MB limit)
            $('#formUploadScan').submit(function(e) {
                let fileInput = $('#file_scan_ttd')[0];
                if (!fileInput.files.length) {
                    e.preventDefault();
                    $('#fileValidationError').removeClass('d-none').text('Berkas scan wajib dipilih.');
                    return false;
                }

                let file = fileInput.files[0];
                let allowedExtensions = /(\.pdf|\.jpg|\.jpeg|\.png)$/i;
                if (!allowedExtensions.exec(file.name)) {
                    e.preventDefault();
                    $('#fileValidationError').removeClass('d-none').text('Format berkas harus PDF, JPG, JPEG, atau PNG.');
                    return false;
                }

                if (file.size > 10 * 1024 * 1024) {
                    e.preventDefault();
                    $('#fileValidationError').removeClass('d-none').text('Ukuran berkas melebihi batas maksimal 10MB.');
                    return false;
                }

                let form = this;
                e.preventDefault();

                Swal.fire({
                    title: 'Upload Scan Surat Resmi?',
                    text: 'Aktivitas pengunggahan berkas ini akan dicatat dalam Audit Log dan mengubah status berkas menjadi Surat Resmi.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#0F766E',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Upload',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#modalUploadScan').modal('hide');
                        let btn = $('#btnConfirmUpload');
                        btn.prop('disabled', true);
                        btn.html('<i class="fas fa-spinner fa-spin mr-1"></i> Mengupload...');
                        form.submit();
                    }
                });
            });

            // Initialize tooltips
            $('[title]').tooltip({
                trigger: 'hover'
            });
        });
    </script>
@stop