@extends('frontend.layouts_sales.master')

@section('content')
    <div class="container">
        <center>
            <h4>DATA TOKO</h4>
        </center>

        @if ($sukses = Session::get('sukses'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $sukses }}</strong>
            </div>
        @endif

        <div class="row">
            <div class="card w-100">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="myTable">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Accountnum Toko</th>
                                    <th>Salesresponbility</th>
                                    <th>NIK</th>
                                    <th>Term of Payment</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($toko as $s)
                                    <tr>
                                        <td>{{ $s->name }}</td>
                                        <td>{{ $s->accountnum }}</td>
                                        <td>{{ $s->salesresponbility }}</td>
                                        <td>{{ $s->nik }}</td>
                                        <td>{{ $s->payment_term_code }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-2 d-flex flex-column flex-md-row align-items-center gap-2">
                    <div id="dt-info" class="mr-md-auto"></div>
                    <div id="dt-paging" class="ml-md-auto"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom-scripts')
    <script>
        $(function() {
            const dt = $('#myTable').DataTable({
                responsive: true,
                paging: true,
                pagingType: 'simple_numbers', // <— pastikan nomor muncul
                lengthChange: false,
                pageLength: 10,
                searching: true,
                dom: 'frtip', // <— wajib, agar .dataTables_info & .dataTables_paginate dibuat
                initComplete: function() {
                    const api = this.api();
                    const $box = $(api.table().container());
                    $('#dt-info').append($box.find('.dataTables_info'));
                    $('#dt-paging').append($box.find('.dataTables_paginate'));
                },
                drawCallback: function() {
                    // setiap redraw, pastikan tetap di footer
                    const api = this.api();
                    const $box = $(api.table().container());
                    $('#dt-info').append($box.find('.dataTables_info'));
                    $('#dt-paging').append($box.find('.dataTables_paginate'));
                    // rapikan margin bootstrap
                    $('#dt-paging .pagination').addClass('mb-0');
                }
            });
        });
    </script>
@endpush

@push('style')
    <style>
        #dt-paging {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        @media (min-width: 768px) {
            #dt-paging {
                justify-content: flex-end;
            }
        }

        .card-footer .dataTables_paginate .pagination {
            margin-bottom: 0;
            flex-wrap: wrap;
        }
    </style>
@endpush