@extends('layouts.app')

@section('content')
<style>
    /* Menjamin modal selalu berada di lapisan terdepan */
    .modal-backdrop {
        z-index: 1040 !important;
    }
    .modal {
        z-index: 1050 !important;
    }
</style>

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

    <div class="card shadow-sm mb-4">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
            <h5 class="mb-0 fw-bold">Dataset Penjualan Obat</h5>
            <button type="button" class="btn btn-primary btn-sm" id="btnBukaTambah">
                + Tambah Data
            </button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="text-center" style="width: 60px;">No</th>
                            <th>Tanggal</th>
                            <th>Nama Obat</th>
                            <th>Jumlah Terjual</th>
                            <th class="text-center" style="width: 150px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($dataHistoris as $index => $item)
                        <tr>
                            <td class="text-center">{{ $index + 1 }}</td>
                            <td>{{ $item->tanggal }}</td>
                            <td><span class="fw-semibold">{{ $item->nama_obat }}</span></td>
                            <td>{{ $item->jumlah_terjual }}</td>
                            <td class="text-center">
                                <button type="button" 
                                        class="btn btn-warning btn-sm text-white btn-edit"
                                        data-id="{{ $item->id }}"
                                        data-tanggal="{{ $item->tanggal }}"
                                        data-obat="{{ $item->nama_obat }}"
                                        data-jumlah="{{ $item->jumlah_terjual }}">
                                    Edit
                                </button>
                                
                                <form action="{{ url('/manajemen-data/delete/' . $item->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus data ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">Belum ada data historis.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- MODAL TAMBAH DATA --}}
<div class="modal fade" id="modalTambah" tabindex="-1" aria-labelledby="modalTambahLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ url('/manajemen-data/store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTambahLabel">Tambah Data Obat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Tanggal</label>
                        <input type="date" name="tanggal" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Obat</label>
                        <input type="text" name="nama_obat" class="form-control" placeholder="Contoh: Paracetamol" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jumlah Terjual</label>
                        <input type="number" name="jumlah_terjual" class="form-control" min="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- MODAL EDIT DATA --}}
<div class="modal fade" id="modalEdit" tabindex="-1" aria-labelledby="modalEditLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="formEdit" method="POST" action="">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditLabel">Edit Data Obat</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Tanggal</label>
                        <input type="date" name="tanggal" id="edit_tanggal" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Obat</label>
                        <input type="text" name="nama_obat" id="edit_obat" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Jumlah Terjual</label>
                        <input type="number" name="jumlah_terjual" id="edit_jumlah" class="form-control" min="0" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- JAVASCRIPT: DOM MOUNTING KE BODY & EVENT HANDLING --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const elModalTambah = document.getElementById('modalTambah');
    const elModalEdit = document.getElementById('modalEdit');

    // Pindahkan DOM modal langsung ke tag <body> terluar
    if (elModalTambah) document.body.appendChild(elModalTambah);
    if (elModalEdit) document.body.appendChild(elModalEdit);

    // Inisialisasi instance Bootstrap Modal
    const bsModalTambah = new bootstrap.Modal(elModalTambah);
    const bsModalEdit = new bootstrap.Modal(elModalEdit);

    // Trigger Buka Tambah
    const btnTambah = document.getElementById('btnBukaTambah');
    if (btnTambah) {
        btnTambah.addEventListener('click', function () {
            bsModalTambah.show();
        });
    }

    // Trigger Buka Edit (Delegated Event)
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-edit');
        if (btn) {
            e.preventDefault();

            const id = btn.getAttribute('data-id');
            const tanggal = btn.getAttribute('data-tanggal');
            const obat = btn.getAttribute('data-obat');
            const jumlah = btn.getAttribute('data-jumlah');

            document.getElementById('edit_tanggal').value = tanggal;
            document.getElementById('edit_obat').value = obat;
            document.getElementById('edit_jumlah').value = jumlah;
            document.getElementById('formEdit').action = `/manajemen-data/update/${id}`;

            bsModalEdit.show();
        }
    });
});
</script>
@endsection