@extends('backend.layout.main')
@section('content')

    @if ($errors->has('title'))
        <div class="alert alert-danger alert-dismissible text-center">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>{{ $errors->first('title') }}
        </div>
    @endif
    @if (session()->has('message'))
        <div class="alert alert-success alert-dismissible text-center">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>{{ session()->get('message') }}
        </div>
    @endif
    @if (session()->has('not_permitted'))
        <div class="alert alert-danger alert-dismissible text-center">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>{{ session()->get('not_permitted') }}
        </div>
    @endif

    <section>
        <div class="container-fluid">
            <div style="border-radius: 30px;" class="card pb-4 ">
                <link rel="stylesheet" href="{{ asset('public/css/cloudma.css') }}">
                <div style="background: linear-gradient(to right, #00c1e3, #00489f); border-radius: 30px 30px 0px 0px; font-weight: bold; color: white;"
                    class="card-header mt-2">
                    <h3 class="text-center">Daily Sale Payment Report</h3>
                </div>

                <form action="{{ url('dailysalepaymentreportmodule') }}" method="GET">
                    <div class="row mr-1 mt-4 pl-4 align-items-center">
                        <div class="col-md-4">
                            <label><strong>Select Date</strong> &nbsp;</label>
                            <div class="input-group">
                                <input type="date" name="report_date" id="report_date"
                                    value="{{ request()->input('report_date', date('Y-m-d')) }}" class="form-control"
                                    required />
                            </div>
                        </div>
                        <div class="col-md-3 pt-md-4">
                            <button type="submit" class="btn btn-primary" id="generate-report-btn">Generate Report</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="container-fluid mt-3">
            <h4 class="mb-3" style="color: #00489f; font-weight: bold;">Sales Table (Daily Sale)</h4>
            <div class="table-responsive">
                <table style="border-radius: 15px; background-color: #e0e5ea;" id="sales-table" class="table table-hover">
                    <thead
                        style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
                        <tr>
                            <th>Date</th>
                            <th>Reference Number</th>
                            <th>Cashier</th>
                            <th>Customer</th>
                            <th>Grand Total</th>
                            <th>Cash</th>
                            <th>Card 1</th>
                            <th>Card 2</th>
                            <th>Card 3</th>
                            <th>Online Transfer</th>
                            <th>Link Pay</th>
                            <th>Due Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- @foreach ($sales_data as $sale) --}}
                        <!-- Data rows will come here -->
                        {{-- @endforeach --}}
                    </tbody>
                    <tfoot style="background-color: #cdd4da; font-weight: bold;">
                        <tr>
                            <td colspan="4" class="text-right">Total</td>
                            <td>0.00</td> <!-- Grand Total Sum -->
                            <td>0.00</td> <!-- Cash Sum -->
                            <td>0.00</td> <!-- Card 1 Sum -->
                            <td>0.00</td> <!-- Card 2 Sum -->
                            <td>0.00</td> <!-- Card 3 Sum -->
                            <td>0.00</td> <!-- Online Sum -->
                            <td>0.00</td> <!-- Link Pay Sum -->
                            <td>0.00</td> <!-- Due Sum -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="container-fluid mt-5">
            <h4 class="mb-3" style="color: #00489f; font-weight: bold;">Credit Sale Collections</h4>
            <div class="table-responsive">
                <table style="border-radius: 15px; background-color: #e0e5ea;" id="credit-collection-table"
                    class="table table-hover">
                    <thead
                        style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
                        <tr>
                            <th>Original Bill Date</th>
                            <th>Reference Number</th>
                            <th>Cashier</th>
                            <th>Customer</th>
                            <th>Grand Total</th>
                            <th>Cash</th>
                            <th>Card 1</th>
                            <th>Card 2</th>
                            <th>Card 3</th>
                            <th>Online Transfer</th>
                            <th>Link Pay</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{-- @foreach ($credit_data as $credit) --}}
                        <!-- Data rows will come here -->
                        {{-- @endforeach --}}
                    </tbody>
                    <tfoot style="background-color: #cdd4da; font-weight: bold;">
                        <tr>
                            <td colspan="4" class="text-right">Total</td>
                            <td>0.00</td> <!-- Grand Total Sum -->
                            <td>0.00</td> <!-- Cash Sum -->
                            <td>0.00</td> <!-- Card 1 Sum -->
                            <td>0.00</td> <!-- Card 2 Sum -->
                            <td>0.00</td> <!-- Card 3 Sum -->
                            <td>0.00</td> <!-- Online Sum -->
                            <td>0.00</td> <!-- Link Pay Sum -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="container-fluid mt-5 mb-5">
            <h4 class="mb-3" style="color: #00489f; font-weight: bold;">Payment Method Summary</h4>
            <div class="table-responsive">
                <table style="border-radius: 15px; background-color: #e0e5ea; width: 60%;" id="summary-table"
                    class="table table-hover">
                    <thead
                        style="border-radius: 50px; background: linear-gradient(to right, #078bce, #1a1d1e); color: white;">
                        <tr>
                            <th>Payment Option</th>
                            <th>Sale Amount</th>
                            <th>Received Amount</th>
                            <th>Total Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Cash</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                        <tr>
                            <td>Card 1</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                        <tr>
                            <td>Card 2</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                        <tr>
                            <td>Card 3</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                        <tr>
                            <td>Online Transfer</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                        <tr>
                            <td>Link Pay</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                    </tbody>
                    <tfoot style="background-color: #cdd4da; font-weight: bold;">
                        <tr>
                            <td class="text-right">Grand Total</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.00</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </section>

    <style>
        .bootstrap-select.form-control,
        .form-control,
        .input-group-text {
            background-color: #fdfdff;
            border-color: #002250;
            border-radius: 15px;
        }

        .btn-primary {
            background-color: #002250;
            border-color: #002250;
            border-radius: 15px;
            padding: 10px 25px;
        }

        .btn-primary:hover {
            background-color: #0068e3;
        }

        .dt-button-collection.dropdown-menu {
            background: #0068e3;
            padding: 10px 15px;
        }

        /* Table Border Radius Fix for Datatables */
        table.dataTable {
            border-collapse: collapse !important;
        }

        .dataTables_wrapper .dt-buttons {
            margin-bottom: 15px;
        }
    </style>

@endsection

@push('scripts')
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Common export buttons configuration
        var exportButtons = [
            {
                extend: 'pdf',
                text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
                exportOptions: { columns: ':visible' }
            },
            {
                extend: 'excel',
                text: '<i title="export to excel" class="dripicons-document-new"></i>',
                exportOptions: { columns: ':visible' }
            },
            {
                extend: 'csv',
                text: '<i title="export to csv" class="fa fa-file-text-o"></i>',
                exportOptions: { columns: ':visible' }
            },
            {
                extend: 'print',
                text: '<i title="print" class="fa fa-print"></i>',
                exportOptions: { columns: ':visible' }
            }
        ];

        // Initialize Sales Table
        $('#sales-table').DataTable({
            "order": [],
            dom: '<"row"lfB>rtip',
            buttons: exportButtons,
            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });

        // Initialize Credit Collection Table
        $('#credit-collection-table').DataTable({
            "order": [],
            dom: '<"row"lfB>rtip',
            buttons: exportButtons,
            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]]
        });

        // Initialize Summary Table (Without pagination/search for cleaner look)
        $('#summary-table').DataTable({
            "order": [],
            dom: '<"row"B>rt',
            buttons: exportButtons,
            "paging": false,
            "searching": false,
            "info": false
        });

    </script>
@endpush