@extends('admin.layout.dashboard_master')

@section('content')
    <main id="main" class="main">
        <div class="pagetitle">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1>Order Reports</h1>
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                            <li class="breadcrumb-item">Dashboard</li>
                            <li class="breadcrumb-item active">Order Reports</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div><!-- End Page Title -->

        <section class="section">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Generate Order Reports</h5>

                            <form id="reportForm" method="POST" action="{{ route('admin.orders.download.report') }}">
                                @csrf

                                <div class="row g-3 mb-4">
                                    <div class="col-md-4">
                                        <label for="reportType" class="form-label">Report Type</label>
                                        <select class="form-select" id="reportType" name="report_type" required>
                                            <option value="">Select report type...</option>
                                            <option value="koko">KoKo Orders</option>
                                            <option value="mintpay">Mintpay Orders</option>
                                            <option value="cod">COD Orders</option>
                                            <option value="card">Credit/Debit Orders</option>
                                            <option value="all">All Orders</option>
                                        </select>
                                    </div>
                                  <div class="col-md-4">
    <label class="form-label">Date Range</label>
    <div class="row g-2">
        <div class="col-md-6">
            <label for="startDate" class="small text-muted">From</label>
            <input type="date" class="form-control" id="startDate" name="start_date" required>
        </div>
        <div class="col-md-6">
            <label for="endDate" class="small text-muted">To</label>
            <input type="date" class="form-control" id="endDate" name="end_date" required>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.getElementById('reportForm').addEventListener('submit', function(e) {
        const startDate = new Date(document.getElementById('startDate').value);
        const endDate = new Date(document.getElementById('endDate').value);

        if (startDate > endDate) {
            e.preventDefault();
            alert('End date must be after start date');
            return false;
        }
        return true;
    });
</script>
@endpush
                                    <div class="col-md-4">
                                        <label for="format" class="form-label">Format</label>
                                        <select class="form-select" id="format" name="format" required>
                                            <option value="excel" selected>Excel (XLSX)</option>
                                            <option value="csv">CSV</option>

                                        </select>
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-file-earmark-excel me-2"></i> Download Report
                                    </button>
                                </div>
                            </form>

                            <div class="mt-4">
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-2"></i>
                                    Select a date range and report type to generate your customized order report.
                                    Reports will be downloaded in your selected format.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </main><!-- End #main -->

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css">

    <script>
        $(document).ready(function() {
            // Initialize date range picker
            $('#dateRange').daterangepicker({
                opens: 'left',
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD',
                    cancelLabel: 'Clear',
                    applyLabel: 'Apply'
                }
            });

            // Update the display and hidden fields when dates are selected
            $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
                $('#startDate').val(picker.startDate.format('YYYY-MM-DD'));
                $('#endDate').val(picker.endDate.format('YYYY-MM-DD'));
            });

            // Clear the fields when the range is cleared
            $('#dateRange').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('#startDate').val('');
                $('#endDate').val('');
            });

            // Quick download buttons
            $('.download-quick-report').click(function() {
                const reportType = $(this).data('type');
                const days = $(this).data('days');

                // Calculate dates
                const endDate = moment().format('YYYY-MM-DD');
                const startDate = moment().subtract(days, 'days').format('YYYY-MM-DD');

                // Submit form programmatically
                $('<form>', {
                    'action': "{{ route('admin.orders.download.report') }}",
                    'method': 'POST',
                    'target': '_blank'
                })
                .append($('<input>', {
                    'name': '_token',
                    'value': "{{ csrf_token() }}",
                    'type': 'hidden'
                }))
                .append($('<input>', {
                    'name': 'report_type',
                    'value': reportType,
                    'type': 'hidden'
                }))
                .append($('<input>', {
                    'name': 'start_date',
                    'value': startDate,
                    'type': 'hidden'
                }))
                .append($('<input>', {
                    'name': 'end_date',
                    'value': endDate,
                    'type': 'hidden'
                }))
                .append($('<input>', {
                    'name': 'format',
                    'value': 'excel',
                    'type': 'hidden'
                }))
                .appendTo('body')
                .submit()
                .remove();
            });
        });
    </script>
    @endpush

    @push('styles')
    <style>
        .quick-download-card {
            transition: transform 0.3s ease;
            border-radius: 10px;
            border-top: 4px solid #4154f1;
        }
        .quick-download-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .quick-download-card .bi {
            background: rgba(65, 84, 241, 0.1);
            padding: 15px;
            border-radius: 50%;
        }
        .quick-download-card:nth-child(1) .bi {
            color: #4154f1;
            background: rgba(65, 84, 241, 0.1);
        }
        .quick-download-card:nth-child(2) .bi {
            color: #2eca6a;
            background: rgba(46, 202, 106, 0.1);
        }
        .quick-download-card:nth-child(3) .bi {
            color: #ff771d;
            background: rgba(255, 119, 29, 0.1);
        }
        .quick-download-card:nth-child(4) .bi {
            color: #00b9ff;
            background: rgba(0, 185, 255, 0.1);
        }
    </style>
    @endpush
@endsection