@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="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="bx bx-pencil me-2 fs-20"></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='bx bxs-credit-card-front me-2 fs-20'></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='bx bx-x me-2 fs-20'></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" id="daily_transactions_tab">
                                <i class='bx bx-transfer me-2 fs-20'></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('carrierProfile.edit', $carrierId) }}#kt_stats_widget_16_tab_13" class="btn btn-light me-2" id="cancel" onclick="showSpinnerCancelBtn();">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-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-row-bordered table-row-dashed gy-4 align-middle fw-bold"
                                        id="efs_rejected_transactions_table">
                                        <thead class="">
                                            <tr class="fs-7 fw-bold border-bottom-0">
                                                <th class="fs-7 text-gray-500 text-uppercase">Date</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Invoice</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Location</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">City</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">State</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">Description</th>
                                                <th class="fs-7 text-gray-500 text-uppercase">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>
                                  <div class="table-responsive p-5">
                                            {!! $dataTable->table() !!}
                                        </div>
                                <!-- <table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable" id="daily_transactions_tab">
                                    <thead class="">
                                        <tr class="fs-7 fw-bold border-bottom-0">
                                            <th class="fs-7 text-gray-500 text-uppercase">Transaction Date</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">Name</th>
                                            {{-- <th>City</th> --}}
                                            <th class="fs-7 text-gray-500 text-uppercase">State</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">POS Date</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">Invoice</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">Authorization Number</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">Amount</th>
                                            <th class="fs-7 text-gray-500 text-uppercase">Transaction Id</th>
                                        </tr>
                                    </thead>
                                    <tbody id="transaction_list" class="tbody-text">
                                             <tr>
                                                <td id="wait" colspan="8" align="center">Wait Please...</td>
                                            </tr>
                                    </tbody>
                                </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 transactionDate = moment(transaction.tranDate.trim());
                            var formattedDate = transactionDate.format('MM/DD/YYYY HH:mm');
                            var row = '<tr>' +
                                '<td>' + formattedDate + '</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>
        //  const table1 = $('#daily_transactions_tab');
        $('#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>
        function showSpinnerCancelBtn() {
            var cancelButton = document.getElementById('cancel');
            cancelButton.innerHTML = '<span class="spinner-border spinner-border-sm align-middle ms-2"></span>';
        }
    </script>
@endsection()