@extends('layouts.admin.app', ["title" => "Stok Opname"])

@push('css')
<style>
    .badge-tambah  { background-color: #28a745; color: #fff; }
    .badge-kurang  { background-color: #dc3545; color: #fff; }
    .badge-sama    { background-color: #6c757d; color: #fff; }
    .text-tambah   { color: #28a745; font-weight: bold; }
    .text-kurang   { color: #dc3545; font-weight: bold; }
    .select2-container { width: 100% !important; }

    .select2-container--open .select2-dropdown--above {
        top: 100% !important;
        bottom: auto !important;
        border-radius: 0 0 4px 4px !important;
        border-top: 1px solid #aaa !important;
        position: absolute !important;
        margin-top: 2px !important;
    }

    .select2-container--open.select2-container--above .select2-selection {
        border-radius: 4px 4px 0 0 !important;
    }

    #tableBarang {
        border-collapse: collapse !important;
    }
    #tableBarang thead th {
        background-color: #343a40 !important;
        color: #fff !important;
        border: 1px solid #454d55 !important;
        padding: 12px 8px !important;
        font-size: 14px;
        vertical-align: middle;
        white-space: nowrap;
    }
    #tableBarang tbody td {
        border: 1px solid #dee2e6 !important;
        padding: 10px 8px !important;
        font-size: 14px;
        vertical-align: middle;
    }
    #tableBarang tbody tr:nth-child(odd) {
        background-color: #f8f9fa;
    }
    #tableBarang tbody tr:nth-child(even) {
        background-color: #ffffff;
    }
    #tableBarang tbody tr:hover {
        background-color: #e9ecef;
    }
    
</style>
@endpush

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Stok Opname</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Transaksi</a></div>
                <div class="breadcrumb-item">Stok Opname</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                {{-- Form Input Opname --}}
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">Input Stok Fisik</h4>
                            <div class="card-header-action">
                                <button type="button" class="btn btn-success btn-simpan-opname">
                                    <i class="fas fa-floppy-disk"></i> Simpan Opname
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            {{-- Info Faktur & Catatan --}}
                            <div class="row mb-3">
                                <div class="form-group col-md-4">
                                    <label>No. Faktur Opname</label>
                                    <input type="text" id="faktur" class="form-control" readonly>
                                </div>
                                <div class="form-group col-md-8">
                                    <label>Catatan <small class="text-muted">(opsional)</small></label>
                                    <input type="text" id="catatan" class="form-control"
                                        placeholder="Catatan stok opname">
                                </div>
                            </div>

                            {{-- Pilih Barang --}}
                            <div class="row mb-3">
                                <div class="form-group col-md-6">
                                    <label>Pilih Barang</label>
                                    <select id="pilihBarang" class="form-control select2">
                                        <option value="">-- Pilih Barang --</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-3">
                                    <label>Stok Fisik</label>
                                    <input type="number" id="stokFisikInput" class="form-control"
                                        min="0" placeholder="Qty fisik">
                                </div>
                                <div class="form-group col-md-3">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-primary btn-block btn-tambah-barang">
                                        <i class="fas fa-plus"></i> Tambah
                                    </button>
                                </div>
                            </div>

                            {{-- Tabel Keranjang Opname --}}
                            <div class="table-responsive">
                                <table class="table table-bordered" id="tableBarang" style="width:100%; border-collapse: collapse;">
                                    <thead style="background-color: #343a40;">
                                        <tr>
                                            <th style="width:5%; color:#fff; border:1px solid #454d55;">No</th>
                                            <th style="width:12%; color:#fff; border:1px solid #454d55;">Kode</th>
                                            <th style="width:28%; color:#fff; border:1px solid #454d55;">Nama Barang</th>
                                            <th style="width:15%; color:#fff; border:1px solid #454d55;">Stok Sistem</th>
                                            <th style="width:15%; color:#fff; border:1px solid #454d55;">Stok Fisik</th>
                                            <th style="width:15%; color:#fff; border:1px solid #454d55;">Selisih</th>
                                            <th style="width:10%; color:#fff; border:1px solid #454d55;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('js')
<script>
    let token = `{{ $token }}`;
    function focusPilihBarang() {
        setTimeout(function () {
            var offset = $('#pilihBarang').offset().top;
            var windowHeight = $(window).height();
            $('html, body').scrollTop(offset - (windowHeight / 2));
            
            setTimeout(function() {
                $('#pilihBarang').select2('open');
                var searchField = document.querySelector('.select2-search__field');
                if (searchField) searchField.focus();
            }, 200);
        }, 100);
    }

    $(document).ready(function () {
        generateFaktur();
        setTimeout(function() {
            initSelect2();
        }, 200);
        tableKeranjang();
    });

    function generateFaktur() {
        const random = Math.floor(Math.random() * 100000000)
            .toString().padStart(8, '0');
        $('#faktur').val('OPN' + random);
    }

    function initSelect2() {
        try {
            $('#pilihBarang').select2('destroy');
        } catch(e) {}

        $('#pilihBarang').select2({
            dropdownPosition: 'below',
            ajax: {
                url: '/api/stok_opname/barang-select2',
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                data: function (params) {
                    return { q: params.term, page: params.page || 1 };
                },
                processResults: function (data) {
                    return {
                        results: data.results,
                        pagination: data.pagination
                    };
                },
                cache: true
            },
            placeholder: 'Pilih Barang',
            minimumInputLength: 1,
            allowClear: true,
            
            templateResult: function(item) {
                if (item.loading) return item.text;
                if (!item.id) return 'Pilih Barang';
                
                var kode = item.kode || '';
                var nama = item.nama || '';
                var stok = item.stok || 0;
                
                return $('<div class="select2-result-item">' +
                        '<div class="select2-result-main"><strong>' + kode + '</strong> - ' + nama + '</div>' +
                        '<div class="select2-result-stok">Stok: ' + stok + '</div>' +
                        '</div>');
            },
            templateSelection: function(item) {
                if (!item.id) return 'Pilih Barang';
                
                var kode = item.kode || '';
                var nama = item.nama || '';
                
                return kode + ' - ' + nama;
            }
        });
        focusPilihBarang();
    }
    $('#pilihBarang').on('select2:select', function(e) {
        $('#stokFisikInput').focus();
    });

    $(document).on('click', '.btn-tambah-barang', function () {
        tambahKeKeranjang();
    });

    function tambahKeKeranjang() {
        let barangId = $('#pilihBarang').val();
        let stokFisik = parseInt($('#stokFisikInput').val()) || 0;

        if (!barangId) {
            Swal.fire({ 
                icon: 'warning', 
                title: 'Pilih barang dulu!',
                showConfirmButton: false,
                timer: 1000
            }).then(() => {
                focusPilihBarang();
            });
            return;
        }

        if (stokFisik < 0) {
            Swal.fire({ 
                icon: 'warning', 
                title: 'Qty fisik tidak boleh negatif!',
                showConfirmButton: false,
                timer: 1000
            }).then(() => {
                $('#stokFisikInput').focus();
            });
            return;
        }

        $.ajax({
            url: '/api/stok_opname/keranjang',
            type: 'POST',
            headers: { 'Authorization': 'Bearer ' + token },
            data: {
                barang_id: barangId,
                qty_fisik: stokFisik
            },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Ditambahkan ke keranjang',
                    showConfirmButton: false,
                    timer: 500
                }).then(() => {
                    $('#pilihBarang').val(null).trigger('change');
                    $('#stokFisikInput').val('');
                    $('#tableBarang').DataTable().ajax.reload(null, false);

                    // ✨ STEP 3: Setelah masuk keranjang → fokus kembali ke Pilih Barang
                    focusPilihBarang();
                });
            },
            error: function (xhr) {
                let msg = xhr.responseJSON?.message || xhr.responseJSON?.errors || 'Terjadi kesalahan';
                Swal.fire({ 
                    icon: 'error', 
                    title: 'Gagal', 
                    text: msg,
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    focusPilihBarang();
                });
            }
        });
    }

    function tableKeranjang() {
        $('#tableBarang').DataTable({
            lengthChange: false,
            searching: false,
            info: false,
            autoWidth: false,
            ordering: false,
            paging: false,
            language: {
                emptyTable: "Keranjang masih kosong"
            },
            ajax: {
                url: '/api/stok_opname/keranjang',
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                dataSrc: function (json) {
                    return json.data;
                }
            },
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    data: 'barang.kode',
                    class: 'text-center',
                    render: function (data) {
                        return '<span class="badge bg-primary text-white">' + escapeHtml(data) + '</span>';
                    }
                },
                {
                    data: 'barang.nama',
                    render: function (data) { return escapeHtml(data); }
                },
                {
                    data: 'stok_sistem',
                    class: 'text-center',
                    render: function (data) {
                        return '<span class="badge bg-success text-white">' + data + '</span>';
                    }
                },
                {
                    data: 'qty_fisik',
                    class: 'text-center',
                    render: function (data, type, row) {
                        return '<div class="input-group">' +
                                    '<input type="number" class="form-control text-center qty-edit" ' +
                                           'data-id="' + row.id + '" value="' + data + '" min="0">' +
                               '</div>';
                    }
                },
                {
                    data: 'selisih',
                    class: 'text-center',
                    render: function (data) {
                        let badgeClass = data > 0 ? 'badge-tambah' : data < 0 ? 'badge-kurang' : 'badge-sama';
                        let badgeText = data > 0 ? '+' + data : data;
                        return '<span class="badge ' + badgeClass + '">' + badgeText + '</span>';
                    }
                },
                {
                    data: null,
                    class: 'text-center',
                    render: function (data, type, row) {
                        return '<button type="button" class="btn btn-danger btn-sm btn-hapus" data-id="' + row.id + '">' +
                                   '<i class="fas fa-trash"></i>' +
                               '</button>';
                    }
                }
            ]
        });
    }

    $(document).on('change', '.qty-edit', function () {
        let id = $(this).data('id');
        let qty = parseInt($(this).val()) || 0;

        $.ajax({
            url: '/api/stok_opname/keranjang/qty/' + id,
            type: 'PUT',
            headers: { 'Authorization': 'Bearer ' + token },
            data: { qty_fisik: qty },
            success: function () {
                $('#tableBarang').DataTable().ajax.reload(null, false);
            },
            error: function (xhr) {
                let msg = xhr.responseJSON?.message || 'Terjadi kesalahan';
                Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
            }
        });
    });

    function resetFormInput() {
        $('#pilihBarang').val(null).trigger('change');
        $('#stokFisikInput').val('');
    }

    $(document).on('click', '.btn-hapus', function () {
        let id = $(this).data('id');

        resetFormInput();

        Swal.fire({
            icon: 'question',
            title: 'Hapus dari keranjang?',
            showCancelButton: true,
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/api/stok_opname/keranjang/' + id,
                    type: 'DELETE',
                    headers: { 'Authorization': 'Bearer ' + token },
                    success: function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil dihapus',
                            showConfirmButton: false,
                            timer: 500
                        }).then(() => {
                            $('#tableBarang').DataTable().ajax.reload(null, false);
                            focusPilihBarang();
                        });
                    },
                    error: function (xhr) {
                        let msg = xhr.responseJSON?.message || 'Terjadi kesalahan';
                        Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
                    }
                });
            } else {
                focusPilihBarang();
            }
        });
    });

    $(document).on('click', '.btn-simpan-opname', function () {
        let faktur = $('#faktur').val();
        let catatan = $('#catatan').val();

        let keranjangData = $('#tableBarang').DataTable().rows().data();
        if (keranjangData.length === 0) {
            Swal.fire({ icon: 'error', title: 'Keranjang masih kosong!' });
            return;
        }

        Swal.fire({
            icon: 'question',
            title: 'Konfirmasi Stok Opname',
            text: keranjangData.length + ' barang akan disimpan. Lanjutkan?',
            showCancelButton: true,
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                simpanOpname(faktur, catatan);
            }
        });
    });

    function simpanOpname(faktur, catatan) {
        $.ajax({
            url: '/api/stok_opname',
            type: 'POST',
            headers: { 'Authorization': 'Bearer ' + token },
            data: {
                faktur: faktur,
                catatan: catatan
            },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Stok opname berhasil disimpan!',
                    showConfirmButton: false,
                    timer: 800
                }).then(() => {
                    generateFaktur();
                    $('#catatan').val('');
                    $('#stokFisikInput').val('');
                    $('#pilihBarang').val(null).trigger('change');
                    $('#tableBarang').DataTable().ajax.reload(null, false);
                    focusPilihBarang();
                });
            },
            error: function (xhr) {
                let msg = xhr.responseJSON?.message || xhr.responseJSON?.errors || 'Terjadi kesalahan';
                Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
            }
        });
    }

    function escapeHtml(text) {
        if (!text) return '';
        return text
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
    }
    $('#stokFisikInput').on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $(this).blur();

            setTimeout(function() {
                tambahKeKeranjang();
            }, 50);
            return false;
        }
    });
</script>
@endpush