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


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

                                <button type="button" data-toggle="modal" data-target="#cetak" 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>Total</th>
                                            <th class="action">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                        {{-- <tr>
                                            <td class="action">1</td>
                                            <td>20-10-2025/19:00</td>
                                            <td>kkkkk/kkkk</td>
                                            <td>udin</td>
                                            <td>Rp 10.000.000</td>
                                            <td class="action"><a href="{{ route('detailPenjualan') }}"
                                                    class="btn text-white btn-info ml-2"> <i class="fas fa-circle-info">
                                                    </i> Detail</a>
                                            </td>

                                        </tr> --}}

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="cetak" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" 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" id="exampleModalLabel">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>Customer</label>
                            <select class="form-control select2" id="select-customer" required>
                                <option value=0 selected>Semua</option>
                                @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}">{{$customer->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" required>
                                <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-secondary" data-dismiss="modal">Close</button> -->
                <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",
                        infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        infoFiltered: "(disaring dari _MAX_ total data)",
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",

                    }, emptyTable: "Data masih kosong"

                },
                ajax: {
                    url: '/api/laporans/penjualan',
                    type: "GET",
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },

                    data: function (d) {
                        d.kasir = $('#select-kasir').val();
                        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 tanggal = new Date(data);
                        let formatTanggal =
                            tanggal.getDate().toString().padStart(2, '0') + '-' +
                            (tanggal.getMonth() + 1).toString().padStart(2, '0') + '-' +
                            tanggal.getFullYear() + '/' + tanggal.getHours() + ':' + tanggal.getMinutes();
                        return formatTanggal;
                    }

                },

                {
                    data: 'faktur',
                    render: function (data) {
                        return data;
                    }
                },
                {
                    data: 'user.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',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row) {
                        return `
                <a href="/laporan_penjualan/detail/${row.id}" class="btn text-white btn-info ml-2">
                    <i class="fas fa-circle-info"></i> Detail
                </a>
            `;
                    }
                }]
            });
        };
        $('.btn-filter').click(function (e) {
            e.preventDefault();

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


            $('#tableData').DataTable().ajax.reload(null, false);



        })
        $('.btn-cetak').click(function (e) {
            e.preventDefault();
            tanggal = $('#input-tanggal').val()|| 0;
            customer = $('#select-customer').val();
            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_awal.replaceAll('/', '-');
        }
        $('#cetak').modal('hide');

             window.location.href = '/laporan_penjualan/cetak/'+ tanggal_awal + '/' + tanggal_akhir + '/' + customer + '/' + kasir;



        })



</script>
@endpush