@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-4">
        <!-- අලුතෙන් දාපු Single Export Buttons ටික -->
        <div class="row mb-3">
            <div class="col-md-12 text-right">
                <button class="btn btn-danger" onclick="exportFullReport('pdf')" style="border-radius: 10px;">
                    <i class="fa fa-file-pdf-o"></i> Export PDF
                </button>
                <button class="btn btn-success" onclick="exportFullReport('excel')" style="border-radius: 10px;">
                    <i class="dripicons-document-new"></i> Export Excel
                </button>
                <button class="btn btn-info" onclick="exportFullReport('csv')" style="border-radius: 10px;">
                    <i class="fa fa-file-text-o"></i> Export CSV
                </button>
                <button class="btn btn-secondary" onclick="window.print()" style="border-radius: 10px;">
                    <i class="fa fa-print"></i> Print Report
                </button>
            </div>
        </div>

        <!-- Sales Table -->
        <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;" class="table table-hover table-bordered">
                <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>
                        <td>0.00</td>
                        <td>0.00</td>
                        <td>0.00</td>
                        <td>0.00</td>
                        <td>0.00</td>
                        <td>0.00</td>
                        <td>0.00</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="container-fluid mt-5">
        <!-- Credit Sale Collections Table -->
        <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;" class="table table-hover table-bordered">
                <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>
                        @foreach ($paymentOptions as $option)
                        <th>{{ $option->name }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach ($creditCollections as $row)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($row['date'])->format('Y-m-d') }}</td>
                        <td>{{ $row['reference'] }}</td>
                        <td>{{ $row['cashier'] }}</td>
                        <td>{{ $row['customer'] }}</td>
                        <td>{{ number_format($row['grand_total'], 2) }}</td>
                        @foreach ($paymentOptions as $option)
                        <td>{{ number_format($row['methods'][$option->id] ?? 0, 2) }}</td>
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
                <tfoot style="background-color: #cdd4da; font-weight: bold;">
                    <tr>
                        <td colspan="4" class="text-right">Total</td>
                        <td>0.00</td>
                        @foreach ($paymentOptions as $option)
                        <td>0.00</td>
                        @endforeach
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="container-fluid mt-5 mb-5">
        <!-- Payment Method Summary Table -->
        <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%;"
                class="table table-hover table-bordered">
                <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;
    }

    table {
        border-collapse: collapse !important;
    }
</style>

@endsection

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

    // මුළු රිපෝට් එකම එක්ස්පෝර්ට් කරන්න හදපු Function එක
    function exportFullReport(exportType) {
        var selectedDate = $('#report_date').val();

        // ඔයාගේ Controller එකේ export route එකට මේක හරවන්න ඕනේ.
        // උදාහරණයක් විදිහට: url('/dailysalepaymentreportmodule/export')
        var exportUrl = "{{ url('/dailysalepaymentreportmodule/export') }}" + "?date=" + selectedDate + "&type=" + exportType;

        window.location.href = exportUrl;
    }
</script>
@endpush