@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; }
    .table:not(.table-bordered) td, .table:not(.table-bordered) th, .table:not(.table-bordered) tr {
    font-size: 1.075rem!important;
 
}
.odd {
    background-color: #f2f2f2 !important;
}
    @media print {
            #kt_header {
                display: none;
            }

            #kt_footer {
                display: none !important;
            }

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

</style>
@section('content')
@php
                                                $currentYear = date('Y'); 
                                                $selectedYear = request()->get('year') ?? $currentYear; // Default to current year if not selected
                                                $startYear = 2019; // Set your starting year
                                    //echo "<pre>";print_r($trailer);
                                            @endphp

    <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">Compliance Report</h3>
                <div class="d-flex flex-wrap align-items-center my-1"  id="topheadsection">
                    <h3 class="fw-bold me-5 my-1" id="truckreporthead">Compliance <span class="text-muted">Report</span>
                    </h3>
                    <a id="backbtn" href="{{ route('assets.trailers.edit',$trailer->ID) }}" class="btn btn-primary btn-sm me-2"><i
                    class="fa fa-arrow-left" aria-hidden="true"></i>Back</a>

                                    <div class="row" id="yearDropdown">

                                    <select id="year" class="form-control ms-4" style="padding: 7px; display:none">
                                            <option value="">Please select</option>
                                       
                                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                                <option value="{{ $year }}" @if($selectedYear == $year) selected @endif>{{ $year }}</option>
                                            @endfor
                                        </select>
                                  </div>

                                  <a class="btn btn-primary btn-sm me-2 ms-10" href="javascript:void(0);" onclick="window.print()" id="printButton">Print</a>
                                  
                                    <a id="backbtn" target="_blank" href="{{ route('assets.trailers.edit',$trailer->ID) }}" class="btn btn-primary btn-sm ms-2">View Trailer #{{$trailer->ID}}</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">
                                        <div  style="margin:0 auto;text-align:center;"> <span  style="font-weight: bold; font-size: 20px; margin-top: 9px;">{{ getAuthCompanyName() }} - Trailer#({{$trailer->ID}})</span></div>
                                        <h3 style="color:green">Compliance Report</h3>
                                        <hr>    
                                        <div class="row">
                                        <table class="table first-table" width="100%">
                                                <tr>
                                                  <td><b>Trailer Number:</b> {{$trailer->TRAILER_ID}}</td>
                                                  <td><b>Make: </b>{{$trailer->USER1}}</td>
                                                  <td><b>Model:</b> {{$trailer->UNIT_ID}}</td>
                                                  <td><b>Year:</b> {{$trailer->YEAR}}</td>
                                                  

                                                </tr>
                                                <tr>
                                                   <td><b>Plate / Reg #:</b> {{$trailer->PLATE}}</td>
                                                   <td><b>VIN:</b> {{$trailer->VIN}}</td>                                                  
                                                   <td><b>Registration Expiration:</b> {{ ($trailer->LIC_1_EXP_DATE && $trailer->LIC_1_EXP_DATE != '0000-00-00 00:00:00') ? date('m/d/Y',strtotime($trailer->LIC_1_EXP_DATE)) : ''}}</td>
                                                   <td><b>Type/LENGTH</b>
                                                    {{$trailer->TRAILER_TYPE}}/{{$trailer->LENGTH_1}}</td>                                             
                                                 </tr>
                                               
                                            </table>
                                              </div>                                            
                                            <hr>
                                            <div class="row">                        
                                            <div class="table-responsive p-5">
                                              <h2 class="fw-bold text-gray-900 mt-2">All Repairs</h2>
                                                {!! $dataTable->table() !!}

                                                </div>

                                            </div>
                                            <div class="table-responsive p-5">
                                            <h2 class="fw-bold text-gray-900 mt-2">All DVIR</h2>
                                            <table id="truckDvirList"
                                                    class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
                                                    <thead>
                                                        <tr class="thead-bg-color">
                                                            <th class="fs-7 text-gray-500 text-uppercase">#</th>
                                                            <th class="fs-7 text-gray-500 text-uppercase">Loacation</th>
                                                            <th class="fs-7 text-gray-500 text-uppercase">Odm start</th>
                                                            <th class="fs-7 text-gray-500 text-uppercase">Date Time</th>                                                           
                                                           
                                                        </tr>
                                                    </thead>

                                                </table>
                                            </div>

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

@endsection()
@section('script')
{!! $dataTable->scripts() !!}
    <script>

        $('.datetimepicker').daterangepicker({
            timePicker: false ,
            singleDatePicker: true,
            locale: {
                format: 'MM/DD/YYYY'
            }
        });

        document.getElementById('printButton').addEventListener('click', function() {
            window.print();
        });

    const table = $('#truckRepairList');
    table.on('preXhr.dt', function(e, setting, data) {
    data.trailerid = '{{request()->route('trailerId')}}';
    data.status = '{{request()->route('status')}}';

});

const table1 = $('#truckDvirList');
        table1.on('preXhr.dt', function(e, setting, data) {
            data.trailerId = '{{ request()->route('trailerId') }}';
        });
        $('#truckDvirList').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'csv', 'excel', 'print', 'reset', 'reload'
            ],
            processing: true,
            serverSide: true,
            searching: false,
            ajax: '{!! route('assets.trailers.complinceDvirDataTable') !!}',
            data: {
                formName: 'afscpMcn',
                action: 'search',
            },
            paging: false, 
            pageLength: -1, 
            order: [
                [0, 'desc']
            ],
            columns: [
                {
                    data: 'dvir_id',
                    name: 'dvir_id'
                },
                {
                    data: 'location',
                    name: 'location'
                },
                {
                    data: 'odm_start',
                    name: 'odm_start'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                // {
                //     data: 'action',
                //     name: 'action',
                //     orderable: false,
                //     searchable: false
                // }
            ],
            drawCallback: function(settings) {

            },
            initComplete: function(settings, json) {
                $(".dt-buttons").addClass("d-none");
            }
        });
    </script>
@endsection