@extends('layouts.master')

@section('title', 'Snapshot Stok')

@section('styles')
<style>
    #tblSnapshot th, #tblSnapshot td { vertical-align: middle; font-size: .82rem; border-color: #e9ecef !important; white-space: nowrap; }
    #tblSnapshot thead th { background: #f8f9fa; }
    #tblSnapshot_wrapper .dataTables_filter input { border-color: #c8c8c8 !important; border-radius: 6px; padding: 4px 10px; }
    #tblSnapshot_wrapper .dataTables_filter input:focus { border-color: #a15adf !important; box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important; }
    #tblSnapshot_wrapper .dataTables_length select { border-color: #c8c8c8 !important; border-radius: 6px; }
    #tblSnapshot_wrapper .dataTables_filter label,
    #tblSnapshot_wrapper .dataTables_length label { font-size: .875rem; color: #6c757d; }
    #tblSnapshot_wrapper .dataTables_info { font-size: .8rem; color: #6c757d; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0"><i class="bx bx-camera me-2"></i>Snapshot Stok</p>
            <span class="fs-13 text-muted">Gudang &rarr; Snapshot Stok</span>
        </div>
        <div class="d-flex gap-2 mt-2 mt-md-0">
            @can('snapshot_stok.generate')
            <button class="btn btn-primary btn-sm px-3" onclick="openGenerate()">
                <i class="bx bx-refresh me-1"></i> Generate Snapshot
            </button>
            @endcan
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title mb-0">Daftar Snapshot Stok</div>
                </div>

                <div class="card-body border-bottom pb-3 pt-3">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label mb-1 small fw-semibold">Gudang</label>
                            <select id="filterGudang" class="form-select form-select-sm">
                                <option value="">Semua Gudang</option>
                                @foreach($gudangs as $g)
                                <option value="{{ $g->id }}">{{ $g->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mb-1 small fw-semibold">Bulan</label>
                            <select id="filterBulan" class="form-select form-select-sm">
                                <option value="">Semua Bulan</option>
                                @foreach($bulans as $b)
                                <option value="{{ $b }}">{{ \Carbon\Carbon::createFromFormat('Y-m', $b)->translatedFormat('F Y') }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1">
                            <button class="btn btn-secondary btn-sm px-2 py-1 w-100" onclick="tbl.ajax.reload()">
                                <i class="bx bx-search"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive mt-2">
                        <table id="tblSnapshot" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-center" style="width:80px">Aksi</th>
                                    <th>Gudang</th>
                                    <th>Periode</th>
                                    <th class="text-center">Jumlah Item</th>
                                    <th class="text-center">Qty Baik</th>
                                    <th class="text-center">Qty Rusak</th>
                                    <th>Digenerate</th>
                                    <th>Oleh</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Generate --}}
<div class="modal fade" id="modalGenerate" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white py-2">
                <h6 class="modal-title text-white"><i class="bx bx-refresh me-2"></i>Generate Snapshot Stok</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Bulan <span class="text-danger">*</span></label>
                    <input type="month" id="inputBulanGenerate" class="form-control" value="{{ now()->format('Y-m') }}">
                    <div class="form-text">Snapshot akan digenerate untuk semua gudang aktif pada bulan ini. Jika sudah ada, akan ditimpa.</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button class="btn btn-primary btn-sm" id="btnGenerate">
                    <i class="bx bx-refresh me-1"></i> Generate
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL = "{{ url('/') }}";
const CSRF     = "{{ csrf_token() }}";

const tbl = $('#tblSnapshot').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        url: `${BASE_URL}/gudang/snapshot-stok/data`,
        data: d => {
            d.gudang_id = $('#filterGudang').val();
            d.bulan     = $('#filterBulan').val();
        },
    },
    columns: [
        { data: 'aksi', name: 'id', orderable: false, searchable: false, className: 'text-center',
          render: (id, t, r) => `
            <a href="${BASE_URL}/gudang/snapshot-stok/${id}/download" class="btn btn-success btn-sm px-2 py-1" title="Unduh PDF">
                <i class="bx bx-download fs-14"></i>
            </a>` },
        { data: 'gudang_nama', name: 'gudang_nama' },
        { data: 'bulan_fmt', name: 'bulan' },
        { data: 'jumlah_item', name: 'jumlah_item', className: 'text-center' },
        { data: 'total_qty_baik', name: 'total_qty_baik', className: 'text-center' },
        { data: 'total_qty_rusak', name: 'total_qty_rusak', className: 'text-center',
          render: v => v > 0 ? `<span class="text-danger fw-semibold">${v}</span>` : v },
        { data: 'generated_fmt', name: 'generated_at' },
        { data: 'generated_by_nama', name: 'generated_by', orderable: false },
    ],
    order: [[2, 'desc'], [1, 'asc']],
    language: { url: `${BASE_URL}/assets/json/datatable-id.json` },
});

$('#filterGudang,#filterBulan').on('change', () => tbl.ajax.reload());

function openGenerate() {
    new bootstrap.Modal(document.getElementById('modalGenerate')).show();
}

$('#btnGenerate').on('click', function () {
    const bulan = $('#inputBulanGenerate').val();
    if (!bulan) { Swal.fire('Peringatan', 'Pilih bulan terlebih dahulu.', 'warning'); return; }

    $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Memproses...');

    $.ajax({
        url: `${BASE_URL}/gudang/snapshot-stok/generate`,
        method: 'POST',
        data: { _token: CSRF, bulan },
        success: r => {
            if (r.success) {
                bootstrap.Modal.getInstance(document.getElementById('modalGenerate')).hide();
                Swal.fire({ icon: 'success', title: 'Berhasil', text: r.message, timer: 2500, showConfirmButton: false })
                    .then(() => { tbl.ajax.reload(); $('#filterBulan').val(''); });
            }
        },
        error: xhr => {
            Swal.fire('Gagal', xhr.responseJSON?.message ?? 'Terjadi kesalahan.', 'error');
        },
        complete: () => {
            $('#btnGenerate').prop('disabled', false).html('<i class="bx bx-refresh me-1"></i> Generate');
        },
    });
});
</script>
@endsection