@extends('master.back')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/back/css/datepicker.css') }}">
@endsection
@section('content')
    <style>
        .grid-templete {
            display: grid;
            grid-template-columns: auto auto auto;
            padding: 2%;
            background-color: white;
        }
    </style>
    <!-- Start of Main Content -->
    <div class="container-fluid">

        <!-- Page Heading -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="d-sm-flex align-items-center justify-content-between">

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

        <!-- DataTales -->
        <div class="card shadow mb-4">
            <div class="card-body">
                @include('alerts.alerts')
                <form action="{{ route('back.order.report.csv') }}" method="GET">
                    <div class="row mb-4 justify-content-center">
                        <!-- Filter By: Day, Month, Year -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3">
                            <label for="filter_type">{{ __('Filter By') }} *</label>
                            <select id="filter_type" name="filter_type" class="form-control" onchange="showFilterOptions()">
                                <option value="day">{{ __('Day') }}</option>
                                <option value="month">{{ __('Month') }}</option>
                                <option value="year">{{ __('Year') }}</option>
                            </select>
                        </div>

                        <!-- Start Date - Day -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3" id="start_day_container" style="display: block;">
                            <label for="start_day">{{ __('Start Day') }} *</label>
                            <select name="start_day" id="start_day" class="form-control">
                                @for ($i = 1; $i <= 31; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>

                        <!-- Start Date - Month -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3" id="start_month_container" style="display: none;">
                            <label for="start_month">{{ __('Start Month') }} *</label>
                            <select name="start_month" id="start_month" class="form-control">
                                @foreach (['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'] as $key => $month)
                                    <option value="{{ $key + 1 }}">{{ $month }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Start Date - Year -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3" id="start_year_container" style="display: none;">
                            <label for="start_year">{{ __('Start Year') }} *</label>
                            <select name="start_year" id="start_year" class="form-control">
                                @for ($i = 2020; $i <= date('Y'); $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>

                        <!-- End Date - Day -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3" id="end_day_container" style="display: block;">
                            <label for="end_day">{{ __('End Day') }} *</label>
                            <select name="end_day" id="end_day" class="form-control">
                                @for ($i = 1; $i <= 31; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>

                        <!-- End Date - Month -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3" id="end_month_container" style="display: none;">
                            <label for="end_month">{{ __('End Month') }} *</label>
                            <select name="end_month" id="end_month" class="form-control">
                                @foreach (['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'] as $key => $month)
                                    <option value="{{ $key + 1 }}">{{ $month }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- End Date - Year -->
                        <div class="col-md-4 col-sm-4 col-lg-3 mb-3" id="end_year_container" style="display: none;">
                            <label for="end_year">{{ __('End Year') }} *</label>
                            <select name="end_year" id="end_year" class="form-control">
                                @for ($i = 2020; $i <= date('Y'); $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>

                        <!-- Report Type -->
                        <div class="col-md-6 col-sm-6 col-lg-4 mb-3">
                            <div class="form-group p-0">
                                <label for="type">{{ __('Type') }} *</label>
                                <select name='type' class='form-control'>
                                    <option value="1"> {{ __('สินค้าขายดี') }} </option>
                                    <option value="2"> {{ __('สินค้าที่ส่งมอบสำเร็จ') }} </option>
                                    <option value="3"> {{ __('รายชื่อผู้ใช้ใหม่') }} </option>
                                    <option value="4"> {{ __('ลูกค้าที่มียอดคำสั่งซื้อเยอะ') }} </option>
                                    <option value="5"> {{ __('ยอดขาย Brand') }} </option>
                                    <option value="6"> {{ __('Daily Report') }} </option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <br>
                    <button class="btn btn-success" type="submit">{{ __('Report') }}</button>
                </form>
            </div>
        </div>


    </div>
@endsection