@extends('app')
@section('content')
    <div class="app-content">
        <div class="content-wrapper">

            <div class="page-heading">
                <div>
                    <h1 class="page-title">Edit Permintaan</h1>
                    <p class="page-subtitle">Perbarui data permintaan <strong>{{ $permintaan->kode_permintaan }}</strong></p>
                </div>
                <a href="{{ route('perawat.permintaan.index') }}" class="btn-app-ghost">
                    <i class="fa-solid fa-arrow-left me-2"></i> Kembali
                </a>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <div>
                        <i class="fa-solid fa-triangle-exclamation me-2"></i>
                        <strong>Terdapat kesalahan input:</strong>
                        <ul style="margin:6px 0 0 20px; padding:0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <form action="{{ route('perawat.permintaan.update', $permintaan->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div style="display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start">

                    {{-- Left --}}
                    <div style="display:flex; flex-direction:column; gap:20px">

                        {{-- Info --}}
                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-file-lines me-2"></i>Informasi Permintaan
                                </span>
                            </div>
                            <div class="app-card-body">
                                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px">
                                    <div>
                                        <label class="app-label">Kode Permintaan</label>
                                        <input type="text" class="app-input" value="{{ $permintaan->kode_permintaan }}"
                                            readonly
                                            style="background:var(--surface-subtle); color:var(--text-faint); cursor:not-allowed">
                                    </div>
                                    <div>
                                        <label class="app-label">Tanggal Permintaan</label>
                                        <input type="text" class="app-input"
                                            value="{{ \Carbon\Carbon::parse($permintaan->tanggal_permintaan)->format('d M Y') }}"
                                            readonly
                                            style="background:var(--surface-subtle); color:var(--text-faint); cursor:not-allowed">
                                    </div>
                                </div>
                                <div>
                                    <label class="app-label">Catatan Perawat <span
                                            style="color:var(--text-faint); font-weight:400">(opsional)</span></label>
                                    <textarea name="catatan_perawat" class="app-textarea" rows="3" placeholder="Tuliskan keterangan tambahan...">{{ old('catatan_perawat', $permintaan->catatan_perawat) }}</textarea>
                                </div>
                            </div>
                        </div>

                        {{-- Detail Alat --}}
                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-screwdriver-wrench me-2"></i>Detail Alat Medis
                                </span>
                                <button type="button" id="btn-tambah" class="btn-app-primary"
                                    style="padding:7px 14px; font-size:13px">
                                    <i class="fa-solid fa-plus me-1"></i> Tambah Baris
                                </button>
                            </div>
                            <div class="app-card-body p-0">
                                <div style="overflow-x:auto">
                                    <table class="app-table" id="table-detail">
                                        <thead>
                                            <tr>
                                                <th style="width:40px">No</th>
                                                <th>Alat Medis</th>
                                                <th style="width:140px">Jumlah</th>
                                                <th style="width:60px">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbody-detail">
                                            @foreach ($permintaan->details as $i => $detail)
                                                <tr>
                                                    <td class="td-muted row-number">{{ $i + 1 }}</td>
                                                    <td>
                                                        <select name="id_alat_medis[]" class="app-select" required
                                                            style="height:36px">
                                                            <option value="">— Pilih Alat Medis —</option>
                                                            @foreach ($alatMedis as $alat)
                                                                <option value="{{ $alat->id }}"
                                                                    {{ $detail->id_alat_medis == $alat->id ? 'selected' : '' }}>
                                                                    {{ $alat->nama_alat }} — Stok: {{ $alat->stok }}
                                                                    {{ $alat->satuan }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="number" name="jumlah[]" class="app-input"
                                                            value="{{ $detail->jumlah }}" min="1" required
                                                            style="height:36px">
                                                    </td>
                                                    <td>
                                                        <button type="button"
                                                            class="action-btn action-btn-delete btn-hapus" title="Hapus">
                                                            <i class="fa-solid fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div style="display:flex; gap:10px; justify-content:flex-end">
                            <a href="{{ route('perawat.permintaan.index') }}" class="btn-app-ghost">Batal</a>
                            <button type="submit" class="btn-app-primary">
                                <i class="fa-solid fa-floppy-disk me-2"></i> Simpan Perubahan
                            </button>
                        </div>
                    </div>

                    {{-- Right --}}
                    <div>
                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-circle-exclamation me-2"></i>Perhatian
                                </span>
                            </div>
                            <div class="app-card-body">
                                <div class="alert alert-warning" style="margin-bottom:0">
                                    <div>
                                        <i class="fa-solid fa-triangle-exclamation me-2"></i>
                                        Permintaan hanya dapat diedit selama berstatus <strong>Diajukan</strong>. Setelah
                                        diproses oleh Kepala Ruangan, data tidak dapat diubah.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </form>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const alatOptions =
            `@foreach ($alatMedis as $alat)<option value="{{ $alat->id }}">{{ $alat->nama_alat }} — Stok: {{ $alat->stok }} {{ $alat->satuan }}</option>@endforeach`;

        function updateNumbers() {
            document.querySelectorAll('#tbody-detail tr').forEach((tr, i) => {
                tr.querySelector('.row-number').textContent = i + 1;
            });
        }

        function refreshSelectOptions() {
            let selectedValues = [];

            document.querySelectorAll('select[name="id_alat_medis[]"]').forEach(select => {
                if (select.value) selectedValues.push(select.value);
            });

            document.querySelectorAll('select[name="id_alat_medis[]"]').forEach(select => {
                let currentValue = select.value;

                select.querySelectorAll('option').forEach(option => {
                    if (!option.value) return;

                    if (selectedValues.includes(option.value) && option.value !== currentValue) {
                        option.disabled = true;
                    } else {
                        option.disabled = false;
                    }
                });
            });
        }

        // tambah baris
        document.getElementById('btn-tambah').addEventListener('click', function() {
            document.getElementById('tbody-detail').insertAdjacentHTML('beforeend', `
        <tr>
            <td class="td-muted row-number"></td>
            <td>
                <select name="id_alat_medis[]" class="app-select" required style="height:36px">
                    <option value="">— Pilih Alat Medis —</option>
                    ${alatOptions}
                </select>
            </td>
            <td>
                <input type="number" name="jumlah[]" class="app-input" min="1" required style="height:36px">
            </td>
            <td>
                <button type="button" class="action-btn action-btn-delete btn-hapus" title="Hapus">
                    <i class="fa-solid fa-trash"></i>
                </button>
            </td>
        </tr>`);

            updateNumbers();
            refreshSelectOptions();
        });

        // hapus baris
        document.addEventListener('click', function(e) {
            if (e.target.closest('.btn-hapus')) {
                if (document.querySelectorAll('#tbody-detail tr').length > 1) {
                    e.target.closest('tr').remove();
                    updateNumbers();
                    refreshSelectOptions();
                }
            }
        });

        // perubahan select
        document.addEventListener('change', function(e) {
            if (e.target.matches('select[name="id_alat_medis[]"]')) {
                refreshSelectOptions();
            }
        });

        // init awal (penting untuk edit)
        refreshSelectOptions();
    </script>
@endpush