@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <div class="btn-group mr-2">
                            <select id="storeFilter" class="form-control form-control-sm">
                                <option value="">Semua Store</option>
                                @foreach($variables['stores'] as $store)
                                <option value="{{ $store->id }}">{{ $store->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="btn-group mr-2">
                            <select id="docTypeFilter" class="form-control form-control-sm">
                                <option value="">Semua Tipe Dokumen</option>
                                @foreach($variables['document_types'] as $key => $label)
                                <option value="{{ $key }}">{{ $key }}</option>
                                @endforeach
                            </select>
                        </div>
                        <a href="{{ route('numbering_formats.create') }}" class="btn btn-sm btn-warning">
                            <i class="fas fa-plus"></i> Tambah Format
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="formatsTable" class="table table-hover table-sm">
                                <thead class="bg-warning">
                                    <tr>
                                        <th width="50">No</th>
                                        <th>Store</th>
                                        <th>Tipe Dokumen</th>
                                        <th>Pola Format</th>
                                        <th>Preview Nomor Berikutnya</th>
                                        <th>Counter Saat Ini</th>
                                        <th>Periode Reset</th>
                                        <th width="100">Status</th>
                                        <th width="80">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Test Panel -->
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">Tes Pembuatan Nomor Cepat</h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="testStore">Store</label>
                                    <select id="testStore" class="form-control form-control-sm">
                                        <option value="">Pilih Store</option>
                                        @foreach($variables['stores'] as $store)
                                        <option value="{{ $store->id }}">{{ $store->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="testDocType">Tipe Dokumen</label>
                                    <select id="testDocType" class="form-control form-control-sm">
                                        <option value="">Pilih Tipe Dokumen</option>
                                        @foreach($variables['document_types'] as $key => $label)
                                        <option value="{{ $key }}">{{ $key }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <div>
                                        <button id="generateTestNumber" class="btn btn-sm btn-warning">
                                            <i class="fas fa-play"></i> Buat Nomor
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div id="testResult" class="alert alert-info" style="display: none;">
                                    <strong>Nomor yang Dibuat:</strong> <span id="generatedNumber"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    $(document).ready(function() {
        // Initialize DataTable
        var table = $('#formatsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('numbering_formats.index') }}",
                type: 'GET',
                data: function(d) {
                    d.store_id = $('#storeFilter').val();
                    d.document_type = $('#docTypeFilter').val();
                }
            },
            columns: [{
                    data: 0,
                    name: 'no',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 1,
                    name: 'store_name'
                },
                {
                    data: 2,
                    name: 'document_type'
                },
                {
                    data: 3,
                    name: 'format_pattern'
                },
                {
                    data: 4,
                    name: 'preview',
                    orderable: false
                },
                {
                    data: 5,
                    name: 'current_number'
                },
                {
                    data: 6,
                    name: 'reset_period'
                },
                {
                    data: 7,
                    name: 'status',
                    orderable: false
                },
                {
                    data: 8,
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],
            order: [
                [1, 'asc'],
                [2, 'asc']
            ],
            pageLength: 25,
            responsive: false,
            language: {
                processing: "Memuat...",
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ data",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                infoFiltered: "(difilter dari _MAX_ total data)",
                paginate: {
                    first: "Pertama",
                    last: "Terakhir",
                    next: "Selanjutnya",
                    previous: "Sebelumnya"
                },
                emptyTable: "Tidak ada data tersedia",
                zeroRecords: "Tidak ada data yang cocok"
            }
        });

        // Filter changes
        $('#storeFilter, #docTypeFilter').on('change', function() {
            table.ajax.reload();
        });

        // Generate test number
        $('#generateTestNumber').on('click', function() {
            var storeId = $('#testStore').val();
            var docType = $('#testDocType').val();

            if (!storeId || !docType) {
                alert('Silakan pilih toko dan tipe dokumen');
                return;
            }

            $.get("{{ route('numbering_formats.generate') }}", {
                    store_id: storeId,
                    document_type: docType
                })
                .done(function(response) {
                    $('#generatedNumber').text(response.number);
                    $('#testResult').show();
                    table.ajax.reload(); // Refresh table to show updated counter
                })
                .fail(function(xhr) {
                    alert('Error membuat nomor: ' + (xhr.responseJSON?.error || 'Error tidak diketahui'));
                });
        });
    });
</script>
@endsection