@extends('layouts.master')

@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">Fuel Card <span class="text-muted">Edit</span>
                        </h3>
                    </div>
                </div>
                <form action="{{ route('fuelCards.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="ID" value="{{ $fuelCard->ID }}">
                    <div class="card mb-7" data-select2-id="select2-data-144-uoh6">
                        <div class="card-body" data-select2-id="select2-data-143-nqr2">
                            <div class="row">
                                <div class="col-md-3 mt-2">
                                    <div class="align-items-center">
                                        <label for="" class="fs-6 form-label fw-bold text-gray-900">CARD NO</label>
                                        <input type="hidden" name="CARD_NO" value="{{ $fuelCard->CARD_NO }}"
                                            class="form-control form-control form-control-solid">
                                        <p class="mt-2">{{ $fuelCard->CARD_NO }}</p>
                                    </div>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <div class="align-items-center">
                                        <label for="" class="fs-6 form-label fw-bold text-gray-900">CARD
                                            STATUS <span class="text-danger">*</span></label>
                                        <select class="form-select form-control form-control-solid" name="CARD_STATUS">
                                            <option value="">Please Select</option>
                                            <option value="ACTIVE" {{ $fuelCard->CARD_STATUS == 'ACTIVE' ? 'selected' : '' }}>ACTIVE</option>
                                            <option value="INACTIVE" {{ $fuelCard->CARD_STATUS == 'INACTIVE' ? 'selected' : '' }}>INACTIVE</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <div class="align-items-center">
                                        <label for="" class="fs-6 form-label fw-bold text-gray-900">DRIVER <span class="text-danger">*</span></label>
                                        <input type="text" name="CARD_HOLDER" placeholder="DRIVER" value="{{ $fuelCard->CARD_HOLDER }}"
                                            class="form-control form-control form-control-solid">
                                    </div>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <div class="align-items-center">
                                        <label for="" class="fs-6 form-label fw-bold text-gray-900">UNIT # <span class="text-danger">*</span></label>
                                        <input type="text" name="PUNIT_ID" placeholder="UNIT #" value="{{ $fuelCard->PUNIT_ID }}"
                                            class="form-control form-control form-control-solid">
                                    </div>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <div class="align-items-center">
                                        <label for="" class="fs-6 form-label fw-bold text-gray-900">DRIVER
                                            ID <span class="text-danger">*</span></label>
                                        <input type="text" name="DRIVER_ID" placeholder="DRIVER ID" value="{{ $fuelCard->DRIVER_ID }}"
                                            class="form-control form-control form-control-solid">
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mt-5">
                                    <button type="submit" class="btn btn-primary me-5">Save</button>
                                    <a href="{{ route('fuelCards.index') }}" class="btn btn-primary">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                @if (!empty($live_efs_data))
                    @php
                        $cardNumber = $live_efs_data['cardNumber'];
                        $status = $live_efs_data['header']['status'];
                        $infos = $live_efs_data['infos'];
                        $driver_name = '';
                        $unit_no = '';
                        $driver_id = '';
                        if (!empty($infos)) {
                            foreach ($infos as $row => $val) {
                                if (isset($val['infoId']) && $val['infoId'] != '') {
                                    if ($val['infoId'] == 'DRID') {
                                        if (!is_array($val['reportValue'])) {
                                            $driver_id = $val['reportValue'];
                                        }
                                        if (!is_array($val['matchValue'])) {
                                            $driver_id = $val['matchValue'];
                                        }
                                    }
                                    if ($val['infoId'] == 'NAME') {
                                        if (!is_array($val['reportValue'])) {
                                            $driver_name = $val['reportValue'];
                                        }
                                        if (!is_array($val['matchValue'])) {
                                            $driver_name = $val['matchValue'];
                                        }
                                    }
                                    if ($val['infoId'] == 'UNIT') {
                                        if (!is_array($val['reportValue'])) {
                                            $unit_no = $val['reportValue'];
                                        }
                                        if (!is_array($val['matchValue'])) {
                                            $unit_no = $val['matchValue'];
                                        }
                                    }
                                }
                            }
                        }
                    @endphp
                    <div class="card card-flush h-md-100">
                        <div class="card-header pt-7">
                            <h3 class="card-title align-items-start flex-column">
                                <span class="card-label fw-bold text-gray-800">Real Time EFS Data</span>
                            </h3>
                        </div>

                        <div class="card-body pt-6">
                            <div class="table-responsive">
                                <table
                                    class="table table-striped table-row-dashed align-middle gs-0 gy-3 my-0">
                                    <tbody class="tbody-text">
                                        <tr>
                                            <th>CARD NO</th>
                                            <td>{{ $cardNumber }}</td>
                                        </tr>
                                        <tr>
                                            <th>CARD STATUS</th>
                                            <td>{{ $status }}</td>
                                        </tr>
                                        <tr>
                                            <th>DRIVER NAME</th>
                                            <td>{{ $driver_name }}</td>
                                        </tr>
                                        <tr>
                                            <th>DRIVER ID</th>
                                            <td>{{ $driver_id }}</td>
                                        </tr>
                                        <tr>
                                            <th>UNIT#</th>
                                            <td>{{ $unit_no }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div> --}}
    <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-wrap flex-stack pb-7">
                <div class="d-flex flex-wrap align-items-center my-1">
                    <h3 class="fw-bold me-5 my-1">Fuel Card <span class="text-muted">Edit</span>
                    </h3>
                    <h3 class="fw-bold me-5 my-1">{{ $fuelCard->CARD_NO }}</h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x border-transparent fs-4 fw-semibold mb-15">
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5 active"
                                data-bs-toggle="tab" href="#kt_ecommerce_settings_edit">
                                <i class="ki-outline ki-pencil fs-2x me-2"></i>Edit</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_settings_efs_data" id="real_time_efs_data_tab">
                                <i class='ki-outline ki-credit-cart fs-2x me-2'></i>Real Time EFS Data</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_settings_efs_reject_data" id="efs_rejected_transactions_tab">
                                <i class='ki-outline ki-cross-square fs-2x me-2'></i>EFS Rejected Transactions</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-active-primary d-flex align-items-center pb-5" data-bs-toggle="tab"
                                href="#kt_ecommerce_settings_daily_transactions_data">
                                <i class='ki-outline ki-arrow-right-left fs-2x me-2'></i>Daily Transactions</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_ecommerce_settings_edit" role="tabpanel">
                            <form id="kt_ecommerce_settings_edit_form" class="form"
                                action="{{ route('fuelCards.update') }}" method="POST">
                                @csrf
                                <input type="hidden" name="ID" value="{{ $fuelCard->ID }}">
                                <div class="row fv-row mb-7">
                                    <div class="col-md-9">
                                        <input type="hidden" class="form-control form-control-solid" name="CARD_NO"
                                            value="{{ $fuelCard->CARD_NO }}" />
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">CARD STATUS</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="w-100">
                                            <select class="form-select form-select-solid" name="CARD_STATUS"
                                                data-control="select2" data-hide-search="true"
                                                data-placeholder="Select a layout">
                                                <option value="">Please Select</option>
                                                <option value="ACTIVE"
                                                    {{ $fuelCard->CARD_STATUS == 'ACTIVE' ? 'selected' : '' }}>ACTIVE
                                                </option>
                                                <option value="INACTIVE"
                                                    {{ $fuelCard->CARD_STATUS == 'INACTIVE' ? 'selected' : '' }}>INACTIVE
                                                </option>
                                            </select>
                                            @error('CARD_STATUS')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">DRIVER</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid" name="CARD_HOLDER"
                                            value="{{ $fuelCard->CARD_HOLDER }}" placeholder="DRIVER" />
                                        @error('CARD_HOLDER')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">UNIT #</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid" name="PUNIT_ID"
                                            value="{{ $fuelCard->PUNIT_ID }}" placeholder="UNIT #" />
                                        @error('PUNIT_ID')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row fv-row mb-7">
                                    <div class="col-md-3 text-md-end">
                                        <label class="fs-6 fw-semibold form-label mt-3">
                                            <span class="required">DRIVER ID</span>
                                        </label>
                                    </div>
                                    <div class="col-md-9">
                                        <input type="text" class="form-control form-control-solid" name="DRIVER_ID"
                                            value="{{ $fuelCard->DRIVER_ID }}" placeholder="DRIVER ID" />
                                        @error('DRIVER_ID')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row py-5">
                                    <div class="col-md-9 offset-md-3">
                                        <div class="d-flex">
                                            <a href="{{ route('fuelCards.index') }}" class="btn btn-light">Cancel</a>
                                            <button type="submit" data-kt-ecommerce-settings-type="submit"
                                                class="btn btn-primary" id="submit" onclick="showSpinner();">
                                                <span class="indicator-label">Save</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_settings_efs_data" role="tabpanel">
                            <div class="card-body pt-6">
                                <div class="table-responsive" id="real_time_efs_data_table">
                                    <table class="table table-striped table-row-dashed align-middle gs-0 gy-3 my-0">
                                        <tbody class="tbody-text">
                                            <tr>
                                                <th>CARD STATUS</th>
                                                <td id="card_status"><span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>DRIVER NAME</th>
                                                <td id="driver_name"><span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>DRIVER ID</th>
                                                <td id="driver_id"><span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>UNIT#</th>
                                                <td id="unit_number"><span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div id="no_data_message" style="display: none; text-align: center;">No Data Found.</div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_settings_efs_reject_data" role="tabpanel">
                            <div class="card-body pt-6">
                                <div class="table-responsive">
                                    <table class="table table-striped table-row-dashed align-middle gs-0 gy-3 my-0"
                                        id="efs_rejected_transactions_table">
                                        <thead class="thead-bg-color">
                                            <tr class="fs-7 fw-bold border-bottom-0" style="color:white;">
                                                <th>Transaction Date</th>
                                                <th>Invoice</th>
                                                <th>Loc Name</th>
                                                <th>Loc City</th>
                                                <th>Loc State</th>
                                                <th>Error Desc</th>
                                                <th>Unit</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tbody-text">
                                            <tr>
                                                <td id="wait" colspan="8" align="center">Wait Please...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="kt_ecommerce_settings_daily_transactions_data" role="tabpanel">
                            <div class="card-body pt-6">
                                <div class="d-sm-flex">
                                    <form action="" id="getTransaction">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <div id="transaction_date_range" class="d-inline form-control">
                                                        <i class="fa fa-calendar d-inline"></i>&nbsp;
                                                        <span id="dates_editing_deadline"
                                                            class="responsive-font-example"></span> <i
                                                            class="fa fa-caret-down"></i>
                                                        <input type="hidden" id="begin_date" name="begin_date"
                                                            value="">
                                                        <input type="hidden" id="end_date" name="end_date"
                                                            value="">
                                                    </div>
                                                    <p class="mt-5">Note :- Please select week range for
                                                        better
                                                        performance</p>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <button type="button" id="submitButton"
                                                        class="btn btn-primary mt-2">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                {!! $dataTable->table() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection()
@section('script')
{!! $dataTable->scripts() !!}
    <script>
          const table = $('#daily_transactions_tab_dt');

table.on('preXhr.dt', function(e, setting, data) {
    data.start_date = $('#begin_date').val();
    data.end_date = $('#end_date').val();
    data.card_no = "{{ $fuelCard->CARD_NO }}";
});
        var started = moment().subtract(10, 'days');
        var ended = moment();
        $('#submitButton').on('click', function() {

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

        $('#transaction_date_range').daterangepicker({
    opens: 'center',
    "maxSpan": {
        "days": 365
    },
    startDate: moment(),  // Set the start date to the current date
    endDate: moment(),    // Set the end date to the current date
    singleDatePicker: false,
    maxDate: moment(),
    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')]
    }
}, cbed);

// Custom callback function to update the UI elements
function cbed(started, ended) {
    $('#transaction_date_range span').html(started.format('MM-DD-YYYY') + ' - ' + ended.format('MM-DD-YYYY'));
    $('#begin_date').val(started.format('MM-DD-YYYY'));
    $('#end_date').val(ended.format('MM-DD-YYYY'));
}

// Call the cbed function with the current date
cbed(moment(), moment());
    </script>
    <script>
        function showSpinner() {
            var submitButton = document.getElementById('submit');
            submitButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
        }
    </script>
    <script>
        $('#efs_rejected_transactions_tab').on('click', function() {
            var url = "{{ route('fuelCards.efs_rejected_transactions', $fuelCard->ID) }}";
            $.ajax({
                url: url,
                type: "GET",
                success: function(data) {
                    $('#wait').hide();
                    if (data !== null && data !== undefined && data.length > 0) {
                        var tableBody = $('#efs_rejected_transactions_table tbody');
                        tableBody.empty();
                        data.forEach(function(transaction) {
                            var row = '<tr>' +
                                '<td>' + transaction.tranDate.trim() + '</td>' +
                                '<td>' + transaction.invoice.trim() + '</td>' +
                                '<td>' + transaction.locName.trim() + '</td>' +
                                '<td>' + transaction.locCity.trim() + '</td>' +
                                '<td>' + transaction.locState.trim() + '</td>' +
                                '<td>' + transaction.errorDesc.trim() + '</td>' +
                                '<td>' + transaction.unit.trim() + '</td>' +
                                '</tr>';
                            tableBody.append(row);
                        });
                    } else {
                        $('#efs_rejected_transactions_table tbody').html(
                            '<tr><td colspan="8">No Record Found.</td></tr>');
                    }
                },
                error: function(xhr, status, error) {
                    $('#wait').hide();
                    console.error(xhr.responseText);
                },
                complete: function() {
                    $('#wait').hide();
                }
            });
        });
    </script>
    <script>
        $('#real_time_efs_data_tab').on('click', function() {
            var url = "{{ route('fuelCards.get_efs_data', $fuelCard->ID) }}";
            $.ajax({
                url: url,
                type: "GET",
                beforeSend: function() {
                    $('.spinner-border').show();
                },
                success: function(data) {
                    $('.spinner-border').hide();
                    if (data !== null && data !== undefined && Object.keys(data).length > 0) {
                        $('#card_status').text(data.header.status || 'N/A');
                        var infos = data.infos;
                        if (infos !== null && infos !== undefined && infos.length > 0) {
                            infos.forEach(function(info) {
                                if (info.infoId === 'DRID') {
                                    $('#driver_id').text(info.matchValue || info.reportValue ||
                                        'N/A');
                                }
                                if (info.infoId === 'NAME') {
                                    $('#driver_name').text(info.reportValue || info
                                        .matchValue || 'N/A');
                                }
                                if (info.infoId === 'UNIT') {
                                    $('#unit_number').text(info.reportValue || info
                                        .matchValue || 'N/A');
                                }
                            });
                        }
                    } else {
                        $('#card_status').text('N/A');
                        $('#driver_id').text('N/A');
                        $('#driver_name').text('N/A');
                        $('#unit_number').text('N/A');
                        $('#real_time_efs_data_table').hide();
                        $('#no_data_message').show();
                    }
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                },
                complete: function() {
                    $('.spinner-border').hide();
                }
            });
        });
    </script>
    <script>
        // $("#submitButton").click(function() {
        //     var formData = $("#getTransaction").serialize();
        //     var tableBody = $("#transaction_list");
        //     var driverCARD_NUM = "";

        //     $.ajax({
        //         type: "GET",
        //         url: "",
        //         data: formData,
        //         beforeSend: function() {
        //             $("#submitButton").html(
        //                 '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>');
        //         },
        //         success: function(response) {
        //             $("#submitButton").html('Submit');
        //             var dataFound = false;
        //             var newRows = "";
        //             if (response.length > 0) {
        //                 $.each(response, function(index, item) {
        //                     var trimmedCardNum = item.cardNumber.trim();
        //                     if (driverCARD_NUM == trimmedCardNum) {
        //                         console.log(item);
        //                         newRows += "<tr>";
        //                         var transactionDate = new Date(item
        //                             .transactionDate);
        //                         var formattedDate = (transactionDate
        //                                 .getMonth() + 1) + "/" + transactionDate
        //                             .getDate() + "/" + transactionDate
        //                             .getFullYear();

        //                         var posDate = new Date(item
        //                             .POSDate);
        //                         var formattedposDate = (posDate
        //                                 .getMonth() + 1) + "/" + posDate
        //                             .getDate() + "/" + posDate
        //                             .getFullYear();


        //                         newRows += "<td>" + formattedDate + "</td>";
        //                         newRows += "<td>" + item.locationName + "</td>";
        //                         // newRows += "<td>" + locationCity + "</td>";
        //                         newRows += "<td>" + item.locationState + "</td>";
        //                         newRows += "<td>" + formattedposDate + "</td>";
        //                         newRows += "<td>" + item.authCode + "</td>";
        //                         newRows += "<td>" + item.invoice + "</td>";
        //                         newRows += "<td>" + item.netTotal + "</td>";
        //                         newRows += "<td>" + item.transactionId + "</td>";
        //                         newRows += "</tr>";
        //                         dataFound = true;
        //                     }
        //                 });
        //             }
        //             if (!dataFound) {
        //                 newRows += "<tr><td colspan='8'>No Data Found</td></tr>";
        //             }

        //             tableBody.html(newRows);
        //         },
        //         error: function(error) {
        //             var message = JSON.parse(error.responseText);
        //             var newRows = "";
        //             newRows += "<tr><td colspan='8'>" + message.message + "</td></tr>";
        //             tableBody.html(newRows);

        //             $("#submitButton").html('Submit');
        //         },
        //         complete: function(data) {
        //             $("#submitButton").html('Submit');
        //         }
        //     });
        // });
    </script>
@endsection()