@extends('layouts.master')

@section('title', 'Laporan Komisi')

@section('css')
    <style>
        .btn-square {
            width: 100px;
        }
        .table th, .table td {
            text-align: left;
            vertical-align: middle;
            padding: 12px;
        }
        .table thead {
            background-color: #f2f2f2;
        }
        .table-responsive {
            margin-top: 20px;
            overflow-x: auto;
            width: 100%;
        }
        .table {
            width: 100% !important;
            border-collapse: collapse;
            table-layout: auto;
        }
        .table td, .table th {
            white-space: nowrap;
            max-width: none !important;
        }
        .table td {
            padding: 10px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }
        .table th {
            background-color: #f8f8f8;
            font-weight: bold;
            border-bottom: 2px solid #ddd;
        }
        .table td, .table th {
            border-left: none;
            border-right: none;
        }
        #priceReportTable_wrapper {
            margin-top: 20px;
        }
        .total-row {
            font-weight: bold;
            background-color: #f2f2f2;
        }
        .list-group {
            position: absolute;
            z-index: 1000;
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ddd;
            background-color: #fff;
        }
        .list-group-item:hover {
            background-color: #f8f9fa;
        }
    </style>
@endsection

@section('content')
    <x-page-title title="Laporan Komisi" pagetitle="Laporan Komisi" />
    <hr>

    <div class="card">
        <div class="card-body">
            <h6 class="mb-4 text-uppercase">Laporan Komisi</h6>
                <!-- Filters -->
                <div class="row mb-4">
                    <div class="col-md-3">
                    <label for="date_from">Date From:</label>
                    <div class="input-group">
                        <input type="date" id="date_from" class="form-control date-picker filter-date me-0">
                    </div>
                </div>

                <!-- Date To Filter -->
                <div class="col-md-3">
                    <label for="date_to">Date To:</label>
                    <div class="input-group">
                        <input type="date" id="date_to" class="form-control date-picker filter-date me-0">
                    </div>
                </div>
                <div class="col-md-3">
                    <label for="salesman">Salesman:</label>
                    <select id="salesman" class="form-control">
                        <option value="">Select Salesman</option>
                        @foreach($salesmans as $sales)
                            <option value="{{ $sales->salesman_code }}">{{ $sales->salesman_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="comms">Commission Type:</label>
                    <select id="comms" class="form-control">
                        @foreach($comms as $com)
                            <option value="{{ $com->type }}">{{ $com->type }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 pt-4">
                    <button type="button" class="btn btn-primary" id="btn-search">Search</button>
                </div>
            </div>

            <!-- Data Table -->
            <div class="table-responsive">
                <h6>Target: <span id="targetText"></span></h6>
                <table id="priceReportTable" class="table table-hover mt-3">
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th>No Doc</th>
                            <th>Pelanggan</th>
                            <th>Nomor Pelunasan</th>
                            <th>Tanggal Pelunasan</th>
                            <th>Total</th>
                            <th>Komisi <span id="comms_percent"></span>%</th>
                        </tr>
                    </thead>
                    <tbody id="table-body">
                        <!-- Data will be inserted here dynamically -->
                    </tbody>

                    <tfoot>
                        <tr class="table-primary">
                            <td colspan="5" class="text-end"><b>Total</b></td>
                            <td id="total" style="font-weight: bold"></td>
                            <td id="total_comms" style="font-weight: bold"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <p class="text-center mt-4" id="noDataMessage">Silakan pilih tanggal, sales dan jenis komisi, lalu klik "Search" untuk melihat data harga.</p>
        </div>
    </div>
@endsection

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script>
    let comms = @json($comms);
    let salesmans = @json($salesmans);
    let selectedSalesman = '';

    $('#salesman').on('change', function() {
        var selectedUnit = $(this).val();
        selectedSalesman = salesmans.find((e)=>e.salesman_code==selectedUnit);
        if (selectedUnit) {
            $('#targetText').text(selectedSalesman.target.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
        }
    });
    $(document).ready(function() {
        const table = $('#priceReportTable').DataTable({
            @if(Auth::user()->role=='RO01')
            buttons: [
                'copy',
                'print',
                {
                    extend: 'excel',
                    title: function() {
                        let salesman = $('#salesman option:selected').text();
                        let type = $('#comms').val();
                        return `Laporan Komisi - ${salesman} (${type})`;
                    },
                    messageTop: function() {
                        return `Periode: ${$('#date_from').val()} s/d ${$('#date_to').val()}`;
                    },
                    filename: function() {
                        let s = $('#salesman option:selected').text().replace(/\s+/g, '_');
                        return `Komisi_${s}_${$('#date_from').val()}_to_${$('#date_to').val()}`;
                    },
                    footer: true // This ensures the <tfoot> (Total) is exported to Excel
                },
                {
                    extend: 'pdf',
                    footer: true, // IMPORTANT: Shows the <tfoot> in PDF
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: ':visible'
                    },filename: function() {
                        let s = $('#salesman option:selected').text().replace(/\s+/g, '_');
                        return `Komisi_${s}_${$('#date_from').val()}_to_${$('#date_to').val()}`;
                    },
                    customize: function(doc) {
                        let salesman = $('#salesman option:selected').text();
                        let type = $('#comms').val();
                        let dateFrom = $('#date_from').val();
                        let dateTo = $('#date_to').val();

                        // Custom Header
                        doc.content.splice(0, 1, {
                            text: [
                                { text: 'LAPORAN KOMISI SALESMAN\n', fontSize: 16, bold: true },
                                { text: `Salesman: ${salesman} | Type: ${type}\n`, fontSize: 11 },
                                { text: `Periode: ${dateFrom} s/d ${dateTo}\n\n`, fontSize: 11 }
                            ],
                            alignment: 'center',
                            margin: [0, 0, 0, 10]
                        });

                        // Force table widths to fill page
                        doc.content[1].table.widths = Array(doc.content[1].table.body[0].length).fill('*');

                        // Right align Total and Commission columns
                        let rowCount = doc.content[1].table.body.length;
                        for (let i = 0; i < rowCount; i++) {
                            doc.content[1].table.body[i][5].alignment = 'right';
                            doc.content[1].table.body[i][6].alignment = 'right';
                        }
                    }
                }
            ],
            @endif
            paging: true,
            searching: true,
            order: [],
            ordering: false,
            info: true,
            autoWidth: true,
            responsive: true,
            columns: [
                { data: 'document_date', className: 'document-date' },
                { data: 'document_number', className: 'document-number' },
                { data: 'customer', className: 'customer' },
                { data: 'payment_number', className: 'payment-number' },
                { data: 'payment_date', className: 'payment-date' },
                { data: 'total', className: 'total text-end' },
                { data: 'commission', className: 'total text-end' }
            ]
        });

        table.buttons().container()
            .appendTo('#priceReportTable_wrapper .col-md-6:eq(0)');

        $('#noDataMessage').show();
        $('#priceReportTable').parent().hide();

        $('#btn-search').on('click', function() {
            let dateFrom = $('#date_from').val();
            let dateTo = $('#date_to').val();
            let salesman = $('#salesman').val();
            let comm = $('#comms').val();
            commission = comms.find((e)=>e.type==comm);

            selectedSalesman = salesmans.find((e)=>e.salesman_code==salesman);
            $('#comms_percent').text(selectedSalesman.commision_percent);

            Swal.fire({
                title: 'Loading...',
                text: 'Harap Tunggu.',
                allowOutsideClick: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            $.ajax({
                url: '{{ route("commission.fetch") }}',
                type: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    salesman: salesman,
                    nominal_from: commission.nominal_from,
                    nominal_to: commission.nominal_to,
                },
                beforeSend: function() {
                    table.clear();
                    $('#noDataMessage').hide();
                    $('#priceReportTable').parent().show();
                },
                success: function(response) {
                    let dataRows = [];
                    if (response && response.length > 0) {
                        let total = 0;
                        $.each(response, function(index, item) {
                            total+=parseFloat(item.total);
                            dataRows.push({
                                // Mapping the response in your frontend
                                document_number: item.sales_invoice_number,
                                document_date: item.document_date ? new Date(item.document_date).toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                }) : 'N/A',
                                customer: item.customer_name,
                                total: item.total ? parseFloat(item.total).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0.00',
                                payment_number: item.payment_number,
                                payment_date: item.payment_date !== 'N/A' ? new Date(item.payment_date).toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                }) : 'N/A',
                                // Commission logic remains the same
                                commission: item.total ? (parseFloat(item.total) * parseFloat(selectedSalesman.commision_percent) / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0.00',
                            });
                        });
                        table.clear().rows.add(dataRows).draw();
                        let formattedTotal = total.toLocaleString('id-ID', {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        });
                        let komisi = total*selectedSalesman.commision_percent/100
                        let formattedKomisi = komisi.toLocaleString('id-ID', {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0
                        });
                        $('#total').text(formattedTotal);
                        $('#total_comms').text(formattedKomisi);
                        Swal.fire({
                            icon: 'success',
                            title: 'Sukses!',
                            text: 'Data berhasil ditampilkan!',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#noDataMessage').hide();
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'No Data!',
                            text: 'Tidak ada data!',
                            timer: 2000,
                            showConfirmButton: false
                        });
                        $('#noDataMessage').show();
                        $('#priceReportTable').parent().hide();
                    }
                },
                error: function(error) {
                    console.error("Error:", error);
                    alert('Terjadi kesalahan. Silakan coba lagi.');
                }
            });
        });
    });
</script>
@endsection