@extends('layouts.app')

@section('content')
<div class="container-fluid p-4">
    <div class="card p-4">
        <h4>Detail Resep: {{ $produk->nama_produk }}</h4>
        <hr>
        <table class="table">
            <thead>
                <tr>
                    <th>Nama Bahan</th>
                    <th>Jumlah</th>
                    <th>Satuan</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($produk->resep as $bahan)
                <tr>
                    <td>{{ $bahan->nama_bahan }}</td>
                    <td>{{ $bahan->jumlah }}</td>
                    <td>{{ $bahan->satuan }}</td>
                    <td>
                        <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal{{$bahan->id}}">
                            <i class="fa fa-pencil"></i> Edit
                        </button>

                        <button type="button" class="btn btn-sm btn-danger" onclick="konfirmasiHapus('{{ $bahan->id }}')">
                            <i class="fa fa-trash"></i> Hapus
                        </button>

                        <form id="form-hapus-{{ $bahan->id }}" action="{{ route('admin.resep.destroy', $bahan->id) }}" method="POST" style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>
                    </td>
                </tr>

                <div class="modal fade" id="editModal{{$bahan->id}}" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <form action="{{ route('admin.resep.update', $bahan->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="modal-header">
                                    <h5 class="modal-title">Edit Bahan: {{ $bahan->nama_bahan }}</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>Nama Bahan</label>
                                        <select name="nama_bahan" class="form-select select-bahan-edit" required>
                                            <option value="">-- Pilih Bahan dari Stok --</option>
                                            @foreach($bahans as $b)
                                                <option value="{{ $b->nama_bahan }}" data-satuan="{{ $b->satuan }}" {{ $bahan->nama_bahan == $b->nama_bahan ? 'selected' : '' }}>{{ $b->nama_bahan }} (Stok: {{ $b->stok }} {{ $b->satuan }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label>Jumlah</label>
                                        <input type="number" name="jumlah" class="form-control" value="{{ $bahan->jumlah }}" step="0.01" required>
                                    </div>
                                    <div class="mb-3">
                                        <label>Satuan</label>
                                        <input type="text" name="satuan" class="form-control satuan-edit" value="{{ $bahan->satuan }}" 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>
                            </form>
                        </div>
                    </div>
                </div>
                @endforeach
            </tbody>
        </table>
        <a href="{{ route('admin.resep') }}" class="btn btn-secondary">Kembali</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function konfirmasiHapus(id) {
    Swal.fire({
        title: 'Yakin ingin hapus?',
        text: "Data yang dihapus tidak bisa dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Hapus!'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('form-hapus-' + id).submit();
        }
    })
}

// Otomatis isi satuan saat bahan dipilih di modal edit
document.querySelectorAll('.select-bahan-edit').forEach(function(select) {
    select.addEventListener('change', function() {
        const selected = this.options[this.selectedIndex];
        const satuanInput = this.closest('.modal-body').querySelector('.satuan-edit');
        if (satuanInput) {
            const stockUnit = (selected.getAttribute('data-satuan') || '').toLowerCase().trim();
            if (stockUnit === 'kg') {
                satuanInput.value = 'gr';
            } else if (stockUnit === 'liter' || stockUnit === 'l') {
                satuanInput.value = 'ml';
            } else {
                satuanInput.value = stockUnit;
            }
        }
    });
});
</script>
@endsection