@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;
        }
        #selectyearform .form-select.form-select-solid {
             background-color: #fff !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 align-items-center pb-7">
    <h3 class="fw-bold me-5 my-1">Miles</h3> <!-- Heading -->

    <form action="" method="GET" class="d-flex align-items-center mb-0" id="selectyearform">
        <div class="me-3" style="margin-top: 10px;display:flex">
            <label for="year" class="fs-6 form-label fw-bold text-gray-900 me-2 mt-2" style=" width: 139px;">Select Year</label> <!-- 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>
            <button type="submit" class="btn btn-primary btn-sm mt-3 me-2">Generate</button> <!-- Button -->
           
                            <a href="{{ route('ifta.miles.add') }}" class="btn btn-success btn-sm me-2 mt-3">Add</a>
                            <button type="button" class="btn btn-danger btn-sm me-2 mt-3"
                                onclick="$('#importMilesModal').modal('show');" style="width: 82px;">
                                Import
                            </button>
        </div>
        
    </form>
</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="{{ 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="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()