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

@section('main')
<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Laporan Pembelian</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">Pembelian</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="text-dark">List Pembelian</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>Kasir</th>
                                            <th>Supplier</th>
                                            <th>Total</th>
                                            <th class="action">Action</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-4 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-4 col-12">
                            <label>Supplier</label>
                            <select class="form-control select2" id="select-supplier">
                                <option value="0" selected>Semua</option>
                                @foreach ($suppliers as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-4 col-12">
                            <label>Kasir</label>
                            <select class="form-control select2" id="select-kasir">
                                <option value="0" selected>Semua</option>
                                @foreach ($users as $user)
                                <option value="{{ $user->id }}">{{ $user->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">
                    <i class="fas fa-print"></i> Cetak
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

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

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

    function listData() {
        $('#tableData').DataTable({
            lengthChange: false,
            pageLength:   10,
            processing:   true,
            serverSide:   true,
            responsive:   true,
            autoWidth:    false,
            language: {
                search: "Cari:",
                paginate: {
                    next:     "Selanjutnya",
                    previous: "Sebelumnya",
                },
                emptyTable: "Data masih kosong"
            },
            ajax: {
                url:  '/api/laporans/pembelian',
                type: 'GET',
                headers: { 'Authorization': 'Bearer ' + token },
                data: function (d) {
                    d.kasir    = $('#select-kasir').val();
                    d.supplier = $('#select-supplier').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() + ':' +
                               t.getMinutes().toString().padStart(2, '0');
                    }
                },
                {
                    data: 'faktur',
                    render: function (data) { return data; }
                },
                {
                    data: 'user.nama',
                    orderable: false,
                    render: function (data) { return data; }
                },
                {
                    data: 'supplier.nama',
                    orderable: false,
                    render: function (data) { return data ?? '-'; }
                },
                {
                    data: 'subtotal',
                    orderable: false,
                    render: function (data) {
                        return `<span style="float:left">Rp</span>
                                <span style="float:right">${rupiah(data)}</span>`;
                    }
                },
                {
                    data: 'action',
                    orderable:  false,
                    searchable: false,
                    render: function (data, type, row) {
                        return `<a href="/laporan_pembelian/detail/${row.id}"
                                   class="btn text-white btn-info ml-2">
                                    <i class="fas fa-circle-info"></i> Detail
                                </a>`;
                    }
                }
            ]
        });
    }

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

        let tanggal = $('#input-tanggal').val() || 0;
        let supplier = $('#select-supplier').val();
        let kasir = $('#select-kasir').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('/', '-');
        }

        $('#cetak').modal('hide');

        window.location.href = '/laporan_pembelian/cetak/' + tanggal_awal + '/' + tanggal_akhir + '/' + supplier + '/' + kasir;
    });
</script>
@endpush