@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
    <style>
        thead .th {
            align-text: center;
        }
    </style>
@endsection

@section('content')

<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4 class="mb-1">Audit Report</h4>
            <small class="text-muted">
                Transaksi dengan status transaksi bermasalah
            </small>
        </div>
    </div>


    {{-- FILTER --}}
    <div class="card">

        <div class="card-body">

            {{-- FILTER --}}
            <div class="row g-3 mb-3">

                <div class="col-md-3">
                    <label class="form-label">
                        Tanggal Mulai
                    </label>

                    <input
                        type="date"
                        id="start_date"
                        class="form-control"
                        value="{{ date('Y-m-d') }}"
                    >
                </div>

                <div class="col-md-3">
                    <label class="form-label">
                        Tanggal Akhir
                    </label>

                    <input
                        type="date"
                        id="end_date"
                        class="form-control"
                        value="{{ date('Y-m-d') }}"
                    >
                </div>

                <div class="col-md-2">
                    <label class="form-label">
                        Status
                    </label>

                    <select
                        id="status_transaksi"
                        class="form-select"
                    >
                        <option value="0">Semua</option>
                        <option value="-1">Pembatalan</option>
                        <option value="-2">Maintenance</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">
                        Alasan
                    </label>

                    <select
                        id="filter_alasan"
                        class="form-select"
                    >
                        <option value="1">
                            Batal
                        </option>

                        <option value="0">
                            Semua
                        </option>
                    </select>
                </div>

                <div class="col-md-2 d-flex align-items-end">

                    <button
                        type="button"
                        class="btn btn-primary w-100"
                        id="btn-search"
                    >
                        <i class="fas fa-search"></i>
                        Cari
                    </button>

                </div>

            </div>


            {{-- SUMMARY --}}
            <div class="row mb-3">

                <div class="col-md-3">
                    <div class="border rounded p-3">
                        <small>Total Transaksi</small>

                        <h4 id="total-transaksi">
                            0
                        </h4>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="border rounded p-3">
                        <small>Total Bayar</small>

                        <h4 id="total-bayar">
                            Rp 0
                        </h4>
                    </div>
                </div>

            </div>


            {{-- TABLE --}}
            <div class="table-responsive">

                <table
                    class="table table-bordered table-hover"
                    id="audit-table"
                >

                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nomer Polisi</th>
                            <th>Waktu Masuk</th>
                            <th>Waktu Keluar</th>
                            <th>Status</th>
                            <th>Bayar Keluar</th>
                            <th>Alasan</th>
                            <th>Jenis Pembayaran</th>
                            <th>Petugas</th>
                        </tr>
                    </thead>

                    <tbody id="audit-table-body">

                        {{-- kosong saat pertama dibuka --}}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>

@endsection


@section('javascript')
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script>

        $(function () {

            $('#btn-search').on('click', function () {

                const btn = $(this);

                const startDate = $('#start_date').val();
                const endDate = $('#end_date').val();
                const status = $('#status_transaksi').val();
                const alasan = $('#filter_alasan').val();

                if (!startDate || !endDate) {
                    alert('Tanggal harus diisi');
                    return;
                }

                if (startDate > endDate) {
                    alert(
                        'Tanggal mulai tidak boleh lebih besar dari tanggal akhir'
                    );

                    return;
                }

                $.ajax({

                    url: "{{ route('audit.data') }}",

                    type: "GET",

                    data: {
                        start_date: startDate,
                        end_date: endDate,
                        status_transaksi: status,
                        filter_alasan: alasan
                    },

                    dataType: "json",

                    beforeSend: function () {

                        btn.prop('disabled', true);

                        $('#audit-table-body').html(`
                            <tr>
                                <td colspan="8"
                                    class="text-center">
                                    Memuat data...
                                </td>
                            </tr>
                        `);

                    },

                    success: function (response) {

                        if (!response.response) {
                            return;
                        }

                        const rows = response.data;

                        $('#audit-table-body').empty();

                        if (rows.length === 0) {

                            $('#audit-table-body').html(`
                                <tr>
                                    <td colspan="8"
                                        class="text-center">
                                        Tidak ada data
                                    </td>
                                </tr>
                            `);

                        } else {

                            rows.forEach(function (row) {

                                $('#audit-table-body').append(`

                                    <tr>

                                        <td class="text-center">
                                            ${row.id ?? '-'}
                                        </td>

                                        <td class="text-center">
                                            ${row.no_pol ?? '-'}
                                        </td>

                                        <td class="text-center">
                                            ${row.waktu_masuk ?? '-'}
                                        </td class="text-center">

                                        <td class="text-center">
                                            ${row.waktu_keluar ?? '-'}
                                        </td>

                                        <td class="text-center">
                                            <span class="badge bg-danger">
                                                ${row.status_transaksi ?? '-'}
                                            </span>
                                        </td>

                                        <td class="text-end">
                                            Rp ${Number(
                                                row.bayar_keluar ?? 0
                                            ).toLocaleString('id-ID')}
                                        </td>

                                        <td class="text-center">
                                            ${row.alasan ?? '-'}
                                        </td>

                                        <td class="text-center">
                                            ${row.cara_bayar == 2 ? 'Tunai' : 'Non Tunai'}
                                        </td>
                                        <td class="text-center">
                                            ${row.operator ?? '-'}
                                        </td>

                                    </tr>

                                `);

                            });
                        }

                        // SUMMARY
                        $('#total-transaksi').text(
                            Number(
                                response.summary.total_transaksi
                            ).toLocaleString('id-ID')
                        );

                        $('#total-bayar').text(
                            'Rp ' +
                            Number(
                                response.summary.total_bayar
                            ).toLocaleString('id-ID')
                        );

                    },

                    error: function (xhr) {

                        console.error(xhr.responseText);

                        $('#audit-table-body').html(`
                            <tr>
                                <td colspan="8"
                                    class="text-center text-danger">
                                    Gagal mengambil data
                                </td>
                            </tr>
                        `);

                    },

                    complete: function () {

                        btn.prop('disabled', false);

                    }

                });

            });

            function payment(value) {
                switch (value) {
                   	case 2:
                  		return 'Tunai';
                   	case 3:
                  		return 'Non Tunai';
                   	default:
                  		return 'Jenis Pembayaran Tidak ditemukan'
                    }
            };

            function vehicleStatus(value) {
                switch (value) {
                   	case 0:
                  		return 'Sudah Keluar';
                   	case 1:
                  		return 'Masih didalam';
                    case -2:
                  		return 'Maintenance';
                   	default:
                  		return 'Tidak Ada'
                    }
            }

        });

    </script>

@endsection