@extends('layouts.adminapp')

@section('content')
@section('head',__('lng.Vehicle'))
{{-- Property Show --}}

<style>

    
    .fixed-size-text-field {
    width: 153px; /* Set the desired width */
    padding: 8px; /* Adjust padding as needed */
    box-sizing: border-box; /* Include padding in the total width */
}
</style>
<div class="container-fluid">       
    <main >
<div class="card shadow mb-4">
    <div class="card-body bg-dark py-3 d-flex flex-row align-items-center justify-content-between">
        <div class="">
            <div class="py-2"><img class="" width="100px" src="{{asset('storage/Vehicle/Photo/'.$Vehicle->photo)}}"/></div>
            <div class=""><h3 class="pt-3 font-weight-bold text-white">{{$Vehicle->title}}</h3></div>
        </div>
        <a href="{{route('Vehicle.index')}}" class="btn btn-primary btn-icon-split">
        <span class="icon text-white-50">
            <i class="mdi mdi-arrow-left"></i>
        </span>
        <span class="text">Back</span>
        </a>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.VehicleType')}}</label>
                <p>{{$Vehicle->vehicletype->title}}</p>
            </div>
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.VehicleNumber')}}</label>
                <p>{{$Vehicle->vehiclenumber}}</p>
            </div>
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.ChasisNumber')}}</label>
                <p>{{$Vehicle->chaisnumber}}</p>
            </div>
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.LastReadingKM')}}</label>
                <p>{{$Vehicle->lastreadingkm}}</p>
            </div>
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.LastReadingDate')}}</label>
                @php 
                $DTs=0;
                if($Vehicle->lastreadingdate) {
                    $DTs =  date("d-m-Y",strtotime($Vehicle->lastreadingdate)); 
                }
                @endphp
                <p>{{$DTs}}</p>
            </div>
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.nextservice_km')}}</label>
                <p>{{$Vehicle->nextservice_km}}</p>
            </div>
            <div class="col-sm-6 col-6">
                <label class="h5 text-gray-900">{{__('lng.Narration')}}</label>
                <p>{{$Vehicle->narration}}</p>
            </div>
        </div>
    </div>
</div>
    <div class=" mb-4">
        <div class="card">
            <div class="card-body">
                <div class="container table-responsive">
                    <div class="row ">
                        <div class="font-weight-bold d-flex flex-row ">
                            <div class="col-12">{{__('lng.Title')}}</div>
                            <div class="col-12">{{__('lng.Value')}}</div>
                            <div class="col-10">{{__('lng.Expiry')}}</div>
                            <div class="col-4">{{__('lng.Action')}}</div>
                        </div>
                        
                    </div>
                    <hr>
                    @if($VehicleDetails->count())
                        
                    @foreach($DetailProperties as $DetailProperty)
                        @php
                            $exists = $VehicleDetailes->where('property_id', $DetailProperty->id)->where('vehicle_id', $Vehicle->id)->exists();
                            $currentVehicleDetails = $exists ? $VehicleDetailes->where('property_id', $DetailProperty->id)->where('vehicle_id', $Vehicle->id)->first() : null;
                        @endphp

                        <form method="POST" action="{{ $exists ? route('VehicleDetails.update', $currentVehicleDetails->id) : route('VehicleDetails.store') }}">
                            @csrf
                            @if($exists)
                                @method('patch')
                            @endif
                            <input type="hidden" name="vehicle_id" value="{{ $Vehicle->id }}">
                            <input type="hidden" name="property_id" value="{{ $DetailProperty->id }}">
                            <div class="row">
                                <div class="d-flex flex-row align-items-center">
                                    <div class="col-4 fixed-size-text-field">{{ $DetailProperty->title }}</div>
                                    <div class="col-6 fixed-size-text-field">
                                        @if($DetailProperty->type=='Month')
                                            <input type="month" class="form-control" name="monthvalue" id="value_{{ $DetailProperty->id }}" required value="{{ $currentVehicleDetails ? date('Y-m', strtotime($currentVehicleDetails->value)) : '' }}" oninput="updateExpiry('{{ $DetailProperty->id }}', this.value, {{ $DetailProperty->period }})">
                                        @elseif($DetailProperty->type=='KM')
                                            <input type="number" class="form-control" name="monthvalue" id="value_{{ $DetailProperty->id }}" required value="{{ $currentVehicleDetails ? $currentVehicleDetails->value : '' }}" oninput="updateExpiry('{{ $DetailProperty->id }}', this.value, {{ $DetailProperty->period }})">
                                        @endif
                                    </div>
                                    <div class="col-6 fixed-size-text-field">
                                        @if($DetailProperty->type=='Month')
                                            <input class="form-control" type="month" name="expiry" id="expiry_{{ $DetailProperty->id }}" value="" disabled>
                                        @elseif($DetailProperty->type=='KM')
                                            <input class="form-control" type="number" name="expiry" id="expiry_{{ $DetailProperty->id }}" value="" disabled>
                                        @endif
                                    </div>
                                    <div class="col-2 fixed-size-text-field">
                                        <button type="submit" style="margin-left: 60px;" class="btn btn-info">{{ $exists ? __('lng.Update') : __('lng.Save') }}</button>
                                    </div>
                                </div>
                            </div>
                            <hr>
                        </form>
                    @endforeach
                        
                    @else
                        
                        @foreach($DetailProperties as $DetailProperty)
                            <form method="POST" action="{{ route('VehicleDetails.store') }}">
                                @csrf
                                <input type="hidden" name="vehicle_id" value="{{ $Vehicle->id }}">
                                <input type="hidden" name="property_id" value="{{ $DetailProperty->id }}">
                                <div class="row">
                                    <div class="d-flex flex-row align-items-center">
                                        <div class="col-4  fixed-size-text-field">{{ $DetailProperty->title }}</div>
                                        @if($DetailProperty->type=='Month')
                                        <div class="col-6  fixed-size-text-field"> <input type="month" class="form-control" name="monthvalue" id="monthvalue_{{ $DetailProperty->id }}" oninput="updateExpiry('{{ $DetailProperty->id }}', this.value, {{ $DetailProperty->period }})"></div>
                                        <div class="col-6  fixed-size-text-field"><input type="month" class="form-control" name="expiry" id="expiry_{{ $DetailProperty->id }}" disabled></div>
                                        @elseif($DetailProperty->type=='KM')
                                        <div class="col-6  fixed-size-text-field"> <input type="number" class="form-control" name="monthvalue" id="monthvalue_{{ $DetailProperty->id }}" oninput="updateExpiry('{{ $DetailProperty->id }}', this.value, {{ $DetailProperty->period }})"></div>
                                        <div class="col-6  fixed-size-text-field"><input type="number" class="form-control" name="expiry" id="expiry_{{ $DetailProperty->id }}" disabled></div>
                                        @endif
                                        
                                        <div class="col-2  fixed-size-text-field"><button type="submit" style="margin-left: 60px;" class="btn btn-info ">{{__('lng.Save')}}</button></div>
                                    </div>
                                </div>
                                <hr>
                            </form>
                            
                        @endforeach
                    
                    @endif
                </div>
            </div>
        </div>
        <script>
            // Set initial expiry value only when creating a new record
            window.addEventListener('DOMContentLoaded', function() {
                @foreach($DetailProperties as $DetailProperty)
                
                    var expiryValue='value_'+{{ $DetailProperty->id }};
                    var periodValue={{$DetailProperty->period}};
                    var expiryID='expiry_'+{{ $DetailProperty->id }};
                    
                    var formattedExpiry;
                    var expiryField = document.getElementById(expiryValue).value;
                    var expiryId = document.getElementById(expiryValue).type;
                    var expiryDate = new Date(expiryField);
                    expiryDate.setMonth(expiryDate.getMonth() + periodValue);
                    // alert(expiryDate);
                    if(expiryId === 'month')
                    {
                        formattedExpiry = expiryDate.toLocaleDateString('en-CA', { year: 'numeric', month: '2-digit' });
                        
                        document.getElementById(expiryID).value=formattedExpiry;
                    }
                    else if(expiryId === 'number')
                    {
                        document.getElementById(expiryID).value=eval(expiryField)+eval(periodValue);
                    }
                    
                @endforeach
            });
        
            // Function to update expiry based on the user's input
            function updateExpiry(id, monthValue, periodValue) {
                var expiryDate = new Date(monthValue);
                expiryDate.setMonth(expiryDate.getMonth() + periodValue);
                
                var formattedExpiry;
                var expiryField = document.getElementById('expiry_' + id);
        
                if (expiryField.type === 'month') {
                    formattedExpiry = expiryDate.toISOString().slice(0, 7);
                } else if (expiryField.type === 'number') {
                    formattedExpiry = eval(monthValue) +eval(periodValue);
                }
        
                expiryField.value = formattedExpiry;
            }
        </script>
    </div>
</main>
               
</div>  

@endsection