@extends('layouts.master')
@section('title', 'Detail Retur Faskes — ' . $retur->nomor)

@section('styles')
<style>
    .timeline-hist { position:relative; padding-left:26px; }
    .timeline-hist::before { content:''; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:#e9ecef; }
    .th-item { position:relative; margin-bottom:16px; }
    .th-item:last-child { margin-bottom:0; }
    .th-dot { position:absolute; left:-21px; top:3px; width:13px; height:13px; border-radius:50%; border:2px solid #fff; }
    .th-dot.th-dibuat     { background:#6c757d; box-shadow:0 0 0 2px #6c757d44; }
    .th-dot.th-divalidasi { background:#0d6efd; box-shadow:0 0 0 2px #0d6efd44; }
    .th-dot.th-ditolak    { background:#dc2626; box-shadow:0 0 0 2px #dc262644; }
    .th-dot.th-direvisi   { background:#f59e0b; box-shadow:0 0 0 2px #f59e0b44; }
    .th-dot.th-selesai    { background:#16a34a; box-shadow:0 0 0 2px #16a34a44; }
    .th-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
    .th-label.th-dibuat     { color:#6c757d; }
    .th-label.th-divalidasi { color:#0d6efd; }
    .th-label.th-ditolak    { color:#dc2626; }
    .th-label.th-direvisi   { color:#f59e0b; }
    .th-label.th-selesai    { color:#16a34a; }
    .th-meta { font-size:.78rem; color:#6c757d; }
    .th-catatan { font-size:.8rem; color:#444; background:#f8f9fa; border-left:3px solid #dee2e6; padding:4px 8px; margin-top:4px; border-radius:0 4px 4px 0; }
    .th-catatan-ditolak  { border-color:#dc2626; background:#fff5f5; }
    .th-catatan-direvisi { border-color:#f59e0b; background:#fffbeb; }
    #tblItems th, #tblItems td { vertical-align:middle; font-size:.82rem; border-color:#e9ecef !important; }
    #tblItems thead th { background:#f8f9fa; }
    .status-bar { height:4px; border-radius:2px; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">{{ $retur->nomor }}</p>
            <span class="fs-13 text-muted">Penjualan &rarr; <a href="{{ route('penjualan.retur-kso.index') }}" class="text-muted">Retur Faskes</a> &rarr; Detail</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0 flex-wrap">
            {{-- Tombol sesuai status --}}
            @if($retur->isDraft() || $retur->isDirevisi())
                @can('retur_kso.edit')
                <a href="{{ route('penjualan.retur-kso.edit', $retur->id) }}" class="btn btn-warning btn-sm px-3 py-1">
                    <i class="bx bx-edit me-1"></i>Edit
                </a>
                @endcan
                @can('retur_kso.validasi')
                <form method="POST" action="{{ route('penjualan.retur-kso.validasi', $retur->id) }}" id="formValidasi">
                    @csrf
                    <button type="button" onclick="konfirmasiValidasi()" class="btn btn-primary btn-sm px-3 py-1">
                        <i class="bx bx-send me-1"></i>Validasi & Kirim
                    </button>
                </form>
                @endcan
                @can('retur_kso.delete')
                @if($retur->isDraft())
                <button type="button" onclick="doHapus()" class="btn btn-outline-danger btn-sm px-3 py-1">
                    <i class="bx bx-trash me-1"></i>Hapus
                </button>
                @endif
                @endcan
            @endif
            @if($retur->canRevisi())
                @can('retur_kso.batal')
                <button type="button" onclick="modalRevisi()" class="btn btn-danger btn-sm px-3 py-1">
                    <i class="bx bx-revision me-1"></i>Revisi
                </button>
                @endcan
            @endif
            @if($retur->isDivalidasi())
                @can('retur_kso.process')
                <a href="{{ route('penjualan.retur-kso.verifikasi', $retur->id) }}" class="btn btn-success btn-sm px-3 py-1">
                    <i class="bx bx-qr-scan me-1"></i>Verifikasi Fisik
                </a>
                <button type="button" onclick="modalTolak()" class="btn btn-outline-danger btn-sm px-3 py-1">
                    <i class="bx bx-x-circle me-1"></i>Tolak
                </button>
                @endcan
            @endif
            @if(!$retur->isDraft())
            <button type="button" class="btn btn-primary btn-sm px-3 py-1" onclick="bukaModalReturPdf()">
                <i class="bx bx-printer me-1"></i>Cetak PDF
            </button>
            @endif
            <a href="{{ route('penjualan.retur-kso.index') }}" class="btn btn-outline-secondary btn-sm px-3 py-1">
                <i class="bx bx-arrow-back me-1"></i>Kembali
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show py-2" role="alert">
            {{ session('success') }}<button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show py-2" role="alert">
            {{ session('warning') }}<button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-3">

        {{-- Kiri: Info + Items --}}
        <div class="col-lg-8">

            {{-- Info Header --}}
            <div class="card custom-card mb-3">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <div class="text-muted fs-12 mb-1">Nomor Retur</div>
                            <div class="fw-bold font-monospace fs-15">{{ $retur->nomor }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="text-muted fs-12 mb-1">Status</div>
                            @php
                                $badge = match($retur->status) {
                                    'draft'      => 'secondary',
                                    'divalidasi' => 'primary',
                                    'direvisi'   => 'warning',
                                    'selesai'    => 'success',
                                    default      => 'secondary',
                                };
                                $label = match($retur->status) {
                                    'draft'      => 'Draft',
                                    'divalidasi' => 'Divalidasi',
                                    'direvisi'   => 'Perlu Revisi',
                                    'selesai'    => 'Selesai',
                                    default      => $retur->status,
                                };
                            @endphp
                            <span class="badge bg-{{ $badge }} fs-13 px-3 py-1">{{ $label }}</span>
                        </div>
                        <div class="col-sm-6">
                            <div class="text-muted fs-12 mb-1">Faskes</div>
                            <div class="fw-semibold">{{ $retur->nama_faskes }}</div>
                            @if($retur->gudangKso)
                                <div class="text-muted fs-12">Gudang: {{ $retur->gudangKso->nama }}</div>
                            @endif
                        </div>
                        <div class="col-sm-6">
                            <div class="text-muted fs-12 mb-1">Dibuat Oleh</div>
                            <div class="fw-semibold">{{ $retur->dibuatOleh?->nama ?? '—' }}</div>
                            <div class="text-muted fs-12">{{ $retur->created_at?->format('d/m/Y H:i') }}</div>
                        </div>
                        @if($retur->catatan_sales)
                        <div class="col-12">
                            <div class="text-muted fs-12 mb-1">Catatan Sales</div>
                            <div class="bg-light rounded p-2 fs-13">{{ $retur->catatan_sales }}</div>
                        </div>
                        @endif
                        @if($retur->catatan_revisi)
                        <div class="col-12">
                            <div class="text-muted fs-12 mb-1">Catatan Revisi</div>
                            <div class="bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded p-2 fs-13 text-danger">
                                <i class="bx bx-info-circle me-1"></i>{{ $retur->catatan_revisi }}
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Tabel Item --}}
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title mb-0">Item Retur <span class="badge bg-primary ms-2">{{ $retur->items->count() }} item</span></div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table id="tblItems" class="table table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:38px">No</th>
                                    <th>Nama Barang</th>
                                    @if(($retur->faskes?->mode_pengiriman ?? '') === 'per_lot')
                                    <th style="white-space:nowrap">No. Surat Jalan</th>
                                    @endif
                                    <th class="text-center">No. LOT</th>
                                    <th class="text-center">No. Serial</th>
                                    <th class="text-center">Tgl. ED</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-center">Kondisi</th>
                                    <th class="text-center">Verifikasi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($retur->items as $i => $item)
                                @php
                                    $sjKey   = $item->no_serial ? 'sn:'.$item->no_serial : ($item->no_lot ? 'lot:'.$item->no_lot : null);
                                    $nomorSj = $sjKey ? array_shift($sjLotQueue[$sjKey]) : null;
                                @endphp
                                <tr>
                                    <td class="text-center text-muted">{{ $i + 1 }}</td>
                                    <td class="fw-semibold">{{ $item->nama_barang }}</td>
                                    @if(($retur->faskes?->mode_pengiriman ?? '') === 'per_lot')
                                    <td class="font-monospace small">{{ $nomorSj ?: '—' }}</td>
                                    @endif
                                    <td class="text-center font-monospace">{{ $item->no_lot ?: '—' }}</td>
                                    <td class="text-center font-monospace">{{ $item->no_serial ?: '—' }}</td>
                                    <td class="text-center">{{ $item->tanggal_kedaluwarsa?->format('d/m/Y') ?? '—' }}</td>
                                    <td class="text-center fw-bold">{{ $item->qty }} {{ $item->satuan }}</td>
                                    <td class="text-center">
                                        @php
                                            $kBadge = match($item->kondisi) {
                                                'baik'         => 'success',
                                                'rusak'        => 'danger',
                                                'kedaluwarsa'  => 'warning',
                                                default        => 'secondary',
                                            };
                                        @endphp
                                        <span class="badge bg-{{ $kBadge }}">{{ ucfirst($item->kondisi) }}</span>
                                    </td>
                                    <td class="text-center">
                                        @if($item->isVerified())
                                            <span class="badge bg-success"><i class="bx bx-check me-1"></i>Verified</span>
                                            @if($item->ai_confidence)
                                                <div class="text-muted fs-11 mt-1">AI: {{ $item->ai_confidence }}</div>
                                            @endif
                                        @else
                                            <span class="badge bg-light text-muted border">Belum</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- Kanan: Activity Log --}}
        <div class="col-lg-4">
            <div class="card custom-card h-100">
                <div class="card-header">
                    <div class="card-title mb-0">Riwayat Aktivitas</div>
                </div>
                <div class="card-body">
                    @if($retur->logs->isEmpty())
                        <div class="text-center text-muted py-4">
                            <i class="bx bx-history fs-2 d-block mb-2"></i>Belum ada aktivitas
                        </div>
                    @else
                    <div class="timeline-hist">
                        @foreach($retur->logs->sortBy('created_at') as $log)
                        @php
                            $aksi = $log->aksi;
                            $dotClass = match($aksi) {
                                'dibuat'     => 'th-dibuat',
                                'divalidasi' => 'th-divalidasi',
                                'ditolak'    => 'th-ditolak',
                                'direvisi'   => 'th-direvisi',
                                'selesai'    => 'th-selesai',
                                default      => 'th-dibuat',
                            };
                            $aksiLabel = match($aksi) {
                                'dibuat'     => 'Dibuat',
                                'divalidasi' => 'Divalidasi',
                                'ditolak'    => 'Ditolak',
                                'direvisi'   => 'Direvisi',
                                'selesai'    => 'Selesai',
                                default      => ucfirst($aksi),
                            };
                        @endphp
                        <div class="th-item">
                            <div class="th-dot {{ $dotClass }}"></div>
                            <div class="th-label {{ $dotClass }}">{{ $aksiLabel }}</div>
                            <div class="th-meta">
                                {{ $log->dilakukanOleh?->nama ?? '—' }} &bull;
                                {{ $log->created_at?->format('d/m/Y H:i') }}
                            </div>
                            @if($log->keterangan)
                                <div class="th-catatan {{ in_array($aksi, ['ditolak','direvisi']) ? 'th-catatan-'.$aksi : '' }}">
                                    {{ $log->keterangan }}
                                </div>
                            @endif
                            @if($log->foto_path)
                                <div class="mt-2">
                                    <a href="{{ $log->fotoUrl() }}" target="_blank">
                                        <img src="{{ $log->fotoUrl() }}" class="rounded border" style="max-height:80px;cursor:zoom-in">
                                    </a>
                                </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>

{{-- Card Foto Retur --}}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="card-title mb-0"><i class="bx bx-images me-2 text-primary"></i>Foto Retur</div>
                    @php $fotos = $retur->logs->filter(fn($l) => $l->foto_path)->values(); @endphp
                    <span class="badge bg-primary">{{ $fotos->count() }} foto</span>
                </div>
                <div class="card-body">
                    @if($fotos->isEmpty())
                    <div class="text-muted small"><i class="bx bx-image-alt me-1"></i>Belum ada foto yang diupload.</div>
                    @else
                    <div class="row g-2">
                        @foreach($fotos as $log)
                        <div class="col-6 col-md-3 col-lg-2">
                            <a href="{{ $log->fotoUrl() }}" target="_blank">
                                <img src="{{ $log->fotoUrl() }}" alt="Foto {{ $loop->iteration }}"
                                     class="img-fluid rounded border"
                                     style="width:100%;height:120px;object-fit:cover;cursor:pointer">
                            </a>
                            @if($log->keterangan)
                            <div class="text-muted small mt-1 text-truncate" title="{{ $log->keterangan }}">{{ $log->keterangan }}</div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Cetak PDF --}}
<div class="modal fade" id="modalReturPdf" tabindex="-1">
    <div class="modal-dialog modal-xl" style="max-width:88vw">
        <div class="modal-content" style="height:90vh;display:flex;flex-direction:column">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0"><i class="bx bx-printer me-1"></i>Cetak Retur Faskes</h6>
                <a id="btnUnduhReturPdf" href="{{ route('penjualan.retur-kso.cetak-pdf', $retur->id) }}" target="_blank" class="btn btn-success btn-sm ms-2">
                    <i class="bx bx-download me-1"></i> Download PDF
                </a>
                <button type="button" class="btn-close ms-2" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" style="flex:1;overflow:hidden">
                <iframe id="returPdfFrame" src="" style="width:100%;height:100%;border:none"></iframe>
            </div>
        </div>
    </div>
</div>

{{-- Modal Revisi --}}
<div class="modal fade" id="modalRevisi" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('penjualan.retur-kso.revisi', $retur->id) }}">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Revisi Retur</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted fs-13 mb-3">Retur akan dikembalikan ke status <strong>Draft</strong>. Stok Faskes akan dipulihkan kembali.</p>
                    <label class="form-label small fw-semibold">Catatan Revisi (opsional)</label>
                    <textarea name="catatan" class="form-control form-control-sm" rows="3" placeholder="Alasan revisi..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning btn-sm"><i class="bx bx-revision me-1"></i>Revisi</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Modal Tolak --}}
<div class="modal fade" id="modalTolak" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form method="POST" action="{{ route('penjualan.retur-kso.tolak', $retur->id) }}">
            @csrf
            <div class="modal-content">
                <div class="modal-header border-danger">
                    <h6 class="modal-title text-danger">Tolak Retur</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted fs-13 mb-3">Retur akan ditolak dan sales perlu merevisi kembali.</p>
                    <label class="form-label small fw-semibold">Alasan Penolakan <span class="text-danger">*</span></label>
                    <textarea name="catatan_revisi" class="form-control form-control-sm" rows="3" placeholder="Jelaskan alasan penolakan..." required></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger btn-sm"><i class="bx bx-x-circle me-1"></i>Tolak Retur</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
function modalRevisi() {
    new bootstrap.Modal(document.getElementById('modalRevisi')).show();
}
function modalTolak() {
    new bootstrap.Modal(document.getElementById('modalTolak')).show();
}
function doHapus() {
    Swal.fire({ title:'Hapus Retur?', text:'Data retur akan dihapus permanen.', icon:'warning',
        showCancelButton:true, confirmButtonColor:'#dc3545', confirmButtonText:'Ya, Hapus', cancelButtonText:'Batal' })
        .then(r => { if (!r.isConfirmed) return;
            $.ajax({ url:`{{ route('penjualan.retur-kso.destroy', $retur->id) }}`, method:'POST',
                data:{ _token:'{{ csrf_token() }}', _method:'DELETE' },
                success: () => window.location.href = '{{ route('penjualan.retur-kso.index') }}',
                error: xhr => Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Error', 'error') });
        });
}
const URL_RETUR_PDF = '{{ route('penjualan.retur-kso.cetak-pdf', $retur->id) }}';
function bukaModalReturPdf() {
    const frame = document.getElementById('returPdfFrame');
    if (!frame.src || frame.src === 'about:blank' || frame.src === window.location.href) frame.src = URL_RETUR_PDF;
    new bootstrap.Modal(document.getElementById('modalReturPdf')).show();
}
if (new URLSearchParams(location.search).get('preview') === '1') {
    document.addEventListener('DOMContentLoaded', bukaModalReturPdf);
}
document.getElementById('modalReturPdf').addEventListener('hidden.bs.modal', function() {
    document.getElementById('returPdfFrame').src = 'about:blank';
});
function konfirmasiValidasi() {
    Swal.fire({
        title: 'Validasi Retur?',
        text: 'Stok Faskes akan dikurangi sesuai item retur.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Validasi',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#0d6efd',
    }).then(r => { if (r.isConfirmed) document.getElementById('formValidasi').submit(); });
}
</script>
@endsection