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

            <div class="page-heading">
                <div>
                    <h1 class="page-title">Tambah Permintaan</h1>
                    <p class="page-subtitle">Isi formulir untuk mengajukan permintaan alat medis</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.store') }}" method="POST">
                @csrf

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

                    {{-- Left: Form utama --}}
                    <div style="display:flex; flex-direction:column; gap:20px">
                        @if ($errors->any())
                            <div class="alert alert-danger" role="alert">
                                <i class="fa-solid fa-circle-exclamation me-2"></i>
                                <ul style="margin:6px 0 0 20px;">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger">
                                <i class="fa-solid fa-circle-xmark me-2"></i>
                                {{ session('error') }}
                            </div>
                        @endif
                        {{-- Catatan --}}
                        <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">
                                <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 mengenai permintaan ini...">{{ old('catatan_perawat') }}</textarea>
                            </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-add" 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-alat">
                                        <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-alat">
                                            <tr>
                                                <td class="td-muted row-number">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 }}">{{ $alat->nama_alat }} —
                                                                Stok: {{ $alat->stok }} {{ $alat->satuan }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="number" name="jumlah[]" class="app-input" min="1"
                                                        placeholder="0" required style="height:36px">
                                                </td>
                                                <td>
                                                    <button type="button" class="action-btn action-btn-delete btn-remove"
                                                        title="Hapus">
                                                        <i class="fa-solid fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- Action --}}
                        <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-paper-plane me-2"></i> Ajukan Permintaan
                            </button>
                        </div>
                    </div>

                    {{-- Right: Panduan --}}
                    <div style="display:flex; flex-direction:column; gap:16px">
                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-circle-info me-2"></i>Panduan
                                </span>
                            </div>
                            <div class="app-card-body">
                                <div class="guide-list">
                                    <div class="guide-item">
                                        <div class="guide-step">1</div>
                                        <div class="guide-text">
                                            <strong>Isi Catatan</strong>
                                            <span>Tambahkan keterangan jika diperlukan</span>
                                        </div>
                                    </div>
                                    <div class="guide-item">
                                        <div class="guide-step">2</div>
                                        <div class="guide-text">
                                            <strong>Pilih Alat Medis</strong>
                                            <span>Pilih alat dan masukkan jumlah yang dibutuhkan</span>
                                        </div>
                                    </div>
                                    <div class="guide-item">
                                        <div class="guide-step">3</div>
                                        <div class="guide-text">
                                            <strong>Ajukan Permintaan</strong>
                                            <span>Permintaan akan diteruskan ke Kepala Ruangan</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="app-card">
                            <div class="app-card-header">
                                <span class="app-card-title">
                                    <i class="fa-solid fa-diagram-project me-2"></i>Alur Persetujuan
                                </span>
                            </div>
                            <div class="app-card-body">
                                <div class="approval-timeline">
                                    <div class="at-step at-active">
                                        <div class="at-dot"><i class="fa-solid fa-user-nurse"></i></div>
                                        <div class="at-info">
                                            <strong>Perawat</strong>
                                            <span>Mengajukan permintaan</span>
                                        </div>
                                    </div>
                                    <div class="at-connector"></div>
                                    <div class="at-step">
                                        <div class="at-dot"><i class="fa-solid fa-user-check"></i></div>
                                        <div class="at-info">
                                            <strong>Kepala Ruangan</strong>
                                            <span>Menyetujui / Menolak</span>
                                        </div>
                                    </div>
                                    <div class="at-connector"></div>
                                    <div class="at-step">
                                        <div class="at-dot"><i class="fa-solid fa-box"></i></div>
                                        <div class="at-info">
                                            <strong>Logistik</strong>
                                            <span>Memproses & menyiapkan alat</span>
                                        </div>
                                    </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-alat 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-add').addEventListener('click', function() {
            const count = document.querySelectorAll('#tbody-alat tr').length + 1;

            document.getElementById('tbody-alat').insertAdjacentHTML('beforeend', `
        <tr>
            <td class="td-muted row-number">${count}</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" placeholder="0" required style="height:36px">
            </td>
            <td>
                <button type="button" class="action-btn action-btn-delete btn-remove" 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-remove')) {
                if (document.querySelectorAll('#tbody-alat 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
        refreshSelectOptions();
    </script>
@endpush