@extends('layouts.admin')

@section('title', 'Data Alat')

@section('content')

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-3">
    <h1 class="text-2xl font-bold text-gray-800">Data Alat</h1>
    <button onclick="openModal()"
        class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition w-full sm:w-auto">
        + Tambah Alat
    </button>
</div>

<!-- TABLE -->
<div class="overflow-x-auto">
    <table class="w-full bg-white shadow rounded-lg">
        <thead class="bg-gray-100 text-gray-700">
            <tr>
                <th class="p-3 text-left">Gambar</th>
                <th class="p-3 text-left">Nama</th>
                <th class="p-3 text-left">Stok</th>
                <th class="p-3 text-left">Harga</th>
                <th class="p-3 text-left">Aksi</th>
            </tr>
        </thead>
        <tbody id="tableBody">
            @foreach($alat as $a)
            <tr id="row-{{ $a->id }}" class="border-b hover:bg-gray-50">
                <td class="p-3">
                    @if($a->gambar)
                        <img src="{{ asset('storage/'.$a->gambar) }}"
                             class="w-14 h-14 object-cover rounded">
                    @else
                        <span class="text-gray-400">-</span>
                    @endif
                </td>
                <td class="p-3">{{ $a->nama }}</td>
                <td class="p-3">{{ $a->stok }}</td>
                <td class="p-3">Rp {{ number_format($a->harga,0,',','.') }}</td>
                <td class="p-3">
                    <!-- TOMBOL EDIT -->
                    <button onclick="editAlat('{{ $a->id }}')" 
                        class="text-blue-600 hover:underline mr-2">Edit</button>
                    <button onclick="hapus('{{ $a->id }}')" 
                        class="text-red-600 hover:underline">Hapus</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- MODAL TAMBAH -->
<div id="modal" class="fixed inset-0 bg-black/50 hidden flex items-center justify-center z-50 p-4">
    <div id="modalBox"
        class="bg-white w-full max-w-md p-6 rounded-lg shadow-lg transform scale-95 opacity-0 transition-all duration-300">

        <h2 class="text-xl font-bold mb-4">Tambah Alat</h2>

        <form id="alatForm" enctype="multipart/form-data" class="space-y-3">
            @csrf

            <input type="text" name="nama" placeholder="Nama"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300" required>

            <input type="number" name="stok" placeholder="Stok"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300" required>

            <input type="number" name="harga" placeholder="Harga"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300" required>

            <input type="file" name="gambar"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300">

            <button class="bg-green-600 text-white px-4 py-2 rounded-lg w-full hover:bg-green-700 transition">
                Simpan
            </button>
        </form>

        <button onclick="closeModal()" class="mt-4 text-gray-500 text-sm hover:underline w-full sm:w-auto">
            Batal
        </button>
    </div>
</div>

<!-- ====== MODAL EDIT ====== -->
<div id="modalEdit" class="fixed inset-0 bg-black/50 hidden flex items-center justify-center z-50 p-4">
    <div id="modalEditBox"
        class="bg-white w-full max-w-md p-6 rounded-lg shadow-lg transform scale-95 opacity-0 transition-all duration-300">

        <h2 class="text-xl font-bold mb-4">Edit Alat</h2>

        <form id="alatEditForm" enctype="multipart/form-data" class="space-y-3">
            @csrf
            <input type="hidden" name="_method" value="PUT">
            
            <input type="hidden" id="edit_id" name="id">

            <input type="text" id="edit_nama" name="nama" placeholder="Nama"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300" required>

            <input type="number" id="edit_stok" name="stok" placeholder="Stok"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300" required>

            <input type="number" id="edit_harga" name="harga" placeholder="Harga"
                class="w-full border p-2 rounded focus:ring focus:ring-blue-300" required>

            <div>
                <label class="block text-sm text-gray-600 mb-1">Gambar Saat Ini</label>
                <img id="edit_gambar_preview" src="" class="w-20 h-20 object-cover rounded mb-2" style="display:none;">
                <input type="file" id="edit_gambar" name="gambar"
                    class="w-full border p-2 rounded focus:ring focus:ring-blue-300">
                <p class="text-xs text-gray-500 mt-1">Kosongkan jika tidak ingin mengubah gambar</p>
            </div>

            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg w-full hover:bg-blue-700 transition">
                Update
            </button>
        </form>

        <button onclick="closeModalEdit()" class="mt-4 text-gray-500 text-sm hover:underline w-full sm:w-auto">
            Batal
        </button>
    </div>
</div>

<!-- TOAST SUCCESS -->
<div id="toast"
     class="fixed top-5 right-5 bg-green-600 text-white px-4 py-2 rounded-lg shadow hidden">
    ✔ Berhasil disimpan
</div>

<!-- TOAST ERROR -->
<div id="toastError"
     class="fixed top-5 right-5 bg-red-600 text-white px-4 py-2 rounded-lg shadow hidden">
    ✖ Terjadi kesalahan
</div>

<script>
const modal = document.getElementById('modal');
const modalBox = document.getElementById('modalBox');
const modalEdit = document.getElementById('modalEdit');
const modalEditBox = document.getElementById('modalEditBox');
const alatForm = document.getElementById('alatForm');
const alatEditForm = document.getElementById('alatEditForm');
const toast = document.getElementById('toast');
const toastError = document.getElementById('toastError');
const tableBody = document.getElementById('tableBody');

// ================ MODAL TAMBAH ================
function openModal() {
    modal.classList.remove('hidden');
    setTimeout(() => modalBox.classList.remove('scale-95','opacity-0'), 50);
}

function closeModal() {
    modalBox.classList.add('scale-95','opacity-0');
    setTimeout(() => modal.classList.add('hidden'), 200);
}

// ================ MODAL EDIT ================
function openModalEdit() {
    modalEdit.classList.remove('hidden');
    setTimeout(() => modalEditBox.classList.remove('scale-95','opacity-0'), 50);
}

function closeModalEdit() {
    modalEditBox.classList.add('scale-95','opacity-0');
    setTimeout(() => modalEdit.classList.add('hidden'), 200);
}

// ================ FUNGSI EDIT ================
function editAlat(id) {
    // Ambil data dari server
    const url = `{{ url('/rahasia-saja/alat') }}/${id}/edit`;
    
    fetch(url, {
        method: "GET",
        headers: { 
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        // Isi form dengan data
        document.getElementById('edit_id').value = data.id;
        document.getElementById('edit_nama').value = data.nama;
        document.getElementById('edit_stok').value = data.stok;
        document.getElementById('edit_harga').value = data.harga;
        
        // Tampilkan preview gambar
        const preview = document.getElementById('edit_gambar_preview');
        if (data.gambar) {
            preview.src = `/storage/${data.gambar}`;
            preview.style.display = 'block';
        } else {
            preview.style.display = 'none';
        }
        
        openModalEdit();
    })
    .catch(error => {
        console.error('Error:', error);
        showToastError('Gagal mengambil data: ' + error.message);
    });
}

// ================ SUBMIT TAMBAH ================
alatForm.addEventListener('submit', function(e){
    e.preventDefault();
    let formData = new FormData(this);

    fetch("{{ route('admin.alat.store') }}", {
        method: "POST",
        headers: { 
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showToast('Berhasil ditambahkan!');
            closeModal();

            let gambar = data.gambar
                ? `<img src="/storage/${data.gambar}" class="w-14 h-14 object-cover rounded">`
                : '<span class="text-gray-400">-</span>';

            let row = `
            <tr id="row-${data.id}" class="border-b hover:bg-gray-50">
                <td class="p-3">${gambar}</td>
                <td class="p-3">${data.nama}</td>
                <td class="p-3">${data.stok}</td>
                <td class="p-3">Rp ${new Intl.NumberFormat('id-ID').format(data.harga)}</td>
                <td class="p-3">
                    <button onclick="editAlat('${data.id}')" class="text-blue-600 hover:underline mr-2">Edit</button>
                    <button onclick="hapus('${data.id}')" class="text-red-600 hover:underline">Hapus</button>
                </td>
            </tr>`;
            tableBody.insertAdjacentHTML('beforeend', row);
            alatForm.reset();
        } else {
            showToastError(data.message || 'Gagal menyimpan data');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToastError('Terjadi kesalahan: ' + error.message);
    });
});

// ================ SUBMIT EDIT ================
alatEditForm.addEventListener('submit', function(e){
    e.preventDefault();
    let id = document.getElementById('edit_id').value;
    let formData = new FormData(this);
    
    // Tambahkan _method PUT karena form menggunakan POST
    formData.append('_method', 'PUT');

    const url = `{{ url('/rahasia-saja/alat') }}/${id}`;

    fetch(url, {
        method: "POST",
        headers: { 
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            showToast('Data berhasil diupdate!');
            closeModalEdit();
            
            // Refresh halaman setelah update
            setTimeout(() => location.reload(), 1500);
        } else {
            showToastError(data.message || 'Gagal mengupdate data');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToastError('Terjadi kesalahan: ' + error.message);
    });
});

// ================ HAPUS ================
function hapus(id) {
    if(confirm('Yakin hapus data ini?')) {
        const url = `{{ url('/rahasia-saja/alat') }}/${id}`;
        
        fetch(url, {
            method: 'DELETE',
            headers: { 
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                document.getElementById('row-'+id).remove();
                showToast('Data berhasil dihapus!');
            } else {
                showToastError('Gagal menghapus data');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToastError('Terjadi kesalahan: ' + error.message);
        });
    }
}

// ================ TOAST ================
function showToast(message = 'Berhasil disimpan') {
    toast.textContent = '✔ ' + message;
    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 3000);
}

function showToastError(message = 'Terjadi kesalahan') {
    toastError.textContent = '✖ ' + message;
    toastError.classList.remove('hidden');
    setTimeout(() => toastError.classList.add('hidden'), 3000);
}

// ================ CLOSE MODAL KLIK LUAR ================
modal.addEventListener('click', function(e) {
    if (e.target === this) closeModal();
});

modalEdit.addEventListener('click', function(e) {
    if (e.target === this) closeModalEdit();
});

// ================ RESET FORM SAAT MODAL DITUTUP ================
document.addEventListener('DOMContentLoaded', function() {
    // Reset form tambah saat modal ditutup
    modal.addEventListener('hidden', function() {
        alatForm.reset();
    });
});
</script>

@endsection