@extends('layouts.master')
<style>
    .table-bordered td, .table-bordered th{ border:1px solid #00000042 !important; font-size: 13px !important; }
    .first-table td, .first-table th{ font-size: 13px !important; }
    .form-control { appearance: auto  !important; }
    @media print {
            #kt_header {
                display: none;
            }

            #kt_footer {
                display: none;
            }

            #backbtn,
            #yearDropdown,
            #dropdownMenuButton1,
            #printandyeardropdown,
            #truckreporthead {
                display: none;
            }
        }

</style>
@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">
            <h3 class="text-muted" id="pdfhead" style="display:none">Expense Report</h3>
                <div class="d-flex flex-wrap align-items-center my-1"  id="topheadsection">
                    <h3 class="fw-bold me-5 my-1">Expense Report <span class="text-muted">Report</span>
                        @if(getAuthMemberId() == 28)
                            <a id="backbtn" href="{{ route('assets.drivers.openDriverPayDataTableNew') }}" class="btn btn-primary btn-sm me-2"><i
                                class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
                        @else
                            <a id="backbtn" href="{{ route('assets.drivers.openDriverDataTable') }}" class="btn btn-primary btn-sm me-2"><i
                                class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>
                        @endif


                    </h3>
                                <div class="row" id="yearDropdown">
                                    <select id="groupid" class="form-control ms-4" style="padding: 7px;">
                                            <option value="">Please select</option>
                                            @php
                                                $groupID = request()->get('groupId') ?? '';
                                            @endphp
                                            @foreach($group_ids as $group_id)
                                                <option value="{{ $group_id->GROUP_ID }}" @if($groupID == $group_id->GROUP_ID ) selected @endif>{{$group_id->GROUP_ID }}</option>
                                            @endforeach

                                        </select>
                                  </div>
                                  <a class="btn btn-primary btn-sm me-2 ms-10" href="javascript:void(0);" id="printButton">Print</a>

                    <h3 class="fw-bold me-5 my-1"></h3>
                </div>
            </div>
            <div class="card card-flush">
                <div class="card-body">
                    <div class=" pb-lg-11 pb-7">
                        <div class="container">
                                <div class="modal-body">
                                <span style="font-size: 1.35rem; float:right"><b>Total Amount:</b> {{'$' . number_format($total_amount,2)}}</span>
                                <span style="font-size: 1.35rem;"><b>Settlement #:</b> {{$expensesData[0]->GROUP_ID}}</span><br>

                                <span style="font-size: 1.35rem;"><b>Check #:</b> {{$expensesData[0]->CHECK_ID}}</span><br>
                                  <span style="font-size: 1.35rem;"><b>Date:</b> {{!empty($expensesData[0]->GROUP_DATE) ?  date('m/d/Y', strtotime($expensesData[0]->GROUP_DATE )) : '' }}</span><br>

                                        <div  style="margin:0 auto;text-align:center;">
                                         <!-- <img alt="Logo" src="{{ asset('images/main_logo.png') }}" class="h-45px logo" />  -->

                                         <!-- <span  style="font-weight: bold; font-size: 20px; margin-top: 9px;">GROUP ID #{{ $groupID}}</span></div>      -->

                                        <div class="row">

                                        <!-- <h3 style="color:green">Truck Maintenance Report</h3> -->
                                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">
                                            <h3 style="margin: 0;"></h3>


                                        </div>
                                            <hr>
                                            <div class="row">
                                                <table class="table table-bordered" width="100%">
                                                    <thead>
                                                        <tr style="background: #388DC6">
                                                            <th class="text-gray-500">#</th>
                                                            <th class="text-gray-500">Driver Name</th>
                                                            <th class="text-gray-500">Load id#</th>
                                                            <th class="text-gray-500">AMOUNT</th>
                                                            <th class="text-gray-500">PAID DATE</th>
                                                            <th class="text-gray-500">DUE DATE</th>

                                                         </tr>
                                                    </thead>
                                                    <tbody>

                                                        @forelse  ($expensesData as $expenseData)

                                                        <tr>
                                                            <td><a href='javascript:void(0);' onclick="editExpense('{{$expenseData->AP_ID}}','{{$expenseData->truckTrailer}}')">{{$expenseData->AP_ID}}</a></td>
                                                            <td><a href="{{route('assets.drivers.edit', $expenseData->DRIVER_ID)}}" target="_blank">{{$expenseData->DRIVER_NAME}}</a></td>
                                                            <td><a href="{{route('assets.loads.edit', $expenseData->LOAD_ID)}}"  target="_blank">{{$expenseData->LOAD_ID}}</a></td>
                                                            <td>{{'$' . number_format($expenseData->ORIG_AMT,2)}}</td>
                                                            <td>{{ !empty($expenseData->PAID_DATE) && $expenseData->PAID_DATE != '0000-00-00 00:00:00' ? date('m/d/Y', strtotime($expenseData->PAID_DATE)) : '' }}</td>
                                                            <td>{{ !empty($expenseData->TX_DUE) && $expenseData->TX_DUE != '0000-00-00 00:00:00' ? date('m/d/Y', strtotime($expenseData->TX_DUE)) : '' }}</td>

                                                        </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="6">No data found</td>
                                                            </tr>
                                                     @endforelse
                                                    </tbody>
                                                </table>


                                            </div>

                                        </div>





                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="expenseModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="expenseModalLabel">Edit Expense</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pt-0">
                <div class="row">
               <form method="post" id="addExpenseForm" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                                <div class="col-md-6">
                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Vendor</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <input type="hidden" name="driver_id"  id ="driver_id"  value="">
                                        <input type="hidden" name="truck_id" id ="truck_id"  value="">
                                        <input type="hidden" name="trailer_id" id ="trailer_id" value="">
                                        <input type="hidden" name="load_id" id ="load_id" value="">
                                        <input type="hidden" name="AP_ID" id="AP_ID" value="">
                                        <input type="hidden" name="opration" id="opration" value="">

                                         <input type="hidden" id="efsvendor" name="efsvendor" value="">
                                        <select class="form-control" class="form-select" data-control="select2"
                                            data-hide-search="true" id="exp_vendor_id" name="VENDOR_ID" data-placeholder="Please select">
                                            <option value="">Please select</option>
                                            @foreach($vendors as $key => $vendor)

                                            <option value="{{$key}}">{{ $vendor}}</option>
                                            @endforeach
                                        </select>

                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="vendorError"></p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mt-15">
                                    <div class="btn-group">
                                            <button type="button" class="btn btn-primary btn-sm vendorAddExp" id="vendorsaddexp">Add Vendor</button>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <a href="javascript:void(0)" class="btn btn-primary btn-sm " id="vandolListbtn">Vendor
                                            List</a> -->

                                    </div>
                                </div>
                            </div>

                        </div>
                    <div class="row">
                            <div class="col-md-3">

                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Amount</label>
                                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="ORIG_AMT" id="ORIG_AMT"
                                            value=""
                                            class="form-control ">
                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="amountError"></p>
                                    </div>
                            </div>

                            <div class="col-md-4">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6  required">Expense Type</label>
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <select class="form-control" class="form-select" data-control="select2"
                                        data-hide-search="true" id="exp_TYPE" name="TYPE" data-placeholder = "Please Select" onchange="expenseTypeChange(this)">
                                        <option value="">Please select</option>
                                        @foreach($expenseTypes as $key => $expenseType)
                                            <option value="{{$key}}" >{{strtoupper($expenseType)}}</option>
                                        @endforeach

                                    </select>
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                    <p class="text-danger" id="expenseTypeError"></p>
                                </div>
                    </div>
                    <div class="col-md-2 mt-15">
                    <button type="button" class="btn btn-primary btn-sm" id="addExpenseTypebtn">Add Type</button>
                    </div>
                    <div class="col-md-3">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Due Date</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type="date" name="TX_DUE" id="TX_DUE" value="" class="form-control ">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                                <p class="text-danger" id="DueDateError"></p>
                            </div>
                        </div>

                        </div>
                        <div class = "row">

                        <div class="col-md-6">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">PO #</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type="text" class="form-control" id="PO_NUMBER" name="PO_NUMBER"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                    </div>
                    <div class="col-md-6 refno">
                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Reference Number
                                    </label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="TX_REFERENCE" id="TX_REFERENCE"  value="" class="form-control ">
                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="TX_REFERENCEerror"></p>
                                    </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-6" id="repair_issue_div">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id="repair_issue_lable">Truck Repair Issue</label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <select class="form-control" class="form-select" data-control="select2"
                                data-hide-search="true" id="repair_issue" name="repair_issue">
                                <option value="">Please select</option>
                             </select>
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">

                     <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Documents</label>

                     <div class="col-lg-12 fv-row fv-plugins-icon-container">
                         <input type="file" name="exp_document" id="exp_document" class="form-control"
                             accept=".png,.jpg,.jpeg,.csv,.xls,.xlsx" >
                         <input class="form-control" type="hidden" id="old_exp_document"
                             name="old_exp_document"
                             value="">
                             <div class="row" id="expdocumentLink">

                             </div>
                     </div>
         </div>

                </div>

                <div class="row">
                    <div class="col-md-6">

                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Is Paid?</label>
                            <label class="switch">
                                <input class="switch-input" type="checkbox" name="PAID" value="YES" id="paid_toggle">
                                <span class="switch-label fw-bold" data-on="YES" data-off="NO"></span>
                                <span class="switch-handle"></span>
                            </label>
                    </div>
                    <div class="col-md-6" id="paidDateContainer">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id='paidDateLable' >Paid Date</label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <input type="date" class="form-control" id="PAID_DATE" name="PAID_DATE" value="" >
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row hide">

                <!-- <div class="col-md-6">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Truck</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type="text" class="form-control" id="truck" name="truck"
                                    value="{{request()->route('truckId')}}" readonly>
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                        </div>
                </div> -->
                </div>



                <hr>
                <div class="row">
                <div class="col-md-12">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Notes </label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                              <textarea name="NOTES" id="NOTES" class="form-control"></textarea>
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                        </div>
                </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="submit" id="expensebtn" class="btn btn-primary">submit</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
            </div>
        </form>
        </div>
    </div>
</div>

<div class="modal fade" id="addExpenseTypeModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addDriverModalLabel">Add Expense Type</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="addexpensetypeform">
                @csrf

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label ">Name</label>
                                <input type="text" class="form-control" id="EXPENSE_NAME" name="EXPENSE_NAME"
                                    value="{{ old('EXPENSE_NAME') }}">
                                @error('NAME')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary closeExpensetype" data-bs-dismiss="modal"
                        aria-label="Close">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection()
@section('script')
<script>
document.getElementById('printButton').addEventListener('click', function() {

    var printWindow = window.open('{{ route('assets.expense.expenseReportListPrint') }}?groupId={{ request()->query('groupId') }}', '_blank');
  printWindow.onload = function() {
        printWindow.print();
        printWindow.onafterprint = function() {
            printWindow.close();
        };
    };
});
;
    //  document.getElementById('printButton').addEventListener('click', function() {
    //         window.print();
    //     });
document.getElementById('groupid').addEventListener('change', function() {
        const selectedYear = this.value;

        var groupid = selectedYear;
        var baseUrl = "{{ route('assets.expense.expenseReportList') }}";
        var fullUrl = baseUrl + "?groupId=" + encodeURIComponent(groupid);
        location.href = fullUrl;
});

function editExpense(expenseId, type) {

$("#vendoraddtab").val('expense');
$("#opration").val('edit');
$("#vendoraddtype").val('edit');
$("#vendoraddissueid").val(expenseId);

var url = "{{ route('assets.expense.edit', ['@', '#']) }}";
url = url.replace('@', expenseId);
url = url.replace('#', type);

$.ajax({
url: url,
method: 'GET',
success: function(data) {
if (data.success == true) {
var expense = data.data.expense;
if (type === "Driver") {
    $("#driver_id").val(expense.DRIVER_ID);
    $("#trailer_id").val("");
    $("#truck_id").val("");
    $("#load_id").val("");
} else if (type === "Trailer") {
    $("#trailer_id").val(expense.TRAILER_ID);
    $("#driver_id").val("");
    $("#truck_id").val("");
    $("#load_id").val("");
} else if (type === "Truck") {
    $("#truck_id").val(expense.TRUCK_ID);
    $("#trailer_id").val("");
    $("#driver_id").val("");
    $("#load_id").val("");
}
else if (type === "Loads") {
    $("#load_id").val(expense.LOAD_ID);
    $("#trailer_id").val("");
    $("#driver_id").val("");
    $("#truck_id").val("");
}

$("#expenseModal").modal("show");
$("#AP_ID").val(expense.AP_ID);
$("#exp_vendor_id").val(expense.VENDOR_ID);
$("#ORIG_AMT").val(expense.ORIG_AMT);
$("#BILL_NUMBER").val(expense.BILL_NUMBER);
if (expense.TX_DUE != '' && expense.TX_DUE !=  null && expense.TX_DUE != undefined && expense.TX_DUE != '0000-00-00 00:00:00') {
    var TX_DUE = expense.TX_DUE;
    var TX_DUE_formated = TX_DUE.substring(0, 10);
    $("#TX_DUE").val(TX_DUE_formated);
}
$("#TX_REFERENCE").val(expense.TX_REFERENCE);
$("#exp_TYPE").val(expense.TYPE);

$("#NOTES").text(expense.NOTES);
$("#old_exp_document").val(expense.DOCUEMTNS);

$('#exp_TYPE option[value="' + expense.TYPE + '"]').prop('selected', true);
$('#exp_TYPE').trigger('change');
$('#exp_vendor_id option[value="' + expense.VENDOR_ID + '"]').prop('selected', true);
$('#exp_vendor_id').trigger('change');
$("#PAID_DATE").val(expense.PAID_DATE);
if (expense.PAID === 'YES') {
        $('#paid_toggle').prop('checked', true);
        $('#PAID_DATE').show();
        $('#paidDateContainer').show();
    } else {
        $('#paidDateContainer').hide();
        $('#paid_toggle').prop('checked', false);
        $('#PAID_DATE').hide();
        $('#PAID_DATE').val("");
    }
if(expense.DOCUEMTNS != null || expense.DOCUEMTNS != undefined){
    if (type === "Driver") {
        var expenurl = '{{asset('driver/expenseDocuments/')}}/'+ expense.DOCUEMTNS;
    } else if (type === "Trailer") {
        var expenurl = '{{asset('trailers/expenseDocuments/')}}/'+ expense.DOCUEMTNS;
    } else if (type === "Truck") {
        var expenurl = '{{asset('truck/expenseDocuments/')}}/'+ expense.DOCUEMTNS;
    } else {
        var expenurl = '{{asset('expense/')}}/'+ expense.DOCUEMTNS;
    }
    $("#expdocumentLink").html(`<div class="col-md-6 mt-3"> <a href="${expenurl}" download><i class="fas fa-file"></i> ${expense.DOCUEMTNS}</a> </div>`);
    }


} else if (data.success == false) {
toastr.error(data.message);
} else {
toastr.error('OOPS ! Something Went Wrong');
}
},
error: function(error) {
toastr.error(error);
}
});

}

$('#addExpenseTypebtn').click(function() {
        $('#addExpenseTypeModal').modal('show');


});

$('#addExpenseTypeModal').on('show.bs.modal', function() {

        $('#expenseModal').modal('hide');
    });
$('#addExpenseTypeModal').on('hidden.bs.modal', function() {

        $('#expenseModal').modal('show');

});

$('.closeExpensetype').click(function() {
    $('#addExpenseTypeModal').modal('hide');

});

function expenseTypeChange(select) {

    const selectedText = select.options[select.selectedIndex].text.replace(/\s+/g, '').toLowerCase();
    const vendorSelect = document.getElementById('exp_vendor_id');

    if (selectedText === 'efsmoneycode') {
    $('.refno').addClass('d-none');
    vendorSelect.disabled = true;

    @if(!empty($vendorsefsname->VENDOR_ID))
        $('#exp_vendor_id option[value="{{ $vendorsefsname->VENDOR_ID }}"]').prop('selected', true);
        $('#exp_vendor_id').trigger('change');
        $('#efsvendor').val('{{ $vendorsefsname->VENDOR_ID }}');
    @endif
} else {
    $('.refno').removeClass('d-none');
    vendorSelect.disabled = false;
    $('#efsvendor').val(''); // Clear efsvendor input
}
}

$('#addExpenseForm').submit(function(e) {
            e.preventDefault();
            var form = document.getElementById('addExpenseForm');
            var formData = new FormData(form);

            $.ajax({
                url: "{{ route('assets.expense.update') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success == true) {
                        toastr.success(response.message);
                        $("#expenseModal").modal("hide");
                        table.DataTable().ajax.reload();
                    } else if (response.success == false) {
                        $("#expenseModal").modal("hide");
                        toastr.error(response.message);
                    } else {
                        toastr.error('OOPS! Something Went Wrong.');
                    }
                },
                error: function(error) {
                    $('#DueDateError').text(error.responseJSON.errors.TX_DUE);
                    $('#expenseTypeError').text(error.responseJSON.errors.TYPE);
                    $('#amountError').text(error.responseJSON.errors.ORIG_AMT);
                    $('#vendorError').text(error.responseJSON.errors.VENDOR_ID);
                }
            });
        });

</script>

@endsection