@extends('template.app')

@section('meta')
@endsection

@section('title')
    Transter Accept
@endsection

@section('styles')
@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">Transters</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">Transters</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">View</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.accept') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ $id }}">

                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label for="product">Select VIN Number</label>
                                <select class="form-control" name="product" id="product">
                                    <option value="">Select VIN Number</option>
                                    @if(isset($inventories) && $inventories->isNotEmpty())
                                        @foreach($inventories as $row)
                                                <option value="{{ $row->id }}"> {{ $row->vin_number }} - {{ $row->veriant }} </option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error product"></span>
                            </div>
                            <!--<div class="form-group col-sm-3">-->
                            <!--    <label for="transfer_fee">Transfer Fee</label>-->
                            <!--    <input type="text" name="transfer_fee" id="transfer_fee" class="form-control digit">-->
                            <!--    <span class="kt-form__help error transfer_fee"></span>-->
                            <!--</div>-->
                            <div class="form-group col-sm-3">
                                <label for="name">Name</label>: <span id="name"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="veriant">Veriant</label>: <span id="veriant"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="key_number">Key Number</label>: <span id="key_number"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="engine_number">Engine Number</label>: <span id="engine_number"></span>
                            </div>
                            <!--<div class="form-group col-sm-3">-->
                            <!--    <label for="chassis_number">Chassis Number</label>: <span id="chassis_number"></span>-->
                            <!--</div>-->
                            <div class="form-group col-sm-3">
                                <label for="vin_number">Vin Number</label>: <span id="vin_number"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="ex_showroom_price">EX Showroom Price</label>: <span id="ex_showroom_price"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="interior_color">Interior Color</label>: <span id="interior_color"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="exterior_color">Exterior Color</label>: <span id="exterior_color"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="driver_name">Driver Name</label>: <span id="driver_name"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="driver_lic">Driver License Number</label>: <span id="driver_lic"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="driver_pan">Driver Pan Number</label>: <span id="driver_pan"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="car_image_1">Car Image1</label>: <span id="car_image_1"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="car_image_2">Car Image2</label>: <span id="car_image_2"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="car_image_3">Car Image3</label>: <span id="car_image_3"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="car_image_4">Car Image4</label>: <span id="car_image_4"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="car_image_5">Car Image5</label>: <span id="car_image_5"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="remark">Remark</label>: <span id="remark"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="status">Status</label>: <span id="status"></span>
                            </div>
                            
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Submit</button>
                            <a href="{{ route('transfer') }}" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        $('.digit').keyup(function(e){
            if (/\D/g.test(this.value)){
                this.value = this.value.replace(/\D/g, '');
            }
        });

        $('#product').change(function() {    
            let id = $(this).val();

            $.ajax({
                url: "{!! route('transfer.inventory.details') !!}"+"?id="+id,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if(response.code == 200){
                        data = response.data;
                        console.log(data);
                        $('#name').html(data.cm_name);
                        $('#veriant').html(data.cv_name);
                        $('#key_number').html(data.key_number);
                        $('#engine_number').html(data.engine_number);
                        $('#vin_number').html(data.vin_number);
                        $('#ex_showroom_price').html(data.ex_showroom_price);
                        $('#interior_color').html(data.int_name);
                        $('#exterior_color').html(data.ext_name);
                        $('#driver_name').html(data.d_name);
                        $('#driver_lic').html(data.d_lic);
                        $('#driver_pan').html(data.d_pan);
                        $('#car_image_1').html('<img src="{{ asset('storage/') }}/' + data.cri_1 + '" alt="Car Image" height="100" width="100">');
                        $('#car_image_2').html('<img src="{{ asset('storage/') }}/' + data.cri_2 + '" alt="Car Image" height="100" width="100">');
                        $('#car_image_3').html('<img src="{{ asset('storage/') }}/' + data.cri_3 + '" alt="Car Image" height="100" width="100">');
                        $('#car_image_4').html('<img src="{{ asset('storage/') }}/' + data.cri_4 + '" alt="Car Image" height="100" width="100">');
                        $('#car_image_5').html('<img src="{{ asset('storage/') }}/' + data.cri_5 + '" alt="Car Image" height="100" width="100">');
                        $('#remark').html(data.remarks);
                        $('#status').html(data.status);
                    }else{
                        $('#name').html('');
                        $('#veriant').html('');
                        $('#key_number').html('');
                        $('#engine_number').html('');
                   
                        $('#vin_number').html('');
                        $('#ex_showroom_price').html('');
                        $('#interior_color').html('');
                        $('#exterior_color').html('');
                        $('#driver_name').html('');
                        $('#driver_lic').html('');
                        $('#driver_pan').html('');
                        $('#car_image_1').html('');
                        $('#car_image_2').html('');
                        $('#car_image_3').html('');
                        $('#car_image_4').html('');
                        $('#car_image_5').html('');
                        $('#remark').html('');
                        $('#status').html('');
                    }
                }
            });
        });
    });
</script>
<script>
    // $(document).ready(function() {
    //     var form = $('#form');
    //     $('.kt-form__help').html('');
    //     form.submit(function(e) {
    //         $('.help-block').html('');
    //         $('.m-form__help').html('');
    //         $.ajax({
    //             url: form.attr('action'),
    //             type: form.attr('method'),
    //             data: new FormData($(this)[0]),
    //             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;
    //                     $('.kt-form__help').html('');
    //                     $.each(errors_.errors, function(key, value) {
    //                         $('.' + key).html(value);
    //                     });
    //                 }
    //             }
    //         });
    //     });
    // });
</script>
@endsection