@extends('template.app')

@section('meta')
@endsection

@section('title')
    Transfer Create
@endsection

@section('styles')
<link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">
<style>
    .col-sm-3{
        font-size:15px;
    }
    .form-control{
        height:32px;
        font-size:13px;
    }
    .custom-form-spacing {
      margin-bottom: -5px !important;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Transfers</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('transfer') }}" class="text-muted">Transfers</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Create</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('transfer.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                        <div class="row">
                            <!--<div class="form-group col-sm-4 custom-form-spacing">-->
                            <!--    <label for="vin_number">VIN Number :-</label>-->
                            <!--    <input type="text" class="form-control" name="vin_number" id="vin_number_input" placeholder="Enter or select VIN">-->
                            <!--    <div id="vin_info" class="mt-2" style="font-size: 13px;"></div>-->
                            <!--    <span class="kt-form__help error vin_number"></span>-->
                            <!--</div>-->
                            
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="vin_number">VIN Number :-</label>
                                <input type="text" class="form-control" name="vin_number" id="vin_number_input" placeholder="Enter or select VIN">
                                <input type="hidden" name="inventory_id" id="inventory_id"> 
                                <div id="vin_info" class="mt-2" style="font-size: 13px;"></div>
                                <span class="kt-form__help error vin_number"></span>
                            </div>

                            @if(auth()->user()->roles->pluck('name')->contains('admin'))
                                <div class="form-group col-sm-4 custom-form-spacing">
                                    <label for="from_branch">From Branch :-</label>
                                    <select class="form-control" name="from_branch" id="from_branch">
                                        <option value="">Select From Branch</option>
                                        @foreach($branches as $row)
                                            <option value="{{ $row->id }}">{{ $row->name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="kt-form__help error from_branch"></span>
                                </div>
                            @endif
                            <div class="form-group col-sm-3 custom-form-spacing">
                                <label for="to_branch">To Branch :-</label>
                                <select class="form-control" name="to_branch" id="to_branch">
                                    <option value="">Select To Branch</option>
                                    @if(isset($branches) && $branches->isNotEmpty())
                                        @foreach($branches as $row)
                                            <option value="{{ $row->id }}"> {{ $row->name }} </option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                             <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Car Model :-</label>
                                <select class="form-control" name="car_model" id="car_model">
                                    <option value="">Select Car Model</option>
                                    @if(isset($carmodel) && $carmodel->isNotEmpty())
                                        @foreach($carmodel as $row)
                                            <option value="{{ $row->id }}"> {{ $row->name }} </option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                             <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Car Varient :-</label>
                                <select class="form-control" name="car_varient" id="car_varient">
                                    <option value="">Select Car Varient</option>
                                    @if(isset($carvarient) && $carvarient->isNotEmpty())
                                        @foreach($carvarient as $row)
                                            <option value="{{ $row->id }}"> {{ $row->name }} </option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-3 custom-form-spacing">
                                <label for="to_branch">Driver Name :-</label>
                                <input type="text" class="form-control" placeholder="Enter Driver Name" name="driver_name" id="driver_name">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Driver Licence Number :-</label>
                                <input type="text" class="form-control" placeholder="Enter Driver Licence Number" name="driver_lic" id="driver_lic_number">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Driver Pan Number :-</label>
                                <input type="text" class="form-control" placeholder="Enter Driver Pan Number" name="driver_pan" id="driver_pan_number">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-3 custom-form-spacing">
                                <label for="to_branch">Car Image 1 :-</label>
                                <input type="file" class="form-control" name="car_image_1">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Car Image 2 :-</label>
                                <input type="file" class="form-control" name="car_image_2">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Car Image 3 :-</label>
                                <input type="file" class="form-control" name="car_image_3">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-3 custom-form-spacing">
                                <label for="to_branch">Car Image 4 :-</label>
                                <input type="file" class="form-control" name="car_image_4">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Car Image 5 :-</label>
                                <input type="file" class="form-control" name="car_image_5">
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="to_branch">Transfer Remark :-</label>
                                <textarea class="form-control" placeholder="Enter Transfer Remark" name="remark"></textarea>
                                <span class="kt-form__help error to_branch"></span>
                            </div>
                            <div class="form-group col-sm-3 custom-form-spacing">
                                <label for="status">Tool Kit</label>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="tool_kit" id="tool_kit" value='1'>
                                  <label class="form-check-label" for="tool_kit">
                                    Yes
                                  </label>
                                </div>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="tool_kit" id="tool_kit1" checked value='0'>
                                  <label class="form-check-label" for="tool_kit1">
                                     No
                                  </label>
                                </div>
                            </div>
                                                        
                            <div class="form-group col-sm-4 custom-form-spacing">
                                <label for="status">Health Kit</label>  
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="health_kit" id="health_kit" value='1'>
                                  <label class="form-check-label" for="health_kit">
                                    Yes
                                  </label>
                                </div>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="health_kit" id="health_kit1" checked value='0'>
                                  <label class="form-check-label" for="health_kit1">
                                     No
                                  </label>
                                </div>
                            </div>                            
                            <div class="form-group col-sm-4">
                                <label for="status">Spare blub</label>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="spare_bulb" id="spare_bulb" value='1'>
                                  <label class="form-check-label" for="spare_bulb">
                                    Yes
                                  </label>
                                </div>
                                <div class="form-check col-sm-14">
                                  <input class="form-check-input" type="radio" name="spare_bulb" id="spare_bulb1" checked value='0'>
                                  <label class="form-check-label" for="spare_bulb1">
                                     No
                                  </label>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="status">Harzard Triangle</label>
                                 <div class="form-check">
                                  <input class="form-check-input" type="radio" name="harzard_triangle" id="harzard_triangle" value='1'>
                                  <label class="form-check-label" for="harzard_triangle">
                                    Yes
                                  </label>
                                </div>
                                <div class="form-check col-sm-14">
                                  <input class="form-check-input" type="radio" name="harzard_triangle" id="harzard_triangle1" checked value='0'>
                                  <label class="form-check-label" for="harzard_triangle1">
                                     No
                                  </label>
                                </div>
                            </div>
                            <div class="form-group col-sm-4">
                                <label for="status">Received vehicle in good condition</label>
                                <div class="form-check">
                                  <input class="form-check-input" type="radio" name="good_condition" id="good_condition" value='1'>
                                  <label class="form-check-label" for="good_condition">
                                    Yes
                                  </label>
                                </div>
                                <div class="form-check col-sm-14">
                                  <input class="form-check-input" type="radio" name="good_condition" id="good_condition1" checked value='0'>
                                  <label class="form-check-label" for="good_condition1">
                                     No
                                  </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-primary">Submit</button>
                            <a href="{{ route('transfer') }}" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- varient as per car model -->
<script>
    $(document).ready(function(){
        
        let vinTimer = null;
        let lastVin = '';
        
        $('#vin_number_input').on('input', function () {
        
            clearTimeout(vinTimer);
            let vin = $(this).val().trim();
        
            if (vin.length < 5 || vin === lastVin) {
                return;
            }
        
            vinTimer = setTimeout(function () {
        
                $.ajax({
                    url: '/transfer-vin-details',
                    type: 'GET',
                    data: { vin_number: vin },
                    success: function (info) {
        
                        lastVin = vin;
        
                        if (!info) {
                            $('#vin_info').html(
                                '<span class="text-danger">VIN not found or is marked as sold.</span>'
                            );
                            resetVinFields();
                            return;
                        }
        
                        $('#inventory_id').val(info.inventory_id);
                        $('#from_branch').val(info.branch_id);
                        $('#car_model').val(info.car_model_id).trigger('change');
        
                        setTimeout(function () {
                            $('#car_varient').val(info.car_varient_id);
                        }, 300);
                    }
                });
        
            }, 300); // debounce
        });
        
        function resetVinFields() {
            $('#inventory_id').val('');
            $('#from_branch').val('');
            $('#car_model').val('');
            $('#car_varient').val('');
        }

        // When user types VIN
        
        
        $('#car_model').change(function(){
            var car_model = $('#car_model').val();
            $.ajax({
                url : "{{ url('transfer/varientaspercarmodel') }}",
                data : {'car_model' : car_model,"_token": "{{ csrf_token() }}"},
                type : 'post',
                dataType : 'html',
                success: function(html) {
                    $('#car_varient').html(html);
                }
            });
            return false;
        });

        // VIN-based data map from controller

        // Helper function to match select option by text
        function getKeyByText(selectId, text) {
            let val = "";
            $(`${selectId} option`).each(function () {
                if ($(this).text().trim().toLowerCase() === text.trim().toLowerCase()) {
                    val = $(this).val();
                    return false;
                }
            });
            return val;
        }

        // VIN blur event to auto-fill model and variant

        // Form validation
        var form = $('#form');
        form.submit(function(e) {
            $('.kt-form__help').html('');
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: new FormData(this),
                dataType: 'json',
                async: false,
                processData: false,
                contentType: false,
                success: function(json) {
                    return true;
                },
                error: function(json) {
                    if (json.status === 422) {
                        e.preventDefault();
                        var errors_ = json.responseJSON;
                        $.each(errors_.errors, function(key, value) {
                            $('.' + key).html(value);
                        });
                    }
                }
            });
        });
    });
</script>

@endsection