@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-auto">
                    <div class="avatar avatar-xl position-relative">
                        <img src="{{ asset('img/logo-spunindo-tbk.jpg') }}" alt="report icon"
                            class="w-100 border-radius-lg shadow-sm">
                    </div>
                </div>
                <div class="col-auto my-auto">
                    <div class="h-100">
                        <h5 class="mb-1">{{ $title_menu }}</h5>
                        <p class="mb-0 font-weight-bold text-sm">Filter Data</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Tanggal Awal</label>
                                        <input type="date" name="start_date" 
                                               class="form-control @error('start_date') is-invalid @enderror"
                                               value="{{ old('start_date', $default_start) }}" required>
                                        @error('start_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Tanggal Akhir</label>
                                        <input type="date" name="end_date" 
                                               class="form-control @error('end_date') is-invalid @enderror"
                                               value="{{ old('end_date', $default_end) }}" required>
                                        @error('end_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Katering</label>
                                        <select name="id_catering" 
                                                class="form-select @error('id_catering') is-invalid @enderror">
                                            <option value="%%">Semua Katering</option>
                                            @foreach($katerings as $katering)
                                                <option value="{{ $katering->id_catering }}">
                                                    {{ $katering->nama_catering }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_catering')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-bolt me-2"></i>Execute Report
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        // Date range validation
        $('form').on('submit', function(e) {
            const startDate = new Date($('input[name="start_date"]').val());
            const endDate = new Date($('input[name="end_date"]').val());
            
            if (startDate > endDate) {
                e.preventDefault();
                Swal.fire({
                    title: 'Error!',
                    text: 'Tanggal awal tidak boleh lebih besar dari tanggal akhir',
                    icon: 'error'
                });
            }
        });
    });
</script>
@endpush