@extends('layouts.master')

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class=" container-xxl ">
            <form action="" method="GET" class="mb-5">
                <div class="row">
                    <div class="col-md-2">
                        <label for="form-label" class="fs-6 form-label fw-bold text-gray-900">Select Year</label>
                        @php
                            $startYear = 2014;
                            $currentYear = date('Y');
                            $yearRange = range($startYear, $currentYear + 1);
                            $yearRange = array_reverse($yearRange);
                        @endphp

                        <select name="year" id="year" class="form-select form-select-solid"
                            data-control="select2" data-hide-search="true" data-placeholder="Select a Year">
                            <option value="">Select Year</option>
                            @foreach ($yearRange as $year)
                                @php $selecttoYear = !empty(request()->get('year')) ? request()->get('year') : $currentYear; @endphp
                                <option value="{{ $year }}"
                                    {{ $selecttoYear == $year ? 'selected' : '' }}>
                                    {{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mt-5">
                        <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                    </div>
                </div>
            </form>
            <div class="row g-5 g-xl-8">
                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #F7D9E3">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">Q1 <span
                                        class="text-gray-900 fw-bold fs-5">(January- March)</span><br>
                                    <div class="text-gray-900 fw-bold fs-3"><span class="text-gray-900 fw-bold fs-5">Due
                                            Date : April 30</span></div>
                                </div>
                            </div>
                            <div class="">
                                <span class="fw-bold fs-4 me-2 lh-0 text-gray-900">Total Gallons : </span>
                                <span
                                    class="fw-bold fs-4 me-2 lh-0 text-gray-900">{{ number_format($q1Gallons, 2) }}</span><br>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-xl-8 theme-dark-bg-body" style="background-color: #CBF0F4">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">Q2 <span
                                        class="text-gray-900 fw-bold fs-5">(April - June)</span><br>
                                    <div class="text-gray-900 fw-bold fs-3"><span class="text-gray-900 fw-bold fs-5">Due
                                            Date : July 31</span></div>
                                </div>
                            </div>

                            <div class="">
                                <span class="fw-bold fs-4 me-2 lh-0 text-gray-900">Total Gallons : </span>
                                <span
                                    class="fw-bold fs-4 me-2 lh-0 text-gray-900">{{ number_format($q2Gallons, 2) }}</span><br>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #CBD4F4">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">Q3 <span
                                        class="text-gray-900 fw-bold fs-5">(July - September)</span><br>
                                <div class="text-gray-900 fw-bold fs-3"><span class="text-gray-900 fw-bold fs-5">Due
                                        Date : October 31</span></div>
                                </div>
                            </div>

                            <div class="">
                                <span class="fw-bold fs-4 me-2 lh-0 text-gray-900">Total Gallons : </span>
                                <span
                                    class="fw-bold fs-4 me-2 lh-0 text-gray-900">{{ number_format($q3Gallons, 2) }}</span><br>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3">
                    <div class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex flex-column flex-grow-1 mb-5">
                                <div class="text-gray-900 fw-bold fs-3">Q4 <span
                                        class="text-gray-900 fw-bold fs-5">(October - December)</span><br>
                                <div class="text-gray-900 fw-bold fs-3"><span class="text-gray-900 fw-bold fs-5">Due
                                        Date : January 31</span></div>
                                </div>
                            </div>

                            <div class="">
                                <span class="fw-bold fs-4 me-2 lh-0 text-gray-900">Total Gallons : </span>
                                <span
                                    class="fw-bold fs-4 me-2 lh-0 text-gray-900">{{ number_format($q4Gallons, 2) }}</span><br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xxl-250px mb-8 mb-lg-0 me-lg-4 me-5">
                    <form action="#">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-5">
                                    <label for="QUARTER" class="fs-6 form-label fw-bold text-gray-900">Quarter</label>
                                    <select name="QUARTER" id="QUARTER" class="form-select form-select-solid"
                                        data-control="select2" data-hide-search="true" data-placeholder="Select a Quarter">
                                        <option value="">Select Quarter</option>
                                        <option value="1">
                                            Q1</option>
                                        <option value="2">
                                            Q2</option>
                                        <option value="3">
                                            Q3</option>
                                        <option value="4">
                                            Q4</option>
                                    </select>
                                </div>

                                <div class="mb-5">
                                    <label for="form-label" class="fs-6 form-label fw-bold text-gray-900">Year</label><br>
                                    @php
                                        $startYear = 2014;
                                        $currentYear = date('Y');
                                        $yearRange = range($startYear, $currentYear + 1);
                                        $yearRange = array_reverse($yearRange);
                                    @endphp

                                    <select name="YEAR" id="YEAR" class="form-select form-select-solid"
                                        data-control="select2" data-hide-search="true" data-placeholder="Select a Year">
                                        <option value="">Select Year</option>
                                        @foreach ($yearRange as $year)
                                            <option value="{{ $year }}">
                                                {{ $year }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="d-flex mt-5 mb-5" style="margin: 0 auto; !important">
                                <button type="button" id="submit" class="btn btn-primary me-5">Search</button>
                                <button type="button" id="clear" class="btn btn-primary me-5">Clear</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="flex-lg-row-fluid">
                    <div class="d-flex flex-wrap flex-stack mb-5">
                        <div class="d-flex flex-wrap align-items-center my-1">
                            <h3 class="fw-bold me-5 my-1">Gallons by State
                            </h3>
                        </div>
                        <a href="{{ route('ifta.index') }}" class="btn btn-primary btn-sm">Horizontal Layout</a>
                        <div class="float-end">
                            <select name="downloadOptions" id="downloadOptions"
                                class="form-select form-select-solid form-select-sm" data-control="select2"
                                data-hide-search="true" data-placeholder="Export">
                                <option value="">Export</option>
                                <option value="excel">Excel</option>
                                <option value="csv">CSV</option>
                                <option value="print">Print</option>
                                <option value="reset">Reset</option>
                                <option value="reload">Reload</option>
                            </select>
                        </div>
                    </div>

                    <div class="tab-content">
                        <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                            <div class="card card-flush">
                                <div class="pt-0">
                                    <div class="table-responsive p-5">
                                        <table id="ifta-table" class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable">
                                            <thead class="thead-bg-color">
                                               <tr>
                                                    <th class="fs-7 text-gray-500 text-uppercase">STATE</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">GALLONS</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">QUARTER</th>
                                                    <th class="fs-7 text-gray-500 text-uppercase">YEAR</th>
                                               </tr>
                                            </thead>
                                            <tfoot align="right">
                                                <tr>
                                                <th>Total : </th>
                                                <th id="displayTotal">$ 0.00</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    {!! $dataTable->scripts() !!}
    <script>
        const table = $('#ifta-table');

        table.on('preXhr.dt', function(e, setting, data) {
            data.QUARTER = $('#QUARTER').val();
            data.YEAR = $('#YEAR').val();
        });

        $('#submit').on('click', function() {
            table.DataTable().ajax.reload();
            return false;
        });

        $('#downloadOptions').on('change', function() {
            var downloadOptions = this.value;
            $(".buttons-" + downloadOptions).click();
        });

        $('#clear').on('click', function() {
            $('#QUARTER').val([]).trigger('change');
            $('#YEAR').val([]).trigger('change');
            table.DataTable().ajax.reload();
        });
    </script>
@endsection()