@extends('layouts.app')

@section('judul', 'Detail Naskah Keluar')
@section('subjudul', $surat->perihal)

@push('css')
    <link rel="stylesheet" href="{{ asset('vendor/select2/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('vendor/select2/select2-bootstrap4.min.css') }}">
@endpush

@section('aksi-header')
    <a href="{{ route('surat-keluar.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Daftar</a>

    @can('update', $surat)
        <a href="{{ route('surat-keluar.edit', $surat) }}" class="btn btn-outline-primary"><i class="fas fa-pen mr-1"></i> Ubah</a>
    @endcan
    @can('agendakan', $surat)
        <x-form-aksi :action="route('surat-keluar.agendakan', $surat)" label="Agendakan" ikon="fa-book" warna="primary"
                     :pesan="'Isi nomor agenda sesuai buku agenda naskah keluar '.$surat->unitPengirim->nama_unit.'.'
                         .($surat->kePihakLuar() ? ' Naskah kepada pihak luar langsung menjadi arsip setelah diagendakan.' : '')" alasan="Nomor agenda"
                     isian-nama="nomor_agenda" isian-tipe="text" :isian-min="1" tombol-konfirmasi="Ya, agendakan" />
    @endcan
    @if ($distribusiSaya)
        @can('konfirmasi', $distribusiSaya)
            <x-form-aksi :action="route('surat-keluar.konfirmasi', $distribusiSaya)" label="Konfirmasi Penerimaan" ikon="fa-circle-check" warna="success"
                         pesan="Konfirmasi bahwa Anda sudah menerima dan membaca naskah ini." tombol-konfirmasi="Ya, konfirmasi" />
        @endcan
    @endif
    @can('arsipkan', $surat)
        <x-form-aksi :action="route('surat-keluar.arsipkan', $surat)" label="Arsipkan" ikon="fa-box-archive" warna="navy"
                     pesan="Naskah keluar akan dipindahkan ke arsip digital." />
    @endcan
    @can('batalkan', $surat)
        <x-form-aksi :action="route('surat-keluar.batalkan', $surat)" label="Batalkan" ikon="fa-ban" warna="outline-danger"
                     judul="Batalkan naskah keluar?" pesan="Naskah yang dibatalkan tetap tersimpan sebagai jejak."
                     alasan="Alasan pembatalan" tombol-konfirmasi="Ya, batalkan" />
    @endcan
@endsection

@section('konten')
    @if ($distribusiSaya?->id_surat_masuk)
        <div class="d-flex align-items-center p-3 mb-3 rounded bg-white border" style="border-left:4px solid var(--ss-primary) !important">
            <i class="fas fa-inbox fa-lg mr-3" style="color:var(--ss-primary)"></i>
            <div class="flex-grow-1">Naskah ini dikirim kepada {{ $distribusiSaya->id_user_penerima ? 'Anda' : 'unit kerja Anda ('.$distribusiSaya->unit->nama_unit.')' }} dan tercatat di <b>Naskah Masuk</b> unit kerja
                {{ $distribusiSaya->unit->nama_unit }}: sekretaris/TU-nya mengagendakannya sebagai tanda naskah diterima.</div>
            <a href="{{ route('surat-masuk.show', $distribusiSaya->id_surat_masuk) }}" class="btn btn-sm btn-primary ml-2 text-nowrap">Buka di Naskah Masuk</a>
        </div>
    @elseif ($distribusiSaya?->berstatus('TERKIRIM', 'DIBACA'))
        <div class="alert alert-info d-flex align-items-center">
            <i class="fas fa-paper-plane fa-lg mr-3"></i>
            <div>Naskah ini didistribusikan kepada {{ $distribusiSaya->id_user_penerima ? 'Anda' : 'unit kerja Anda ('.$distribusiSaya->unit->nama_unit.')' }}.
                Setelah membaca, tekan <b>Konfirmasi Penerimaan</b>.</div>
        </div>
    @endif

    <div class="row">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Informasi naskah</h3>
                    <x-badge-status :status="$surat->status" />
                </div>
                <div class="card-body">
                    <dl class="daftar-info mb-0">
                        <dt>Nomor naskah</dt>
                        <dd class="fw-semibold">{{ $surat->nomor_surat }}</dd>
                        <dt>Nomor agenda</dt>
                        <dd>
                            @if ($surat->nomor_agenda)
                                <span class="nomor-agenda">{{ $surat->nomor_agenda }}</span>
                                <span class="small teks-redup ml-1">{{ $surat->tanggal_agenda?->translatedFormat('d M Y H:i') }}</span>
                            @else
                                <span class="teks-redup">Belum diagendakan</span>
                            @endif
                        </dd>
                        <div class="row">
                            <div class="col-6"><dt>Tanggal naskah</dt><dd>{{ $surat->tanggal_surat->translatedFormat('d F Y') }}</dd></div>
                        </div>
                        <dt>Tujuan</dt>
                        <dd>
                            {{ $surat->tujuan->nama_tujuan }}
                            <span class="badge badge-lembut-{{ $surat->kePihakLuar() ? 'secondary' : 'info' }} ml-1">{{ $surat->kePihakLuar() ? 'Pihak luar' : 'Antar unit kerja' }}</span>
                            @if ($surat->tujuan->instansi)<div class="small teks-redup">{{ $surat->tujuan->instansi }}</div>@endif
                        </dd>
                        <dt>Perihal</dt>
                        <dd>{{ $surat->perihal }}</dd>
                        @if ($surat->ringkasan)
                            <dt>Ringkasan</dt>
                            <dd style="white-space:pre-line">{{ $surat->ringkasan }}</dd>
                        @endif
                        <x-atribut-naskah :surat="$surat" />
                        <dt>Lampiran</dt><dd>{{ $surat->lampiran ?: '—' }}</dd>
                        <div class="row">
                            <div class="col-6"><dt>Penandatangan</dt><dd>{{ $surat->penandatangan->nama }}<div class="small teks-redup">{{ $surat->penandatangan->jabatan?->nama_jabatan }}</div></dd></div>
                            <div class="col-6"><dt>Unit kerja pengirim</dt><dd>{{ $surat->unitPengirim->nama_unit }}</dd></div>
                        </div>
                        <dt>Dicatat oleh</dt>
                        <dd class="mb-0">{{ $surat->penginput->nama }} <span class="small teks-redup">· {{ $surat->created_at->translatedFormat('d M Y H:i') }}</span></dd>
                    </dl>
                </div>
            </div>

            @php
                $aktif = $surat->distribusi->reject(fn ($d) => $d->berstatus('DIBATALKAN'));
                $terkonfirmasi = $aktif->filter(fn ($d) => $d->berstatus('DIKONFIRMASI'))->count();
            @endphp
            @if ($surat->kePihakLuar())
                <div class="card">
                    <div class="card-body d-flex align-items-center">
                        <i class="fas fa-box-archive fa-lg mr-3 teks-redup"></i>
                        <div class="small">Naskah kepada pihak luar tidak didistribusikan lewat aplikasi. Setelah diagendakan, naskah ini langsung tersimpan sebagai arsip.</div>
                    </div>
                </div>
            @else
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Pengiriman ke unit kerja</h3>
                    @if ($aktif->isNotEmpty())<span class="small teks-redup">{{ $terkonfirmasi }} dari {{ $aktif->count() }} diterima</span>@endif
                </div>
                @if ($aktif->isNotEmpty())
                    <div class="px-3 pt-3">
                        <div class="progress" style="height:6px"><div class="progress-bar bg-success" style="width: {{ round($terkonfirmasi / $aktif->count() * 100) }}%"></div></div>
                    </div>
                @endif
                <div class="card-body {{ $surat->distribusi->isEmpty() ? '' : 'p-0' }}">
                    @forelse ($surat->distribusi as $d)
                        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom {{ $distribusiSaya?->is($d) ? 'bg-light' : '' }}">
                            <div>
                                <div class="fw-semibold">{{ $d->penerima?->nama ?? 'Unit kerja '.$d->unit->nama_unit }}</div>
                                <div class="small teks-redup">
                                    {{ $d->penerima?->jabatan?->nama_jabatan ? $d->penerima->jabatan->nama_jabatan.' · ' : '' }}{{ $d->unit->nama_unit }}
                                    @if ($d->tanggal_diterima)
                                        · diterima {{ $d->tanggal_diterima->translatedFormat('d M H:i') }}{{ ! $d->id_user_penerima && $d->diterimaOleh ? ' oleh '.$d->diterimaOleh->nama : '' }}
                                    @endif
                                </div>
                                @if ($d->naskahInternal)
                                    <div class="small mt-1"><i class="fas fa-inbox fa-xs teks-redup mr-1"></i>Naskah masuk unit kerja:
                                        @can('view', $d->naskahInternal)
                                            <a href="{{ route('surat-masuk.show', $d->naskahInternal) }}">{{ $d->naskahInternal->status->nama_status }}</a>
                                        @else
                                            {{ $d->naskahInternal->status->nama_status }}
                                        @endcan
                                        @if ($d->naskahInternal->nomor_agenda) · agenda {{ $d->naskahInternal->nomor_agenda }} @endif
                                    </div>
                                @endif
                            </div>
                            <x-badge-status :status="$d->status" />
                        </div>
                    @empty
                        <x-kosong judul="Belum dikirim" ikon="fa-people-arrows"
                                  :pesan="$surat->berstatus('DRAFT', 'DIAGENDAKAN') ? 'Sekretaris/TU mengirim naskah ke unit kerja tujuan setelah diagendakan.' : null" />
                    @endforelse
                </div>

                @if ($pilihanTujuan)
                    <div class="card-footer bg-white">
                        @if ($pilihanTujuan->isEmpty())
                            <div class="small teks-redup">Belum ada unit kerja lain yang dapat dituju.</div>
                        @else
                            <form method="POST" action="{{ route('surat-keluar.distribusi', $surat) }}" data-konfirmasi="Naskah masuk ke Naskah Masuk setiap unit kerja tujuan untuk diagendakan sekretaris/TU-nya, lalu diteruskan kepada pimpinannya. Pimpinan unit kerja Anda menerima pemberitahuan."
                                  data-judul="Kirim naskah?" data-tombol="Ya, kirim" id="form-distribusi">
                                @csrf
                                <div class="form-group">
                                    <label for="penerima">{{ $aktif->isEmpty() ? 'Kirim kepada unit kerja' : 'Tambah unit kerja tujuan' }} <span class="wajib">*</span></label>
                                    <select id="penerima" name="penerima[]" multiple required class="form-control @error('penerima') is-invalid @enderror" data-placeholder="Pilih unit kerja…">
                                        @foreach ($pilihanTujuan as $u)
                                            <option value="n:{{ $u->id }}">{{ $u->nama_unit }}</option>
                                        @endforeach
                                    </select>
                                    @error('penerima')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                </div>
                                <div class="form-group">
                                    <input type="text" name="keterangan" maxlength="1000" class="form-control form-control-sm" placeholder="Catatan untuk unit kerja tujuan (opsional)">
                                    <small class="form-text teks-redup">Naskah masuk ke <b>Naskah Masuk</b> setiap unit kerja tujuan dan diterima saat sekretaris/TU-nya mengagendakan.</small>
                                </div>
                                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-paper-plane mr-1"></i> Kirim</button>
                            </form>
                        @endif
                    </div>
                @endif
            </div>
            @endif

            <div class="card">
                <div class="card-header"><h3 class="card-title">Versi dokumen</h3></div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @foreach ($surat->file as $f)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div class="small">
                                    <span class="badge badge-lembut-{{ $loop->first ? 'primary' : 'secondary' }} mr-1">v{{ $f->versi }}</span>
                                    {{ \Illuminate\Support\Str::limit($f->nama_file, 38) }}
                                    <div class="teks-redup">{{ $f->pengunggah->nama }} · {{ $f->created_at->translatedFormat('d M Y H:i') }} · {{ \App\Support\Tampilan::ukuranFile($f->ukuran_file) }}</div>
                                </div>
                                <div class="text-nowrap">
                                    <a href="{{ route('dokumen.surat-keluar.lihat', $f) }}" target="_blank" rel="noopener" class="btn btn-sm btn-light" title="Buka"><i class="fas fa-eye"></i></a>
                                    @can('unduh', $surat)
                                        <a href="{{ route('dokumen.surat-keluar.unduh', $f) }}" class="btn btn-sm btn-light" title="Unduh"><i class="fas fa-download"></i></a>
                                    @endcan
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
                @can('update', $surat)
                    <div class="card-footer bg-white">
                        <form method="POST" action="{{ route('surat-keluar.dokumen', $surat) }}" enctype="multipart/form-data">
                            @csrf
                            <x-unggah-file name="file" label="Unggah versi baru" />
                            <div class="form-group">
                                <input type="text" name="keterangan" maxlength="255" class="form-control form-control-sm" placeholder="Keterangan perubahan (opsional)">
                            </div>
                            <button type="submit" class="btn btn-sm btn-outline-primary"><i class="fas fa-upload mr-1"></i> Unggah versi baru</button>
                        </form>
                    </div>
                @endcan
            </div>

            <x-riwayat-unduh :log="$riwayatUnduh" />
        </div>

        <div class="col-lg-7">
            <div class="card">
                <div class="card-header"><h3 class="card-title">Dokumen naskah</h3></div>
                <div class="card-body">
                    @php($fileAktif = $surat->file->first())
                    <x-preview-dokumen :file="$fileAktif"
                                       :url-lihat="$fileAktif ? route('dokumen.surat-keluar.lihat', $fileAktif) : null"
                                       :url-unduh="$fileAktif && auth()->user()->can('unduh', $surat) ? route('dokumen.surat-keluar.unduh', $fileAktif) : null" />
                </div>
            </div>

            @if ($bolehLihatRiwayat)
                <div class="card">
                    <div class="card-header"><h3 class="card-title"><i class="fas fa-timeline mr-1"></i> Timeline tracking</h3></div>
                    <div class="card-body"><x-timeline :riwayat="$riwayat" /></div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('js-vendor')
    <script src="{{ asset('vendor/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/i18n/id.js') }}"></script>
@endpush

@push('js')
<script>
$(function () {
    $('#penerima').select2({ theme: 'bootstrap4', language: 'id', width: '100%', closeOnSelect: false, placeholder: $('#penerima').data('placeholder') });
});
</script>
@endpush