@extends('layouts.master')
@section('style')
    <style>
        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
            color: white !important;
        }

        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__rendered {
            color: white !important;
        }
    </style>
    @section('style')
    <style>
         
       #select2-downloadOptions-container {
         color: white !important;
       }
        #select2-downloadOptions-container {
            color: white !important;
        }
    </style>
@endsection
@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 flex-wrap flex-stack pb-7">
                    <div class="d-flex flex-wrap align-items-center my-1">
                        <h3 class="fw-bold me-5 my-1">Miles
                        </h3>
                    </div>
                </div>
                <div class="card mb-7" data-select2-id="select2-data-144-uoh6">
                        <div class="card-body" data-select2-id="select2-data-143-nqr2">
                <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">Generate</button>
                                </div>
                            </div>
                        </form>
                <form action="{{ route('ifta.miles.multipleDelete') }}" method="GET" onsubmit="return validateForm()">
                    
                        <div class="col-xxl-12">                                  
                                    <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 Miles : </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 Miles : </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 Miles : </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 Miles : </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>        
                            </div>
                            <div class="d-flex align-items-center mb-5">
                                <div class="row g-12" data-select2-id="select2-data-142-0d2j">
                                    <div class="col-xxl-12">
                                        <div class="row g-12 me-10">
                                            <div class="col-lg-3 mt-2">
                                                <label class="fs-6 form-label fw-bold text-gray-900">State</label>
                                                <select class="form-select form-control form-control-solid"
                                                    data-control="select2" data-hide-search="true"
                                                    data-placeholder="Select a State" name="STATE" id="STATE">
                                                    <option value="">Select State</option>
                                                    @php
                                                        $states = [
                                                            'AL',
                                                            'AK',
                                                            'AZ',
                                                            'AR',
                                                            'CA',
                                                            'CO',
                                                            'CT',
                                                            'DE',
                                                            'FL',
                                                            'GA',
                                                            'HI',
                                                            'ID',
                                                            'IL',
                                                            'IN',
                                                            'IA',
                                                            'KS',
                                                            'KY',
                                                            'LA',
                                                            'ME',
                                                            'MD',
                                                            'MA',
                                                            'MI',
                                                            'MN',
                                                            'MS',
                                                            'MO',
                                                            'MT',
                                                            'NE',
                                                            'NV',
                                                            'NH',
                                                            'NJ',
                                                            'NM',
                                                            'NY',
                                                            'NC',
                                                            'ND',
                                                            'OH',
                                                            'OK',
                                                            'OR',
                                                            'PA',
                                                            'RI',
                                                            'SC',
                                                            'SD',
                                                            'TN',
                                                            'TX',
                                                            'UT',
                                                            'VT',
                                                            'VA',
                                                            'WA',
                                                            'WV',
                                                            'WI',
                                                            'WY',
                                                        ];
                                                    @endphp

                                                    @foreach ($states as $state)
                                                        <option value="{{ $state }}">{{ $state }}</option>
                                                    @endforeach()
                                                </select>
                                            </div>
                                            <div class="col-lg-3 mt-2">
                                                <label class="fs-6 form-label fw-bold text-gray-900">Quarter</label>
                                                <select class="form-select form-control form-control-solid"
                                                    data-control="select2" data-hide-search="true"
                                                    data-placeholder="Select a Quarter" name="QUARTER" id="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-lg-3 mt-2">
                                                <label class="fs-6 form-label fw-bold text-gray-900">Year</label>
                                                <select class="form-select form-control form-control-solid"
                                                    data-control="select2" data-hide-search="true"
                                                    data-placeholder="Select a Year" name="YEAR" id="YEAR">
                                                    <option value="">Select Year</option>
                                                    @php
                                                        $startYear = 2014;
                                                        $currentYear = date('Y');
                                                        $yearRange = range($startYear, $currentYear + 1);
                                                        $yearRange = array_reverse($yearRange);
                                                    @endphp
                                                    @foreach ($yearRange as $year)
                                                        <option value="{{ $year }}">{{ $year }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-lg-3 mt-2">
                                                <label class="fs-6 form-label fw-bold text-gray-900">Unit</label>
                                                <select class="form-select form-control form-control-solid form-select-solid"
                                                    data-control="select2" data-hide-search="true"
                                                    data-placeholder="Select a Unit" name="UNIT" id="UNIT" multiple>
                                                    <option value="">Select Unit</option>
                                                    @foreach ($units as $unit)
                                                        <option value="{{ $unit }}">{{ $unit }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" id="submit"
                                        class="btn btn-primary btn-sm me-2">Search</button>
                                    <button type="button" id="clear" class="btn btn-primary btn-sm me-2">Clear</button>
                                    <a href="{{ route('ifta.calculate_miles.index') }}" class="btn btn-primary btn-sm">Miles
                                        Calculator</a>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm">Delete Selected
                                Records</button>

                            <div class="float-end">
                                <select name="downloadOptions"
                                    id="downloadOptions"class="form-select bg-primary form-select-solid form-select-sm me-2"
                                    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 class="float-end">
                                <button type="button" class="btn btn-primary btn-sm me-2"
                                    onclick="$('#importMilesModal').modal('show');">
                                    Import
                                </button>
                            </div>

                            <div class="float-end">
                                <a href="{{ route('ifta.miles.add') }}" class="btn btn-primary btn-sm me-2">Add</a>
                            </div>
                        
                    <div class="card card-flush">
                        <div class="pt-0">
                            <div class="table-responsive p-5">
                                {{-- {!! $dataTable->table() !!} --}}
                                <table id="iftamiles-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">
                                                <input type="checkbox" name="deleteAll[]" id="deleteAll"
                                                    value="deleteAll">
                                            </th>
                                            <th class="fs-7 text-gray-500 text-uppercase">STATE</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">MILES</th>                                        
                                            <th class="fs-7 text-gray-500 text-uppercase">QUARTER</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">YEAR</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">ACTION</th>
                                        </tr>
                                    </thead>
                                    <tfoot align="right">
                                        <tr>
                                            <th>Total : </th>
                                            <th></th>
                                            <th id="displayTotal">0.00</th>
                                            <th></th>                                           
                                            <th></th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
                </div>
                    </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"
        id="importMilesModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Import Miles</h4>
                </div>
                <div class="modal-body">
                    <form id="uploadform" action="{{ route('ifta.miles.import') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <h5>Step: 1</h5>
                                <a href="{{ asset('docs/miles/sample_Miles.csv') }}" class="btn btn-primary btn-sm"
                                    download="sample_Miles.csv">Download
                                    Sample</a>
                            </div>
                            <div class="col-md-8">
                                <h5>Step 2:</h5>
                                <label class="form-label">Import CSV File <span style="color: red;">*</span></label><br>
                                <input type="file" id="docs" name="docs" accept=".csv" class="form-control"
                                    required><br><br>
                            </div>
                        </div>
                        <div class="">
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-success btn-sm" id="upload"
                                    name="submit">Import</button>
                                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal"
                                    onclick="$('#importMilesModal').modal('hide');" id="close">Close</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    {!! $dataTable->scripts() !!}
    <script>
        const table = $('#iftamiles-table');

        table.on('preXhr.dt', function(e, setting, data) {
            data.STATE = $('#STATE').val();
            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() {
            $('#STATE').val('').trigger('change');
            $('#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();
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#deleteAll").click(function() {
                $('input:checkbox').not(this).prop('checked', this.checked);
            });
        });
    </script>
    <script>
        function validateForm() {
            var checkboxes = document.getElementsByName('selectedMiles[]');

            var atLeastOneChecked = false;
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    atLeastOneChecked = true;
                    break;
                }
            }

            if (!atLeastOneChecked) {
                alert("Please select at least one checkbox.");
                return false;
            } else {
                return confirm('Are You Sure You Want to Delete ?');
            }

            return true;
        }
        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()