@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
    <style>
        .select2-container .select2-selection--single {
            height: 48px;
        }

        .select2-container--default
        .select2-selection--single
        .select2-selection__rendered {
            line-height: 38px;
        }

        .select2-container--default
        .select2-selection--single
        .select2-selection__arrow {
            height: 38px;
        }
        /* .table th {
            text-align: center;
        }
        .table td {
            text-align: right;
        } */
    </style>
@endsection

@section('content')
<!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-md-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-header">
                            </div>
                            <div class="card-body">
                                <form id="filter-parkir" action="javascript:void(0)">
                                    <div class="row align-items-end g-2">
                                        <!-- CARI DATA -->
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label for="q">Cari Data</label>
                                                <input type="text" class="form-control form-control-sm" id="q" placeholder="Keyword">
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label for="field">Field</label>
                                                <select class="form-control form-control-sm js-example-basic-single" id="field">
                                                    <option value="id" selected>No. ID</option>
                                                    <option value="no_pol">No. Pol</option>
                                                    <option value="no_barcode">No. Transaksi</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!-- PERIODE -->
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for="tgl_awal">Periode Awal</label>
                                                <input type="date" class="form-control form-control-sm" id="tgl_awal" name="tgl_awal">
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for="tgl_akhir">Periode Akhir</label>
                                                <input type="date" class="form-control form-control-sm" id="tgl_akhir" name="tgl_akhir">
                                            </div>
                                        </div>
                                        <!-- STATUS KENDARAAN : 1 masuk, 0 keluar -->
                                        <div class="col-md-1">
                                            <div class="form-group">
                                                <label for="status_kendaraan">Kendaraan</label>
                                                <select class="form-control form-control-sm js-example-basic-single" id="status_kendaraan">
                                                    <option value="" selected>Semua</option>
                                                    <option value="1">Masuk</option>
                                                    <option value="0">Keluar</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!-- STATUS TRANSAKSI : 0 casual, 3 member, 32 denda -->
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for="status_transaksi">Transaksi</label>
                                                <select class="form-control form-control-sm js-example-basic-single" id="status_transaksi">
                                                    <option value="" selected>Semua</option>
                                                    <option value="0">Casual</option>
                                                    <option value="3">Member</option>
                                                    <option value="32">Denda</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!-- AKSI -->
                                        <div class="col-md-2 d-flex align-items-end gap-1">
                                            <button type="submit" class="btn btn-sm btn-primary" id="btn-cari">
                                                <i class="fa fa-search me-1"></i>Cari
                                            </button>
                                            <button type="button" class="btn btn-sm btn-secondary" id="btn-reset">Reset</button>
                                        </div>
                                        <!-- BUTTON EXPORT -->
                                        <div class="col-md-1 text-end">
                                            <div class="btn-list d-inline-flex gap-1">
                                                <button type="button"
                                                        class="btn btn-sm btn-icon btn-success btn-export-excel" title="Export CSV">
                                                    <i class="fa fa-file-excel-o"></i>
                                                </button>
                                                <button type="button"
                                                        class="btn btn-sm btn-icon btn-danger btn-export-pdf" title="Cetak">
                                                    <i class="fa fa-file-pdf-o"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <hr class="my-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="card-title mb-0">Hasil Transaksi</h5>
                                <small class="text-muted" id="info-paging"></small>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" id="tabel-parkir">
                                    <thead>
                                        <tr>
                                            <th width="4%">No.</th>
                                            <th>ID</th>
                                            <th>No. Pol</th>
                                            <th>Barcode</th>
                                            <th>Kendaraan</th>
                                            <th>Waktu Masuk</th>
                                            <th>Waktu Keluar</th>
                                            <th>Status Kendaraan</th>
                                            <th>Status Transaksi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="body-parkir">
                                        <tr><td colspan="9" class="text-center">Memuat data...</td></tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <button class="btn btn-sm btn-outline-primary" id="btn-prev" type="button">&laquo; Sebelumnya</button>
                                <span class="text-muted" id="label-halaman"></span>
                                <button class="btn btn-sm btn-outline-primary" id="btn-next" type="button">Berikutnya &raquo;</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
    <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
    <script src="{{ asset('js/select2.js') }}"></script>
    <script>
        $(function () {
            const dataUrl = '{{ route('transaksiparkir.data', [], false) }}';
            let page = 1;

            const labelKendaraan = {1: 'Masuk', 0: 'Keluar'};
            const labelTransaksi = {0: 'Casual', 3: 'Member', 32: 'Denda'};

            function badge(text, color) {
                return '<span class="badge bg-' + color + '">' + text + '</span>';
            }

            function statusKendaraan(v) {
                if (v == 1) return badge('Masuk', 'success');
                if (v == 0) return badge('Keluar', 'secondary');
                return badge(v ?? '-', 'light text-dark');
            }

            function statusTransaksi(v) {
                const t = labelTransaksi[v] !== undefined ? labelTransaksi[v] : (v ?? '-');
                const c = v == 0 ? 'primary' : (v == 3 ? 'info' : (v == 32 ? 'warning' : 'light text-dark'));
                return badge(t, c);
            }

            function esc(v) {
                return (v === null || v === undefined) ? '' : String(v)
                    .replace(/&/g, '&amp;').replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }

            function params(extra) {
                const p = {
                    q: $('#q').val().trim(),
                    field: $('#field').val(),
                    tgl_awal: $('#tgl_awal').val(),
                    tgl_akhir: $('#tgl_akhir').val(),
                    status_kendaraan: $('#status_kendaraan').val(),
                    status_transaksi: $('#status_transaksi').val(),
                    page: page
                };
                return $.param(Object.assign(p, extra || {}));
            }

            function load() {
                $('#body-parkir').html('<tr><td colspan="9" class="text-center">Memuat data...</td></tr>');
                $.ajax({
                    url: dataUrl + '?' + params(),
                    type: 'GET',
                    success: function (r) {
                        if (!r.data.length) {
                            $('#body-parkir').html('<tr><td colspan="9" class="text-center">Data tidak ditemukan.</td></tr>');
                        } else {
                            let html = '';
                            const offset = (r.meta.current_page - 1) * r.meta.per_page;
                            r.data.forEach(function (row, i) {
                                html += '<tr>'
                                    + '<td class="text-center">' + (offset + i + 1) + '</td>'
                                    + '<td>' + esc(row.id) + '</td>'
                                    + '<td>' + esc(row.no_pol) + '</td>'
                                    + '<td>' + esc(row.no_barcode) + '</td>'
                                    + '<td>' + esc([row.id_kendaraan, row.nama_kendaraan].filter(Boolean).join(' - ')) + '</td>'
                                    + '<td>' + esc(row.waktu_masuk) + '</td>'
                                    + '<td>' + esc(row.waktu_keluar) + '</td>'
                                    + '<td class="text-center">' + statusKendaraan(row.status) + '</td>'
                                    + '<td class="text-center">' + statusTransaksi(row.status_transaksi) + '</td>'
                                    + '</tr>';
                            });
                            $('#body-parkir').html(html);
                        }
                        $('#info-paging').text('Total ' + r.meta.total + ' data');
                        $('#label-halaman').text('Halaman ' + r.meta.current_page + ' / ' + Math.max(r.meta.last_page, 1));
                        $('#btn-prev').prop('disabled', r.meta.current_page <= 1);
                        $('#btn-next').prop('disabled', r.meta.current_page >= r.meta.last_page);
                        page = r.meta.current_page;
                    },
                    error: function (xhr) {
                        let msg = 'Gagal memuat data.';
                        if (xhr.status === 422 && xhr.responseJSON?.errors) {
                            msg = Object.values(xhr.responseJSON.errors).flat().join(' ');
                        }
                        $('#body-parkir').html('<tr><td colspan="9" class="text-center text-danger">' + esc(msg) + '</td></tr>');
                    }
                });
            }

            $('#filter-parkir').on('submit', function () { page = 1; load(); });
            $('#btn-reset').on('click', function () {
                $('#filter-parkir')[0].reset();
                $('#field, #status_kendaraan, #status_transaksi').val('').trigger('change');
                $('#field').val('id').trigger('change');
                page = 1; load();
            });
            $('#btn-prev').on('click', function () { if (page > 1) { page--; load(); } });
            $('#btn-next').on('click', function () { page++; load(); });

            $('.btn-export-excel').on('click', function () {
                window.location = dataUrl + '?' + params({export: 'csv'});
            });
            $('.btn-export-pdf').on('click', function () { window.print(); });

            load();
        });
    </script>
@endsection