@extends('layouts.admin.app', ["title" => "Belanja Member"])

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Belanja Member</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
                <div class="breadcrumb-item"><a href="#">Laporan</a></div>
                <div class="breadcrumb-item">Belanja Member</div>
            </div>
        </div>

        <div class="section-body">
            {{-- Summary Cards --}}
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-icon shadow-primary bg-primary">
                            <i class="fas fa-shopping-cart" style="color:#fff;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-primary">Total Belanja</h4>
                            </div>
                            <div class="card-body text-primary" id="total-belanja">Rp 0</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-icon shadow-success bg-success">
                            <i class="fas fa-box" style="color:#fff;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-success">Total Barang</h4>
                            </div>
                            <div class="card-body text-success" id="total-barang">0</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="card card-statistic-2">
                        <div class="card-icon shadow-warning bg-warning">
                            <i class="fas fa-receipt" style="color:#fff;"></i>
                        </div>
                        <div class="card-wrap">
                            <div class="card-header">
                                <h4 class="text-warning">Total Transaksi</h4>
                            </div>
                            <div class="card-body text-warning" id="total-transaksi">0</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark" id="judul-tabel">List Riwayat Belanja</h4>
                            <div class="card-header-action">
                                <button type="button" data-toggle="modal" data-target="#filter"
                                    class="btn btn-info">
                                    <i class="fas fa-sort"></i> Filter
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped" id="tableData">
                                    <thead class="table-dark">
                                        <tr>
                                            <th class="table-no">No</th>
                                            <th>Tanggal/Jam</th>
                                            <th>Faktur</th>
                                            <th>Customer</th>
                                            <th>Kasir</th>
                                            <th>Diskon</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

{{-- Modal Filter --}}
<div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Filter</h5>
                <button type="button" class="rounded-circle btn btn-icon btn-danger text-white"
                    data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="row">
                        <div class="form-group col-md-6 col-12">
                            <label>Tanggal</label>
                            <input type="text" class="form-control tanggal" readonly
                                id="input-tanggal" placeholder="Pilih rentang tanggal">
                        </div>
                        <div class="form-group col-md-6 col-12">
                            <label>Customer</label>
                            <select class="form-control select2" id="select-customer">
                                <option value="0" selected>Semua</option>
                                @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-filter btn-info">
                    <i class="fas fa-sort"></i> Filter
                </button>
                                                <button type="button" class="btn btn-warning btn-cetak ml-2">
                                    <i class="fas fa-print"></i> Cetak
                                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    let token = `{{ $token }}`;

    $(document).ready(function () {
        listData();
        loadSummary();
        updateJudulTabel();
    });

    function updateJudulTabel() {
        let customerId = $('#select-customer').val();
        let customerNama = $('#select-customer option:selected').text();

        if (customerId == '0' || customerId == '') {
            $('#judul-tabel').text('List Riwayat Belanja');
        } else {
            $('#judul-tabel').text('List Riwayat Belanja (' + customerNama + ')');
        }
    }

    function loadSummary() {
        let customer = $('#select-customer').val();
        let tanggal  = $('#input-tanggal').val();

        $.ajax({
            url: '/api/belanja_member/summary',
            type: 'GET',
            headers: { 'Authorization': 'Bearer ' + token },
            data: {
                customer: customer,
                tanggal: tanggal
            },
            success: function (res) {
                $('#total-belanja').text('Rp ' + rupiah(res.summary.total_belanja));
                $('#total-barang').text(res.summary.total_barang + ' Barang');
                $('#total-transaksi').text(res.summary.total_transaksi + ' Transaksi');
            }
        });
    }

    function listData() {
        $('#tableData').DataTable({
            lengthChange: false,
            pageLength:   10,
            processing:   true,
            serverSide:   true,
            responsive:   true,
            autoWidth:    false,
            destroy:      true,
            language: {
                search: "Cari:",
                paginate: {
                    next:     "Selanjutnya",
                    previous: "Sebelumnya",
                },
                emptyTable: "Data masih kosong"
            },
            ajax: {
                url:  '/api/belanja_member',
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                data: function (d) {
                    d.customer = $('#select-customer').val();
                    d.tanggal  = $('#input-tanggal').val();
                },
            },
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'created_at',
                    render: function (data) {
                        let t = new Date(data);
                        return t.getDate().toString().padStart(2, '0') + '-' +
                               (t.getMonth() + 1).toString().padStart(2, '0') + '-' +
                               t.getFullYear() + ' ' +
                               t.getHours().toString().padStart(2, '0') + ':' +
                               t.getMinutes().toString().padStart(2, '0');
                    }
                },
                { data: 'faktur' },
                {
                    data: 'customer.nama',
                    orderable: false,
                    render: function (data) { return data ?? '-'; }
                },
                {
                    data: 'user.nama',
                    orderable: false,
                    render: function (data) { return data ?? '-'; }
                },
                {
                    data: 'diskon',
                    orderable: false,
                    render: function (data) {
                        return 'Rp ' + rupiah(data ?? 0);
                    }
                },
                {
                    data: 'total_belanja',
                    orderable: false,
                    render: function (data) {
                        return `<span style="float:left">Rp</span>
                                <span style="float:right">${rupiah(data)}</span>`;
                    }
                }
            ]
        });
    }

    $('.btn-filter').click(function (e) {
        e.preventDefault();
        $('#filter').modal('hide');
        $('#tableData').DataTable().ajax.reload(null, false);
        loadSummary();
        updateJudulTabel();
    });

    $('.btn-cetak').click(function (e) {
        e.preventDefault();

        let tanggal = $('#input-tanggal').val() || 0;
        let customer = $('#select-customer').val();

        let tanggal_awal = 0;
        let tanggal_akhir = 0;

        if (tanggal !== 0) {
            tanggal_awal = tanggal.split(' - ')[0];
            tanggal_awal = tanggal_awal.replaceAll('/', '-');
            tanggal_akhir = tanggal.split(' - ')[1];
            tanggal_akhir = tanggal_akhir.replaceAll('/', '-');
        }

        window.location.href = '/belanja_member/cetak/' + tanggal_awal + '/' + tanggal_akhir + '/' + customer;
    });
</script>
@endpush