@extends('backEnd.layouts.master')
@section('title', 'Daily Sales & Expense Reports')

@push('styles')
@include('backEnd.reports.partials.report-styles')
<style>
.rp-exp-cat-breakdown { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-exp-cat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    font-size: 12px; text-decoration: none; color: #374151;
}
.rp-exp-cat-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.rp-exp-cat-chip.is-active { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; font-weight: 700; }
</style>
@endpush

@section('content')
@php
    $exportParams = request()->only(['from_date','to_date','from','to','search','sales_basis','result_filter','approved_by','payment_method','courier_type','district','order_source','expense_category_id']);
    $activeExpenseCategory = isset($filters['expense_category_id']) && $filters['expense_category_id'] !== ''
        ? (int) $filters['expense_category_id']
        : null;
    $todayStr = now()->format('Y-m-d');
    $yesterdayStr = now()->copy()->subDay()->format('Y-m-d');
    $last7From = now()->copy()->subDays(6)->format('Y-m-d');
    $thisMonthFrom = now()->startOfMonth()->format('Y-m-d');
    $lastMonthFrom = now()->copy()->subMonth()->startOfMonth()->format('Y-m-d');
    $lastMonthTo = now()->copy()->subMonth()->endOfMonth()->format('Y-m-d');
    $last90From = now()->copy()->subDays(89)->format('Y-m-d');

    $activePreset = '';
    if ($from === $to && $from === $todayStr) $activePreset = 'today';
    elseif ($from === $to && $from === $yesterdayStr) $activePreset = 'yesterday';
    elseif ($from === $last7From && $to === $todayStr) $activePreset = 'last7';
    elseif ($from === $thisMonthFrom && $to === $todayStr) $activePreset = 'this_month';
    elseif ($from === $lastMonthFrom && $to === $lastMonthTo) $activePreset = 'last_month';
    elseif ($from === $last90From && $to === $todayStr) $activePreset = 'last90';
@endphp

<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h4 class="rp-page-title mb-0">Daily Sales & Expense Reports</h4>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.reports.sales', array_merge($exportParams, ['export' => 'excel'])) }}"
               class="btn btn-success btn-sm rp-export-btn">
                <i class="fas fa-file-excel me-1"></i> Excel
            </a>
            <a href="{{ route('admin.reports.sales', array_merge($exportParams, ['export' => 'csv'])) }}"
               class="btn btn-success btn-sm rp-export-btn">
                <i class="fas fa-file-csv me-1"></i> CSV
            </a>
        </div>
    </div>

    <div class="rp-filter-card mb-3">
        <form method="GET" action="{{ route('admin.reports.sales') }}" id="salesReportFilterForm" class="row g-2 align-items-end">
            <div class="col-12">
                <div class="rp-date-presets">
                    <span class="rp-date-presets-label"><i class="fas fa-calendar-alt me-1"></i>Quick Date:</span>
                    <button type="button" class="rp-preset-btn {{ $activePreset === 'today' ? 'is-active' : '' }}" data-preset="today">Today</button>
                    <button type="button" class="rp-preset-btn {{ $activePreset === 'yesterday' ? 'is-active' : '' }}" data-preset="yesterday">Yesterday</button>
                    <button type="button" class="rp-preset-btn {{ $activePreset === 'last7' ? 'is-active' : '' }}" data-preset="last7">Last 7 Days</button>
                    <button type="button" class="rp-preset-btn {{ $activePreset === 'this_month' ? 'is-active' : '' }}" data-preset="this_month">This Month</button>
                    <button type="button" class="rp-preset-btn {{ $activePreset === 'last_month' ? 'is-active' : '' }}" data-preset="last_month">Last Month</button>
                    <button type="button" class="rp-preset-btn {{ $activePreset === 'last90' ? 'is-active' : '' }}" data-preset="last90">Last 90 Days</button>
                </div>
            </div>

            <div class="col-md-4">
                <label class="form-label small fw-semibold mb-1">Custom Date Range</label>
                <div class="rp-date-range-wrap">
                    <div class="rp-date-field">
                        <input type="date" name="from_date" id="salesFromDate" class="form-control form-control-sm" value="{{ $from }}">
                    </div>
                    <span class="text-muted small pb-1">to</span>
                    <div class="rp-date-field">
                        <input type="date" name="to_date" id="salesToDate" class="form-control form-control-sm" value="{{ $to }}">
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Sales Basis</label>
                <select name="sales_basis" class="form-select form-select-sm rp-auto-filter">
                    <option value="delivered" {{ ($filters['sales_basis'] ?? 'delivered') === 'delivered' ? 'selected' : '' }}>Delivered Sales</option>
                    <option value="placed" {{ ($filters['sales_basis'] ?? '') === 'placed' ? 'selected' : '' }}>Placed Orders</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Result</label>
                <select name="result_filter" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Days</option>
                    <option value="profit" {{ ($filters['result_filter'] ?? '') === 'profit' ? 'selected' : '' }}>Profit Days Only</option>
                    <option value="loss" {{ ($filters['result_filter'] ?? '') === 'loss' ? 'selected' : '' }}>Loss Days Only</option>
                    <option value="break_even" {{ ($filters['result_filter'] ?? '') === 'break_even' ? 'selected' : '' }}>Break Even</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Approved By</label>
                <select name="approved_by" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Users</option>
                    <option value="none" {{ ($filters['approved_by'] ?? '') === 'none' ? 'selected' : '' }}>Not Approved</option>
                    @foreach($filterOptions['approvers'] as $user)
                    <option value="{{ $user->id }}" {{ (string) ($filters['approved_by'] ?? '') === (string) $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Payment</label>
                <select name="payment_method" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Payment</option>
                    @foreach($filterOptions['payments'] as $payment)
                    <option value="{{ $payment }}" {{ ($filters['payment_method'] ?? '') === $payment ? 'selected' : '' }}>{{ strtoupper($payment) }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Courier</label>
                <select name="courier_type" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Courier</option>
                    @foreach($filterOptions['couriers'] as $courier)
                    <option value="{{ $courier }}" {{ ($filters['courier_type'] ?? '') === $courier ? 'selected' : '' }}>
                        {{ \App\Models\CourierApi::displayName($courier) }}
                    </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">District</label>
                <select name="district" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All District</option>
                    @foreach($filterOptions['districts'] as $district)
                    <option value="{{ $district }}" {{ ($filters['district'] ?? '') === $district ? 'selected' : '' }}>{{ $district }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Source</label>
                <select name="order_source" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Source</option>
                    @foreach(\App\Models\Order::sourceOptions() as $key => $meta)
                    <option value="{{ $key }}" {{ ($filters['order_source'] ?? '') === $key ? 'selected' : '' }}>{{ $meta['label'] }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Expense Category</label>
                <select name="expense_category_id" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Expenses</option>
                    <option value="0" {{ $activeExpenseCategory === 0 ? 'selected' : '' }}>Uncategorized</option>
                    @foreach($expenseCategories->where('status', true) as $cat)
                    <option value="{{ $cat->id }}" {{ $activeExpenseCategory === $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label small fw-semibold mb-1">Search Date</label>
                <div class="live-search-wrap">
                    <input type="text" name="search" value="{{ $filters['search'] ?? '' }}"
                           class="form-control form-control-sm live-search-input"
                           placeholder="e.g. May 2026, 27 May…"
                           autocomplete="off">
                </div>
            </div>

            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-sm px-3"><i class="fas fa-filter me-1"></i>Filter</button>
                <a href="{{ route('admin.reports.sales') }}" class="btn btn-secondary btn-sm px-3 ms-1">Reset</a>
            </div>
        </form>
        <div class="small text-muted mt-2">
            Delivered Sales = delivered order amount | Placed Orders = created order amount | Dropdown auto-apply | Date search live filter
        </div>
    </div>

    <div id="liveSearchResults">
        @include('backEnd.reports.partials.sales-report-results')
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    function fmtDate(d) {
        var y = d.getFullYear();
        var m = String(d.getMonth() + 1).padStart(2, '0');
        var day = String(d.getDate()).padStart(2, '0');
        return y + '-' + m + '-' + day;
    }

    function presetRange(preset) {
        var now = new Date();
        var today = fmtDate(now);
        var from = today;
        var to = today;

        if (preset === 'today') {
            from = to = today;
        } else if (preset === 'yesterday') {
            var y = new Date(now);
            y.setDate(y.getDate() - 1);
            from = to = fmtDate(y);
        } else if (preset === 'last7') {
            var w = new Date(now);
            w.setDate(w.getDate() - 6);
            from = fmtDate(w);
            to = today;
        } else if (preset === 'this_month') {
            from = fmtDate(new Date(now.getFullYear(), now.getMonth(), 1));
            to = today;
        } else if (preset === 'last_month') {
            var start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
            var end = new Date(now.getFullYear(), now.getMonth(), 0);
            from = fmtDate(start);
            to = fmtDate(end);
        } else if (preset === 'last90') {
            var d90 = new Date(now);
            d90.setDate(d90.getDate() - 89);
            from = fmtDate(d90);
            to = today;
        }

        return { from: from, to: to };
    }

    var form = document.getElementById('salesReportFilterForm');
    if (!form) return;

    var fromInput = document.getElementById('salesFromDate');
    var toInput = document.getElementById('salesToDate');

    document.querySelectorAll('.rp-preset-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var range = presetRange(btn.getAttribute('data-preset'));
            fromInput.value = range.from;
            toInput.value = range.to;
            document.querySelectorAll('.rp-preset-btn').forEach(function (b) { b.classList.remove('is-active'); });
            btn.classList.add('is-active');
            if (form.requestSubmit) form.requestSubmit(); else form.submit();
        });
    });

    [fromInput, toInput].forEach(function (input) {
        input.addEventListener('change', function () {
            document.querySelectorAll('.rp-preset-btn').forEach(function (b) { b.classList.remove('is-active'); });
        });
    });

    form.querySelectorAll('.rp-auto-filter').forEach(function (select) {
        select.addEventListener('change', function () {
            if (form.requestSubmit) form.requestSubmit(); else form.submit();
        });
    });
})();
</script>
@endpush