@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>
@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="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="position-relative">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="" id="search" placeholder="Search">
                                </div>

                                <div class="separator separator-dashed my-8"></div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Date</label>
                                    <div id="range"
                                        style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                        <i class="fa fa-calendar"></i>&nbsp;
                                        <span></span> <i class="fa fa-caret-down"></i>
                                    </div>
                                    <input type="hidden" class="form-control sm" name="start_date" id="start_date"
                                        value="">
                                    <input type="hidden" class="form-control sm" name="end_date" id="end_date"
                                        value="">
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Unit</label>
                                    <select class="form-select form-select-solid" data-control="select2"
                                        data-hide-search="true" data-placeholder="Select a Unit" name="Unit"
                                        id="Unit" multiple>
                                        @foreach ($units as $unit)
                                            <option value="{{ $unit }}">{{ $unit }}</option>
                                        @endforeach()
                                    </select>
                                    <!-- <input type="text" class="form-control form-control form-control-solid"
                                                                                name="Unit" id="Unit" value=""> -->
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Card #</label>

                                    <select class="form-select form-select-solid" data-control="select2"
                                        data-hide-search="true" data-placeholder="Select a Card Numbar" name="Card_Number"
                                        id="Card_Number" multiple>
                                        @foreach ($cardNos as $cardNo)
                                            <option value="{{ $cardNo }}">{{ $cardNo }}</option>
                                        @endforeach()
                                    </select>

                                    <!-- <input type="text" class="form-control form-control form-control-solid"
                                                                                name="Card_Number" id="Card_Number" value=""> -->
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Driver Name</label>
                                    <input type="text" class="form-control form-control form-control-solid"
                                        name="Driver_Name" id="Driver_Name" value="">
                                </div>

                                <!-- <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Location</label>
                                    <input type="text" class="form-control form-control form-control-solid"
                                        name="Location_Name_list" id="Location_Name" value="">
                                </div> -->

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">City</label>
                                    <input type="text" class="form-control form-control form-control-solid"
                                        name="Location_City" id="Location_City" value="">
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">State</label>
                                    <select class="form-select form-select-solid" data-control="select2"
                                        data-hide-search="true" data-placeholder="Select a State"
                                        name="Location_State/Province" id="Location_State_Province" multiple>
                                        <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="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Item</label><br>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="ULSD" value="ULSD">
                                            <label for="ULSD" class="me-2 mb-3">ULSD</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="ULSR" value="ULSR">
                                            <label for="ULSR" class="me-2 mb-3">ULSR</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="DEFD" value="DEFD">
                                            <label for="DEFD" class="me-2 mb-3">DEFD</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="FUEL" value="FUEL">
                                            <label for="FUEL" class="me-2 mb-3">FUEL</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="CADV" value="CADV">
                                            <label for="CADV" class="me-2 mb-3">CADV</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="SCLE" value="SCLE">
                                            <label for="SCLE" class="me-2 mb-3">SCLE</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="OIL" value="OIL">
                                            <label for="OIL" class="me-2 mb-3">OIL</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="Reefer" value="Reefer">
                                            <label for="Reefer" class="me-2 mb-3">Reefer</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="STAX" value="STAX">
                                            <label for="STAX" class="me-2 mb-3">STAX</label>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="Tires" value="Tires">
                                            <label for="Tires" class="me-2 mb-3">Tires</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input type="checkbox" class="form-check-input mb-3" name="item"
                                                id="Car_Diesel" value="Car_Diesel">
                                            <label for="Car_Diesel" class="me-2 mb-3">Car Diesel</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Chain</label><br>
                                    <input type="checkbox" class="form-check-input mb-3" name="ChainID" id="Loves"
                                        value="2">
                                    <label for="Loves" class="me-2 mb-3">Loves</label>
                                    <input type="checkbox" class="form-check-input mb-3" name="ChainID" id="TA"
                                        value="3">
                                    <label for="TA" class="me-2 mb-3">TA</label>
                                    <input type="checkbox" class="form-check-input mb-3" name="ChainID" id="Pilot"
                                        value="1">
                                    <label for="Pilot" class="me-2 mb-3">Pilot</label>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Location</label><br>
                                    <input type="checkbox" class="form-check-input mb-3" name="Location_Name"
                                        id="one9" value="one9">
                                    <label for="one9" class="me-2 mb-3">One9</label><br>
                                    <input type="checkbox" class="form-check-input mb-3" name="Location_Name"
                                        id="Love" value="Love">
                                    <label for="Love" class="me-2 mb-3">Out Of Network</label>
                                </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"
                                    onclick="changeExport()">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">
                    <form action="{{ route('transactionsReport.multipleImport') }}" method="POST"
                        onsubmit="return validateForm()">
                        @csrf
                        <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">
                                    Transaction Report
                                </h3>
                            </div>
                            <ul class="nav nav-pills me-6 mb-2 mb-sm-0" role="tablist">
                                <li class="nav-item m-0" role="presentation">
                                    <a class="btn btn-sm btn-icon btn-light btn-color-muted btn-active-primary me-3 active"
                                        id="hidetwofield">
                                        <i class="ki-outline ki-row-horizontal fs-2"></i>
                                    </a>
                                </li>
                                <li class="nav-item m-0" role="presentation">
                                    <a class="btn btn-sm btn-icon btn-light btn-color-muted btn-active-primary"
                                        id="showtwofield">
                                        <i class="ki-outline ki-element-plus fs-2"></i>
                                    </a>
                                </li>
                            </ul>
                            <a href="{{ route('transactionsReport.index') }}" class="btn btn-primary btn-sm">Horizontal
                                Layout</a>
                            <button type="submit" class="btn btn-primary btn-sm">Import Selected
                                Records</button>
                            <div class="float-end">
                                <select name="downloadOptions" id="downloadOptions"
                                    class="form-select form-select-solid form-select-sm bg-primary" 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">
                                            {!! $dataTable->table() !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
    <script>
        $(function() {
            var start = moment().subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#range').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);
            cb(start, end);
        });
    </script>

    {!! $dataTable->scripts() !!}

    <script>
        const table = $('#transactionreport-table');

        table.on('preXhr.dt', function(e, setting, data) {
            data.items = [];
            data.ChainID = [];
            data.Location_Names = [];
            data.search = $('[name="search"]').val();
            data.Unit = $('#Unit').val();
            data.Card_Number = $('#Card_Number').val();
            data.Driver_Name = $('#Driver_Name').val();
            // data.Location_Name = $('#Location_Name').val();
            data.Location_City = $('#Location_City').val();
            data.Location_State_Province = $('#Location_State_Province').val();
            data.start_date = $('#start_date').val();
            data.end_date = $('#end_date').val();
            $('[name="ChainID"]:checked').each(function() {
                data.ChainID.push($(this).val());
            });
            $('[name="item"]:checked').each(function() {
                data.items.push($(this).val());
            });
            $('[name="Location_Name"]:checked').each(function() {
                data.Location_Names.push($(this).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() {
            $('#search, #Driver_Name, #Location_City')
                .val('');
            $('input[name="start_date"]').val('');
            $('input[name="end_date"]').val('');
            $('#range span').html('');
            $('[name="item"]').prop('checked', false);
            $('[name="Location_Name"]').val('');
            $('[name="ChainID"]').prop('checked', false);
            $('#Location_State_Province').val([]).trigger('change');
            $('#Unit').val('').trigger('change');
            $('#Card_Number').val('').trigger('change');


            table.DataTable().ajax.reload();
        });



        $(document).ready(function() {
            const table = $('#transactionreport-table').DataTable();

            table.columns([1, 2, 6, 10]).visible(false);

            $('#hidetwofield').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                table.columns([1, 2, 6, 10]).visible(false);
                $(this).removeClass('btn-color-muted').addClass('active');
                $('#showtwofield').removeClass('active').addClass('btn-color-muted');
            });

            $('#showtwofield').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                table.columns([1, 2, 6, 10]).visible(true);
                $(this).removeClass('btn-color-muted').addClass('active');
                $('#hidetwofield').removeClass('active').addClass('btn-color-muted');
                $('th:nth-child(3), th:nth-child(7), th:nth-child(2), th:nth-child(11)', ).addClass(
                    'text-gray-500 text-uppercase');
            });
        });

        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);

        }

        function importExpense(id) {
            if (confirm('Are you sure you want to import ?')) {
                $.ajax({
                    url: "{{ route('transactionsReport.importExpense') }}",
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        TID: id
                    },
                    success: function(data) {
                        if (data.status) {
                            toastr.success(data.message);
                            table.DataTable().ajax.reload();
                        } else if (data.status == false) {
                            toastr.error(data.message);
                        } else {
                            toastr.error('OOPS! Something went wrong');
                        }
                    },
                    error: function(error) {
                        if (error.responseJSON && error.responseJSON.message) {
                            toastr.error(error.responseJSON.message);
                        } else if (error.message) {
                            toastr.error(error.message);
                        } else {
                            toastr.error('An unexpected error occurred. Please try again.');
                        }
                    }
                });
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            $("#importAll").click(function() {
                $('.import').not(this).prop('checked', this.checked);
            });
        });
    </script>
    <script>
        function validateForm() {
            var checkboxes = document.getElementsByName('selectedTransactions[]');

            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 Import ?');
            }

            return true;
        }
    </script>
@endsection()