@extends('layout.app')
@section('title', 'Party Payable Report')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        .text-wrap {
            white-space: normal !important;
        }

        .table td {
            vertical-align: middle;
        }
        
        .summary-card {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            text-align: center;
            border: 1px solid #e9ecef;
        }
        
        .summary-card h6 {
            color: #6c757d;
            margin-bottom: 5px;
            font-size: 12px;
            text-transform: uppercase;
        }
        
        .summary-card h3 {
            margin: 0;
            color: #343a40;
            font-weight: 600;
        }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="javascript:void(0);">Party Payable Report</a>
            </li>
        </ol>
    </div>

    <div class="app-body">
        
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="summary-card">
                    <h6>Total Payable</h6>
                    <h3 id="summary_total_payable" class="text-primary">0.00</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="summary-card">
                    <h6>Total Paid</h6>
                    <h3 id="summary_total_paid" class="text-success">0.00</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="summary-card">
                    <h6>Outstanding</h6>
                    <h3 id="summary_outstanding" class="text-danger">0.00</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="summary-card">
                    <h6>Bills Pending</h6>
                    <h3 id="summary_bills_pending" class="text-warning">0</h3>
                </div>
            </div>
        </div>

        <div class="row gx-3">
            <div class="col-sm-2">
                <label class="form-label" for="date_period">Period</label>
                <select id="date_period" class="form-select">
                    <option value="all" selected>All</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="last_7">Last 7 Days</option>
                    <option value="last_30">Last 30 Days</option>
                    <option value="this_month">This Month</option>
                    <option value="last_month">Last Month</option>
                    <option value="custom">Custom Range</option>
                </select>
            </div>
            <div class="col-sm-2">
                <label class="form-label" for="from_date">From Date</label>
                <input type="text" id="from_date" class="form-control datepicker" value="{{ $financial_year_start }}">
            </div>
            <div class="col-sm-2">
                <label class="form-label" for="to_date">To Date</label>
                <input type="text" id="to_date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
            </div>
            
            <div class="col-sm-3">
                <label class="form-label">Filter by Party</label>
                <select id="party_id" class="form-control select2">
                    <option value="">-- All Parties --</option>
                    @foreach ($parties as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-sm-2">
                <label class="form-label">Status</label>
                <select id="status" class="form-control">
                    <option value="all">All</option>
                    <option value="unpaid">Unpaid</option>
                    <option value="partial">Partial</option>
                    <option value="paid">Paid</option>
                </select>
            </div>
            
        

            <div class="col-sm-12 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable"
                                class="table truncate m-0 align-middle table-striped table-bordered w-100">
                                <thead>
                                    <tr>
                                        <th>S.no.</th>
                                        <th>Party Name</th>
                                        <th>Bill/GR Details</th>
                                        <th>Total Payable</th>
                                        <th>Paid Amount</th>
                                        <th>Outstanding</th>
                                        <th>Days</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="3" style="text-align:right">Totals:</th>
                                        <th id="footerTotalPayable" class="text-primary fw-bold">0.00</th>
                                        <th id="footerTotalPaid" class="text-success fw-bold">0.00</th>
                                        <th id="footerTotalOutstanding" class="text-danger fw-bold">0.00</th>
                                        <th colspan="2"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".select2").select2();

            $('#from_date, #to_date').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: true,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            $('#date_period').on('change', function() {
                var val = $(this).val();
                var start, end;
                
                switch(val) {
                    case 'today':
                        start = moment();
                        end = moment();
                        break;
                    case 'yesterday':
                        start = moment().subtract(1, 'days');
                        end = moment().subtract(1, 'days');
                        break;
                    case 'last_7':
                        start = moment().subtract(6, 'days');
                        end = moment();
                        break;
                    case 'last_30':
                        start = moment().subtract(29, 'days');
                        end = moment();
                        break;
                    case 'this_month':
                        start = moment().startOf('month');
                        end = moment().endOf('month');
                        break;
                    case 'last_month':
                        start = moment().subtract(1, 'month').startOf('month');
                        end = moment().subtract(1, 'month').endOf('month');
                        break;
                    case 'all':
                        start = moment("{{ $financial_year_start }}", "DD-MM-YYYY");
                        end = moment();
                        break;
                    default:
                        return;
                }
                
                $('#from_date').data('daterangepicker').setStartDate(start);
                $('#from_date').data('daterangepicker').setEndDate(start);
                $('#from_date').val(start.format('DD-MM-YYYY'));
                
                $('#to_date').data('daterangepicker').setStartDate(end);
                $('#to_date').data('daterangepicker').setEndDate(end);
                $('#to_date').val(end.format('DD-MM-YYYY'));
                
                table.draw();
            });

            $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
                $('#date_period').val('custom');
                table.draw();
            });

            var table = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: "{{ route('payable-report.getData') }}",
                    type: "POST",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.party_id = $('#party_id').val();
                        d.startdate = moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                        d.enddate = moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                        d.status = $('#status').val();
                        d.ageing = $('#ageing').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'party_name', name: 'party_name' },
                    { data: 'bill_info', name: 'bill_info' },
                    { data: 'total_amount', name: 'lorry_hire', className: 'text-end' },
                    { data: 'paid_amount', name: 'paid_amount', className: 'text-end', orderable: false, searchable: false },
                    { data: 'outstanding_amount', name: 'balance_amount', className: 'text-end', orderable: false, searchable: false },
                    { data: 'age', name: 'age', className: 'text-center' },
                    { data: 'status', name: 'status', className: 'text-center', orderable: false, searchable: false }
                ],
                drawCallback: function(settings) {
                    var api = this.api();
                    
                    if (settings.json && settings.json.summary) {
                        var sum = settings.json.summary;
                        
                        var fmt = new Intl.NumberFormat('en-IN', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                        
                        $('#summary_total_payable').html(fmt.format(sum.total_payable));
                        $('#summary_total_paid').html(fmt.format(sum.total_paid));
                        $('#summary_outstanding').html(fmt.format(sum.total_outstanding));
                        $('#summary_bills_pending').html(sum.bills_pending);
                        
                        $('#footerTotalPayable').html(fmt.format(sum.total_payable));
                        $('#footerTotalPaid').html(fmt.format(sum.total_paid));
                        $('#footerTotalOutstanding').html(fmt.format(sum.total_outstanding));
                    }
                }
            });

            $('#party_id, #status, #ageing').on('change', function() {
                table.draw();
            });
        });
    </script>
@endpush