@extends('layouts.master')

@section('title') @lang('translation.Battery') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ URL::asset('/assets/libs/datepicker/datepicker.min.css') }}">
@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Battery @endslot
@slot('title') Add Battery @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
        <form  class="needs-validation" id="edit_form" action="{{ route('purchased-service.battery.update', ['battery' => $battery->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
        @method('put')
        @csrf
            <input name="id" type="hidden"  value="{{ $battery->id }}" />
    
            <div class="card">
                <div class="card-body">
                    <h5>Purchased Service Details</h5><br>
                    <div class="mb-3 row">
                        <label for="purchased_service_id" class="col-md-2 col-form-label">Purchased Service</label>
                        <div class="col-md-6">
                            <select id="purchased_service_id" name="purchased_service_id" class="form-select" required>
                                <option value=''>Select...</option>
                                @foreach($purchasedServiceList as $purchasedService)
                                    <option value="{{ $purchasedService->id }}" {{ $battery->purchased_service_id == $purchasedService->id ? 'selected' : ''}} >{{ $purchasedService->purchased_service}} </option>
                                @endforeach 
                            </select>
                            <div  id="purchased_service_id_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="location_id" class="col-md-2 col-form-label">Location</label>
                        <div class="col-md-6">
                            <select id="location_id" name="location_id" class="form-control" required>
                                <option value=''>Select...</option>
                                @foreach($locationList as $location)
                                    <option value="{{ $location->id }}"  {{ $battery->location_id == $location->id ? 'selected' : ''}} >{{ $location->location }}</option>
                                @endforeach 
                            </select>
                            <div  id="location_id_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="vendor_workshop_id" class="col-md-2 col-form-label">Service Vendor Workshop</label>
                        <div class="col-md-6">
                            <select id="vendor_workshop_id" name="vendor_workshop_id" class="form-select" required>
                                <option value=''>Select...</option>
                                @foreach($serviceWorkshopList as $serviceWorkshop)
                                    <option value="{{ $serviceWorkshop->id }}" address="{{ $serviceWorkshop->address }}"  {{ $battery->vendor_workshop_id == $serviceWorkshop->id ? 'selected' : ''}} >{{ $serviceWorkshop->service_workshop}}</option>
                                @endforeach 
                            </select>
                            <div  id="vendor_workshop_id_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="workshop_address" class="col-md-2 col-form-label">Workshop Address</label>
                        <div class="col-md-6">
                            <input id="workshop_address" name="workshop_address" type="text" class="form-control" placeholder="Name the Battery Dealer" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5>Product Details</h5><br>
                    <div class="mb-3 row">
                        <label for="asset_type_id" class="col-md-2 col-form-label">Product Type</label>
                        <div class="col-md-6">
                            <select id="asset_type_id" name="asset_type_id" class="form-select"required>
                                <option value=''>Select...</option>
                                @foreach($assetTypeList as $assetType)
                                    <option value="{{ $assetType->id }}" {{ $assetType->id == $battery->asset_type_id ? 'selected'  : ''}}>{{ $assetType->product_type }}</option>
                                @endforeach 
                            </select>
                            <div  id="asset_type_id_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="asset_id" class="col-md-2 col-form-label">Model Name</label>
                        <div class="col-md-6">
                            <select id="asset_id" name="asset_id" class="form-select"  data-selected="{{ $battery->asset_id }}"  required>
                                <option value=''>Select...</option>
                            </select>
                            <div  id="asset_id_errors"  class="invalid-feedback">
                                Required
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="vin_number" class="col-md-2 col-form-label">Model ID</label>
                        <div class="col-md-6">
                            <input id="vin_number" name="vin_number" type="text" class="form-control" placeholder="Asset VIN Number" readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5>Product Details</h5><br>
                
                    <div class="mb-3 row">
                        <label for="bill_number" class="col-md-2 col-form-label">Bill No</label>
                        <div class="col-md-6">
                            <input id="bill_number" name="bill_number" type="text" class="form-control" placeholder="Bill No" value="{{ $battery->bill_number }}" />
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="service_cost" class="col-md-2 col-form-label">Service Cost</label>
                        <div class="col-md-6">
                            <input id="service_cost" name="service_cost" type="text" class="form-control" placeholder="Service Cost" value="{{ $battery->service_cost }}" />
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="start_date" class="col-md-2 col-form-label">Start date</label>
                        <div class="col-md-6">
                            <div class="input-group" id="datepicker2">
                                <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Start Date"
                                    value="{{ date('d-m-Y', strtotime($battery->start_date)) }}" 
                                    data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                    data-provide="datepicker" data-date-autoclose="true">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="estimated_delivery_date" class="col-md-2 col-form-label">Start date</label>
                        <div class="col-md-6">
                            <div class="input-group" id="datepicker2">
                                <input type="text" class="form-control" id="estimated_delivery_date" name="estimated_delivery_date" placeholder="Start Date"
                                    value="{{ date('d-m-Y', strtotime($battery->estimated_delivery_date)) }}" 
                                    data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                    data-provide="datepicker" data-date-autoclose="true">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="actual_delivery_date" class="col-md-2 col-form-label">Start date</label>
                        <div class="col-md-6">
                            <div class="input-group" id="datepicker2">
                                <input type="text" class="form-control" id="actual_delivery_date" name="actual_delivery_date" placeholder="Start Date"
                                    value="{{ date('d-m-Y', strtotime($battery->actual_delivery_date)) }}" 
                                    data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                    data-provide="datepicker" data-date-autoclose="true">

                                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="remarks" class="col-md-2 col-form-label">Remarks</label>
                        <div class="col-md-6">
                            <input id="remarks" name="remarks" type="text" class="form-control" placeholder="Remarks" value="{{ $battery->remarks }}" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">

                        <div class="d-flex flex-wrap gap-2">
                            <button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
                        </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/datepicker/datepicker.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/custom.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        let token = '{{ csrf_token() }}' ;
        updateWorkshopData($('#vendor_workshop_id'));
        updateAssetData($('#asset_id'));
        $('#vendor_workshop_id').on('change', function() {            
            updateWorkshopData($('#asset_id'));
        });
        actionUrl = "{{ route('asset.battery.list-by-type') }}";
        updateAssetByType(actionUrl,  token);
        
        $('#asset_type_id').on('change', function() {
            actionUrl = "{{ route('asset.battery.list-by-type') }}";
            updateAssetByType(actionUrl,  token);
            $('#vin_number').val('');
        });
        $('#asset_id').on('change', function() {
            let vin_number = $(this).find("option:selected").attr('vin_number');
            $('#vin_number').val(vin_number);
        });
        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('purchased-service.battery.validate') }}";
            form = $( "#edit_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
    function updateAssetData(ele){
        
        model_name = ele.find("option:selected").attr('model_name');
        vin_number = ele.find("option:selected").attr('vin_number');
        $('#model_name').val(model_name);
        $('#vin_number').val(vin_number);
    }
    
    function updateWorkshopData(ele){
        
        address = ele.find("option:selected").attr('address');
        $('#workshop_address').val(address);
    }
    </script>
@endsection