@extends('layouts.master')

@section('content')
    @php
        $currentDate = \Carbon\Carbon::now();
        $quarter = ceil($currentDate->month / 3);
        $year = date('Y');
    @endphp

    <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">Generate Report
                        </h3>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <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" {{ request()->input('QUARTER') == '1' ? 'selected' : '' }}>
                                            Q1</option>
                                        <option value="2" {{ request()->input('QUARTER') == '2' ? 'selected' : '' }}>
                                            Q2</option>
                                        <option value="3" {{ request()->input('QUARTER') == '3' ? 'selected' : '' }}>
                                            Q3</option>
                                        <option value="4" {{ request()->input('QUARTER') == '4' ? 'selected' : '' }}>
                                            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 $year1)
                                            <option value="{{ $year1 }}"
                                                {{ request()->input('YEAR') == $year1 ? 'selected' : '' }}>
                                                {{ $year1 }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mt-5">
                                    <button type="button" id="submit" onclick="viewReport()" class="btn btn-primary btn-sm me-5">Generate
                                        Gallons Report</button>
                                    <button type="button" id="clear" class="btn btn-primary btn-sm me-5">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 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="card card-flush">
                            <div class="pt-0">
                                <div class="table-responsive p-5">
                                    <table id="generatereport-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">MILES</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="displayGallonTotal">0.00</th>
                                                <th id="displayMilesTotal">0.00</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>Avg Mpg : </th>
                                                <th id="displayAvgMpg">0.00</th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                                <div class="row" id="reportButtons">

                                    <div class="col-md-2">
                                        <a class="btn btn-primary btn-sm" style="float: right;" href="javascript:void(0);"
                                            onclick="viewReport()" target="_blank">View Report</a>
                                    </div>
                                    <div class="col-md-2">
                                        <form action="{{ route('ifta.generateIFTA.saveReport') }}" method="GET">
                                            <input type="hidden" name="carrier" value="{{ getAuthMemberId() }}">
                                            <input type="hidden" name="QUARTER" id="quarter"
                                                value="{{ $quarter }}">
                                            <input type="hidden" name="YEAR" id="year"
                                                value="{{ $year }}">
                                            <button type="submit" class="btn btn-primary btn-sm">Save Report</a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                    </div>
                </div>
                <div class="card mt-10">
                    <div class="card-body">
                        <div class="card card-flush">
                            <div class="pt-0">
                                <h3 class="fw-bold me-5 my-1 mb-10">Save Report History
                                </h3>
                                <div class="table-responsive p-5">
                                    {{-- {!! $dataTable->table() !!} --}}
                                    <table id="checkreporthistory-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">Quarter</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Year</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Created Date</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Report</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    {!! $dataTable->scripts() !!}
    <script>
        function viewReport() {

            var year = $('#YEAR').val() != '' ? $('#YEAR').val() : '{{ $year }}';
            var quarter = $('#QUARTER').val() != '' ? $('#QUARTER').val() : '{{ $quarter }}';

            var carrier = '{{ getAuthMemberId() }}';
            var url =
                "{{ route('ifta.generateIFTA.checkReport', ['year' => ':year', 'quarter' => ':quarter', 'carrier' => ':carrier']) }}"
                .replace(':year', year)
                .replace(':quarter', quarter)
                .replace(':carrier', carrier);
            window.open(url, '_blank');
        }
    </script>
    <script>
        const table = $('#generatereport-table');
        const table1 = $('#checkreporthistory-table');

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

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

        $('#clear').on('click', function() {
            $('#QUARTER').val('').trigger('change');
            $('#YEAR').val('').trigger('change');
            table.DataTable().ajax.reload();
        });

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

        $(document).ready(function() {
            var siteUrl = "