@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
        {{-- Info Karyawan Card --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3 pb-2">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h6 class="mb-1 text-dark font-weight-bold">Detail Unsafe Action</h6>
                        <p class="text-sm mb-0 text-secondary">
                            <strong>NIK:</strong> {{ $ua->nik ?? '-' }} | 
                            <strong>Nama:</strong> {{ $nama_karyawan ?? '-' }} | 
                            <strong>Departemen:</strong> {{ $departemen ?? '-' }}
                        </p>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-info btn-sm mb-0" onclick="previewSurat({{ $ua->id ?? 0 }})">
                            <i class="fas fa-file-pdf me-1"></i>Preview Surat
                        </button>
                        <button type="button" class="btn btn-secondary btn-sm mb-0" onclick="goBack()">
                            <i class="fas fa-circle-left me-1"></i>
                            Kembali
                        </button>
                    </div>
                </div>
                <div class="mt-2">
                    <span class="badge {{ $status_badge_class }} text-white px-3 py-2 font-weight-bold">
                        {{ $status_label }}
                    </span>
                </div>
            </div>
        </div>

        {{-- Form Data (READ ONLY) --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <form>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Nama Karyawan</label>
                                <input type="text" class="form-control" value="{{ $ua->nik ?? '-' }} - {{ $nama_karyawan ?? '-' }} - {{ $departemen ?? '-' }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Nama Atasan</label>
                                <input type="text" class="form-control" value="{{ $nama_atasan ?? '-' }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Hari/Tanggal Pelanggaran</label>
                                <input type="text" class="form-control" value="{{ $tanggal_raw ?? '-' }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Lokasi</label>
                                <input type="text" class="form-control" value="{{ $ua->lokasi ?? '-' }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Referensi Standar</label>
                                <input type="text" class="form-control" value="{{ $referensi_nama ?? '-' }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Kategori Pelanggaran</label>
                                <input type="text" class="form-control" value="{{ $kategori_nama ?? '-' }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Rank</label>
                                <input type="text" class="form-control" value="{{ $rank_nama ?? '-' }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Deskripsi Pelanggaran</label>
                                <textarea class="form-control" rows="5" readonly>{{ $ua->deskripsi_pelanggaran ?? '-' }}</textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Catatan/Komentar</label>
                                <textarea class="form-control" rows="5" readonly>{{ $ua->catatan ?? '-' }}</textarea>
                            </div>
                            @if(!empty($ua->foto_bukti))
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Foto Bukti</label>
                                <div class="mt-2">
                                    <img src="{{ asset('storage') }}/{{ $ua->foto_bukti }}" alt="Foto Bukti" style="max-width: 400px; max-height: 400px; border: 1px solid #ddd; border-radius: 4px;">
                                </div>
                            </div>
                            @endif

                            {{-- Tanda Tangan Karyawan --}}
                            <div class="mb-3">
                                <label class="form-label text-sm font-weight-bold">Tanda Tangan Karyawan</label>
                                <div class="mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" {{ !empty($ua->tanda_tangan) ? 'checked' : '' }} disabled>
                                        <label class="form-check-label">Karyawan langsung tanda tangan</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" {{ empty($ua->tanda_tangan) ? 'checked' : '' }} disabled>
                                        <label class="form-check-label">Karyawan tidak langsung tanda tangan</label>
                                    </div>
                                </div>
                                @if(!empty($ua->tanda_tangan))
                                <div class="border rounded p-2 bg-white">
                                    @if(str_starts_with($ua->tanda_tangan, 'data:image'))
                                    <img src="{{ $ua->tanda_tangan }}" alt="Tanda Tangan" style="border: 1px solid #ccc; max-width: 400px; height: auto; background-color: #fff;">
                                    @else
                                    <img src="{{ asset('storage') }}/{{ $ua->tanda_tangan }}" alt="Tanda Tangan" style="border: 1px solid #ccc; max-width: 400px; height: auto; background-color: #fff;">
                                    @endif
                                </div>
                                @else
                                <div class="border rounded p-2 bg-white">
                                    <canvas width="400" height="200" style="border: 1px solid #ccc; width: 100%; max-width: 400px; height: 200px; background-color: #fff;"></canvas>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- MODAL - Preview Surat --}}
    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="previewModalLabel">Preview Form Unsafe Action</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="previewLoadingState" class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Memuat preview...</p>
                    </div>
                    <iframe id="previewFrame" style="width: 100%; height: 600px; border: none; display: none;"></iframe>
                </div>
                <div class="modal-footer">
                    <a id="downloadPdfBtn" href="#" class="btn btn-success" download>
                        <i class="fas fa-download me-1"></i>Download PDF
                    </a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function previewSurat(id) {
                const letterType = 'ua';
                const letterTypeName = 'Form Unsafe Action';
                
                $('#previewLoadingState').show();
                $('#previewFrame').hide();
                
                const modal = new bootstrap.Modal(document.getElementById('previewModal'));
                modal.show();
                
                $('#previewModalLabel').text(`Preview ${letterTypeName}`);
                
                $.ajax({
                    url: '{{ url("/trspua/cetakUnsafeAction") }}',
                    method: 'POST',
                    data: {
                        id: id,
                        print_type: letterType,
                        _token: '{{ csrf_token() }}'
                    },
                    xhrFields: {
                        responseType: 'blob'
                    },
                    success: function(blob) {
                        const url = window.URL.createObjectURL(blob);
                        $('#previewFrame').attr('src', url);
                        $('#downloadPdfBtn').attr('href', url);
                        $('#downloadPdfBtn').attr('download', 'Unsafe_Action_' + id + '.pdf');
                        
                        $('#previewLoadingState').hide();
                        $('#previewFrame').show();
                    },
                    error: function(xhr) {
                        $('#previewLoadingState').html(`
                            <div class="text-center text-danger py-5">
                                <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                                <p>Gagal memuat preview. Silakan coba lagi.</p>
                            </div>
                        `);
                        console.error('Preview error:', xhr);
                    }
                });
                
                $('#previewFrame').on('load', function() {
                    $('#previewLoadingState').hide();
                    $('#previewFrame').show();
                });
            }

            function goBack() {
                // PRIORITY 1: Check URL query parameter 'return'
                const urlParams = new URLSearchParams(window.location.search);
                const returnUrl = urlParams.get('return');
                
                if (returnUrl) {
                    window.location.href = decodeURIComponent(returnUrl);
                    return;
                }
                
                // PRIORITY 2: Check localStorage for saved detail URL
                const savedDetailUrl = sessionStorage.getItem('rptsp_detail_url');
                if (savedDetailUrl) {
                    window.location.href = savedDetailUrl;
                    return;
                }
                
                // PRIORITY 3: Fallback to detail by NIK
                window.location.href = '{{ url("/rptsp/detail/" . ($ua->nik ?? '')) }}';
            }
        </script>
    @endpush
@endsection