@extends('layouts.master')
@section('style')
    <style>
         
       #select2-downloadOptions-container .select2-selection__placeholder{
         color: white !important;
       }
        #select2-downloadOptions-container {
            color: white !important;
        }
        #selectyearform .form-select.form-select-solid {
             background-color: #fff !important;
        }
    </style>
@endsection
@section('content')

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div id="kt_content_container" class="container-xxl">
            <div class="flex-lg-row-fluid">
                <div class="d-flex align-items-center pb-7">
                   
                        <h3 class="fw-bold me-5 my-1">Gallons by State
                        </h3>
                        <form action="" method="GET" class="mb-5" id="selectyearform">
                            <div class="me-3" style="margin-top: 10px;display:flex">
                               
                                    <label for="form-label" class="fs-6 form-label fw-bold text-gray-900 me-2 mt-5" style=" width: 160px;">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>
                                    <button type="submit" class="btn btn-primary btn-sm ms-3 mt-1">Generate</button>
                                </div>
                            </div>
                        </form>
                </div>
                <div class="card">
                    <div class="card-body">
                       
                        <div class="row g-5 g-xl-8">
                            <div class="col-xl-3">
                                <a href="javascript:void(0)"
                                    class="card card-xl-stretch mb-xl-8 theme-dark-bg-body quarter1"
                                    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>
                                </a>
                            </div>

                            <div class="col-xl-3">
                                <a href="javascript:void(0)"
                                    class="card card-xl-stretch mb-xl-8 theme-dark-bg-body quarter2"
                                    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>
                                </a>
                            </div>

                            <div class="col-xl-3">
                                <a href="javascript:void(0)"
                                    class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body quarter3"
                                    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>
                                </a>
                            </div>

                            <div class="col-xl-3">
                                <a href="javascript:void(0)" class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body quarter4"
                                    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>
                                </a>
                            </div>
                        </div>
                        <form action="" method="GET">
                            <input type="hidden" name="carrier" value="{{ getAuthMemberId() }}">
                            <div class="row">
                                <div class="col-md-2">
                                    <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="col-md-2">
                                    <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 class="col-md-2">
                                    <label for="UNIT" class="fs-6 form-label fw-bold text-gray-900">Unit</label>
                                    <select name="UNIT" id="UNIT" class="form-select form-select-solid"
                                        data-control="select2" data-hide-search="true" data-placeholder="Select a Unit" multiple>
                                        <option value="">Select Unit</option>
                                        @foreach ($units as $unit)
                                            <option value="{{ $unit }}">
                                                {{ $unit }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 mt-5">
                                    <button type="button" id="submit" class="btn btn-primary btn-sm me-2">Generate
                                        Gallons Report</button>
                                    <button type="button" id="clear"
                                        class="btn btn-primary btn-sm me-2">Clear</button>
                                    <a href="{{ route('ifta.newIndex') }}" class="btn btn-primary btn-sm">Vertical
                                        Layout</a>
                                </div>

                                <div class="col-md-2 mt-5">
                                    <div class="float-end">
                                        <select name="downloadOptions" id="downloadOptions"
                                            class="form-select form-select-solid bg-primary 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>
                        </form>

                        <div class="tab-content mt-5">
                            <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">
                                            {{-- {!! $dataTable->table() !!} --}}
                                            <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>
    </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();
            data.UNIT = $('#UNIT').val();
        });

        $('#submit').on('click', function() {
            table.DataTable().ajax.reload();
            changeExport();
            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');
            $('#UNIT').val([]).trigger('change');
            table.DataTable().ajax.reload();
        });

        $('.quarter1').on('click', function() {
            var year = '{{ request()->has('year') ? request()->get('year') : now()->year }}';
            $('#QUARTER').val('1');
            $('#YEAR').val(year);
            $('#submit').click();
        });

        $('.quarter2').on('click', function() {
            var year = '{{ request()->has('year') ? request()->get('year') : now()->year }}';
            $('#QUARTER').val('2');
            $('#YEAR').val(year);
            $('#submit').click();
        });

        $('.quarter3').on('click', function() {
            var year = '{{ request()->has('year') ? request()->get('year') : now()->year }}';
            $('#QUARTER').val('3');
            $('#YEAR').val(year);
            $('#submit').click();
        });

        $('.quarter4').on('click', function() {
            var year = '{{ request()->has('year') ? request()->get('year') : now()->year }}';
            $('#QUARTER').val('4');
            $('#YEAR').val(year);
            $('#submit').click();
        });
        function changeExport(){
          var value =   $("#downloadOptions").val();
           if(value != "" ){           
             console.log("inside");
            $('#downloadOptions option[value=""]').prop('selected', true);
            $('#downloadOptions').trigger('change');
            //  $("#downloadOptions").val("");
           }
           console.log("outside",value);

        }
    </script>
@endsection()