@extends('backEnd.layouts.master')
@section('title', 'Order Reports')

@push('styles')
@include('backEnd.reports.partials.report-styles')
<style>
.rp-order-link { color: inherit; text-decoration: none; font-weight: 700; }
.rp-order-link:hover { color: #2563eb; }
.rp-approved-by { font-weight: 600; color: #111827; }
.rp-approved-at { font-size: 11px; color: #6b7280; }
.rp-date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e5e7eb;
}
.rp-date-presets-label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    margin-right: 4px;
}
.rp-preset-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}
.rp-preset-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}
.rp-preset-btn.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.rp-date-range-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
}
.rp-date-field { min-width: 150px; }
</style>
@endpush

@section('content')
<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">Order Reports</h4>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.reports.orders', array_merge(request()->only(['from_date','to_date','search','status','approved_by','payment_method','courier_type','district','fulfillment_stage','order_source']), ['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.orders', array_merge(request()->only(['from_date','to_date','search','status','approved_by','payment_method','courier_type','district','fulfillment_stage','order_source']), ['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">
        @php
            $todayStr = now()->format('Y-m-d');
            $yesterdayStr = now()->subDay()->format('Y-m-d');
            $last7From = now()->subDays(6)->format('Y-m-d');
            $thisMonthFrom = now()->startOfMonth()->format('Y-m-d');
            $lastMonthFrom = now()->subMonth()->startOfMonth()->format('Y-m-d');
            $lastMonthTo = now()->subMonth()->endOfMonth()->format('Y-m-d');
            $last90From = now()->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

        <form method="GET" action="{{ route('admin.reports.orders') }}" id="orderReportFilterForm" 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="reportFromDate" class="form-control form-control-sm" value="{{ $from }}" title="From Date">
                    </div>
                    <span class="text-muted small pb-1">to</span>
                    <div class="rp-date-field">
                        <input type="date" name="to_date" id="reportToDate" class="form-control form-control-sm" value="{{ $to }}" title="To Date">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-semibold mb-1">Status</label>
                <select name="status" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Status</option>
                    @foreach([0=>'Pending',1=>'Confirmed',2=>'Processing',3=>'Shipped',4=>'Delivered',5=>'Cancelled',6=>'Returned'] as $code => $label)
                    <option value="{{ $code }}" {{ ($filters['status'] ?? null) === $code ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </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 / Unknown</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">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">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">Fulfillment</label>
                <select name="fulfillment_stage" class="form-select form-select-sm rp-auto-filter">
                    <option value="">All Stage</option>
                    @foreach($filterOptions['fulfillmentStages'] as $stage)
                    <option value="{{ $stage }}" {{ ($filters['fulfillment_stage'] ?? '') === $stage ? 'selected' : '' }}>{{ ucwords(str_replace('_', ' ', $stage)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small fw-semibold mb-1">Search (text)</label>
                <input type="text" name="search" value="{{ $filters['search'] ?? '' }}"
                       class="form-control form-control-sm"
                       placeholder="Order #, customer, phone, tracking…"
                       autocomplete="off">
            </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.orders') }}" class="btn btn-secondary btn-sm px-3 ms-1">Reset</a>
            </div>
        </form>
        <div class="small text-muted mt-2">
            Dropdown দিয়ে filter করুন (auto apply) — Approved By, Payment, Courier, District, Fulfillment | Text search: Search বাটন চাপুন
        </div>
    </div>

    <div id="liveSearchResults">
        @include('backEnd.reports.partials.order-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('orderReportFilterForm');
    if (!form) return;

    var fromInput = document.getElementById('reportFromDate');
    var toInput = document.getElementById('reportToDate');

    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