@extends('layouts.apex')

@section('title', 'Master Lokasi')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Master Lokasi</h1>
            <p class="page-header-subtitle">Kelola data lokasi penyimpanan</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#lokasiModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Tambah Lokasi
        </button>
    </div>
</div>

<div class="page-body">
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Daftar Lokasi</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="lokasiTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nama Lokasi</th>
                            <th>Keterangan</th>
                            <th>Jumlah Barang</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Lokasi Modal -->
<div id="lokasiModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="lokasiForm" action="{{ route('master.lokasi.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" value="POST" id="lokasiMethod">
                <input type="hidden" name="lokasi_id" id="lokasi_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="lokasiModalTitle">Tambah Lokasi Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Nama Lokasi *</label>
                        <input type="text" name="nama" id="lokasiNama" class="form-control" placeholder="Contoh: Gudang A, Gudang B" required maxlength="100">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="3" maxlength="500" placeholder="Keterangan lokasi..."></textarea>
                    </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>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
let lokasiTable;

function editLokasi(id) {
    $.ajax({
        url: '/master/lokasi/' + id,
        method: 'GET',
        success: function(data) {
            $('#lokasiModalTitle').text('Edit Lokasi');
            $('#lokasiMethod').val('PUT');
            $('#lokasi_id').val(id);
            $('#lokasiForm').attr('action', '/master/lokasi/' + id);
            $('#lokasiNama').val(data.nama);
            $('textarea[name="keterangan"]').val(data.keterangan || '');
            const modal = new bootstrap.Modal(document.getElementById('lokasiModal'));
            modal.show();
        },
        error: function() {
            Swal.fire({ icon: 'error', title: 'Gagal', text: 'Gagal mengambil data lokasi!' });
        }
    });
}

function viewLokasi(id) {
    $.ajax({
        url: '/master/lokasi/' + id,
        method: 'GET',
        success: function(data) {
            Swal.fire({
                title: data.nama,
                html: '<div style="text-align: left;"><p><strong>Keterangan:</strong> ' + (data.keterangan || '-') + '</p><p><strong>Jumlah Barang:</strong> ' + data.barang_count + '</p></div>',
                icon: 'info',
                confirmButtonText: 'Tutup',
                confirmButtonColor: '#435ebe'
            });
        },
        error: function() {
            Swal.fire({ icon: 'error', title: 'Gagal', text: 'Gagal mengambil data lokasi!' });
        }
    });
}

function deleteLokasi(id) {
    Swal.fire({
        title: 'Hapus Lokasi?',
        text: 'Apakah Anda yakin ingin menghapus lokasi ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/master/lokasi/' + id,
                method: 'DELETE',
                data: { _token: '{{ csrf_token() }}' },
                success: function(response) {
                    $('#lokasiTable').DataTable().ajax.reload(null, false);
                    Swal.fire({ icon: 'success', title: 'Berhasil', text: 'Lokasi berhasil dihapus!', timer: 2000, showConfirmButton: false });
                },
                error: function(xhr) {
                    Swal.fire({ icon: 'error', title: 'Gagal', text: xhr.responseJSON?.message || 'Gagal menghapus lokasi!' });
                }
            });
        }
    });
}

function resetLokasiForm() {
    $('#lokasiForm')[0].reset();
    $('#lokasiModalTitle').text('Tambah Lokasi Baru');
    $('#lokasiMethod').val('POST');
    $('#lokasi_id').val('');
    $('#lokasiForm').attr('action', '{{ route("master.lokasi.store") }}');
}

$(document).ready(function() {
    lokasiTable = $('#lokasiTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        responsive: true,
        dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex gap-2"B><"d-flex gap-2"lf>>rt<"d-flex justify-content-between align-items-center mt-3"<"info"i><"pagination"p>>',
        buttons: [
            {
                extend: 'copy',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> Copy',
                className: 'btn btn-sm'
            },
            {
                extend: 'csv',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> CSV',
                className: 'btn btn-sm'
            },
            {
                extend: 'excel',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> Excel',
                className: 'btn btn-sm'
            },
            {
                extend: 'pdf',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg> PDF',
                className: 'btn btn-sm'
            },
            {
                extend: 'print',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print',
                className: 'btn btn-sm'
            }
        ],
        ajax: {
            url: '{{ route("master.lokasi.data") }}',
            type: 'GET',
            data: function(d) { d._token = '{{ csrf_token() }}'; }
        },
        columns: [
            { data: 'nama', name: 'nama' },
            { data: 'keterangan', name: 'keterangan' },
            { data: 'barang_count', name: 'id' },
            { data: 'action', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json' }
    });

    $('#lokasiForm').on('submit', function(e) {
        e.preventDefault();
        const method = $('#lokasiMethod').val();
        const url = $(this).attr('action');

        $.ajax({
            url: url,
            method: method === 'PUT' ? 'PUT' : 'POST',
            data: $(this).serialize(),
            success: function(response) {
                const modalEl = document.getElementById('lokasiModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) modal.hide();
                $('#lokasiTable').DataTable().ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: method === 'PUT' ? 'Lokasi berhasil diperbarui!' : 'Lokasi berhasil ditambahkan!', timer: 2000, showConfirmButton: false });
                resetLokasiForm();
            },
            error: function(xhr) {
                const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan!';
                Swal.fire({ icon: 'error', title: 'Gagal', text: errorMsg });
            }
        });
    });

    $('#lokasiModal').on('hidden.bs.modal', function() { resetLokasiForm(); });
});
</script>
@endpush
@endsection