@extends('layout.super-admin-app')

@section('title', 'Super Admin - Sales Report')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <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/datatables/buttons/dataTables.bs5-custom.css') }}">
    <style>
        .kpi-card {
            border: 1px solid #e9ecef;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            transition: transform 0.2s;
        }
        .kpi-card:hover {
            transform: translateY(-2px);
        }
        .kpi-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .table td {
            vertical-align: middle;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('super-admin.dashboard') }}"><i class="ri-home-8-line"></i> Dashboard</a>
        </li>
        <li class="breadcrumb-item">
            <a href="javascript:void(0);">Reports</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Sales Report
        </li>
    </ol>
</div>

<div class="app-body">
    <!-- Top Statistics / KPI Cards -->
    <div class="row gx-3 mb-3">
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-primary-subtle text-primary me-3">
                        <i class="ri-shopping-cart-2-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Total Subscriptions</span>
                        <h4 class="mb-0 fw-bold text-dark" id="kpiSalesCount">0</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-info-subtle text-info me-3">
                        <i class="ri-price-tag-3-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Gross Sales</span>
                        <h4 class="mb-0 fw-bold text-info" id="kpiGrossSales">₹0.00</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-danger-subtle text-danger me-3">
                        <i class="ri-coupon-3-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Total Discounts</span>
                        <h4 class="mb-0 fw-bold text-danger" id="kpiDiscount">₹0.00</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-12">
            <div class="card kpi-card bg-white p-3">
                <div class="d-flex align-items-center">
                    <div class="kpi-icon bg-success-subtle text-success me-3">
                        <i class="ri-funds-line"></i>
                    </div>
                    <div>
                        <span class="text-muted small text-uppercase fw-semibold">Net Sales Revenue</span>
                        <h4 class="mb-0 fw-bold text-success" id="kpiNetSales">₹0.00</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Row (Matching Project Report Pattern) -->
    <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" placeholder="DD-MM-YYYY">
        </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" placeholder="DD-MM-YYYY">
        </div>
        <div class="col-sm-4">
            <label class="form-label" for="plan_id">Filter by Plan</label>
            <select id="plan_id" class="form-control select2">
                <option value="">-- All Plans --</option>
                @foreach($plans as $plan)
                    <option value="{{ $plan->id }}">{{ $plan->name }} (₹{{ number_format($plan->price, 2) }})</option>
                @endforeach
            </select>
        </div>

        <!-- Data Table Container -->
        <div class="col-sm-12 mt-3">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="salesTable" class="table table-striped table-bordered align-middle m-0" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Sale Date</th>
                                    <th>Invoice #</th>
                                    <th>Customer</th>
                                    <th>Plan Name</th>
                                    <th>Billing Cycle</th>
                                    <th>Limits</th>
                                    <th>Base Price</th>
                                    <th>Discount</th>
                                    <th>Net Sales (₹)</th>
                                    <th>Valid Till</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></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/datatables/buttons/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/jszip.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/datatables/buttons/buttons.print.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $(".select2").select2();

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

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

            $('#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':
                        $('#from_date').val('');
                        $('#to_date').val('');
                        table.draw();
                        return;
                    default:
                        return;
                }
                
                if (start && end) {
                    if ($('#from_date').data('daterangepicker')) {
                        $('#from_date').data('daterangepicker').setStartDate(start);
                        $('#from_date').data('daterangepicker').setEndDate(start);
                    }
                    $('#from_date').val(start.format('DD-MM-YYYY'));

                    if ($('#to_date').data('daterangepicker')) {
                        $('#to_date').data('daterangepicker').setStartDate(end);
                        $('#to_date').data('daterangepicker').setEndDate(end);
                    }
                    $('#to_date').val(end.format('DD-MM-YYYY'));
                }
                
                table.draw();
            });

            $('#plan_id').on('change', function() {
                table.draw();
            });

            var table = $('#salesTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                dom: 'Bfrtip',
                buttons: [
                    { extend: 'excel', text: '<i class="ri-file-excel-line me-1"></i> Excel', className: 'btn btn-sm btn-success' },
                    { extend: 'print', text: '<i class="ri-printer-line me-1"></i> Print', className: 'btn btn-sm btn-secondary' }
                ],
                ajax: {
                    url: '{{ route("super-admin.reports.sales.getData") }}',
                    data: function(d) {
                        d.from_date = $('#from_date').val() ? moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD") : '';
                        d.to_date = $('#to_date').val() ? moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD") : '';
                        d.plan_id = $('#plan_id').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'date', name: 'start_date' },
                    { data: 'invoice_no', name: 'invoice_no' },
                    { data: 'customer', name: 'tenant.company_name' },
                    { data: 'plan_name', name: 'plan_name' },
                    { data: 'billing_cycle', name: 'billing_cycle' },
                    { data: 'features', name: 'vehicle_limit', orderable: false, searchable: false },
                    { data: 'plan_price', name: 'plan_price' },
                    { data: 'discount', name: 'discount_amount' },
                    { data: 'final_amount', name: 'final_amount' },
                    { data: 'validity', name: 'expires_at' }
                ],
                drawCallback: function(settings) {
                    var json = settings.json;
                    if (json) {
                        $('#kpiSalesCount').text(json.totalSalesCount || '0');
                        $('#kpiGrossSales').text(json.totalGrossSales || '₹0.00');
                        $('#kpiDiscount').text(json.totalDiscount || '₹0.00');
                        $('#kpiNetSales').text(json.totalNetSales || '₹0.00');
                    }
                }
            });
        });
    </script>
@endpush