@extends('template.app')

@section('meta')
@endsection

@section('title')
exchange
@endsection

<style type="text/css">
    /*#galeria{
        display: flex;
    }*/
    #galeria img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }

    /*#pan_image_multi{
        display: flex;
    }*/
    #pan_image_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }

    /*#adhar_image_multi{
        display: flex;
    }*/
    #adhar_image_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }
/*#rcbook_multi{
        display: flex;
    }*/
    #rcbook_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }
    /*#insurance_multi{
        display: flex;
    }*/
    #insurance_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }
     /*#totto_multi{
        display: flex;
    }*/
    #totto_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }
   /* #documents_multi{
        display: flex;
    }*/
    #documents_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }

    /*#licance_image_multi{
        display: flex;
    }*/
    #licance_image_multi img{
        width: 85px;
        height: 85px;
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(0,0,0,0.2);
        opacity: 85%;
        padding: 3px;
    }
</style>
@section('styles')
<link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">

<link href="{{ asset('assets/css/select2.css') }}" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css"> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
@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">exchange</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('exchange') }}" class="text-muted">exchange</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('exchange.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')

                         <div class="row">
                         <div class="form-group col-sm-3">
                                <label for="obf_id">Select OBF </label>
                                <!-- <input type="text" name="obf_id" id="obf_id" class="form-control" placeholder="Select OBF"> -->
                                <select  class="form-control" id="obf_id" name="obf_id">
                                    <option value="">Select OBF</option>
                                    @foreach($obf as $obf1)
                                    <option value="{{$obf1->id }}">{{$obf1->customer_name }}</option>
                                    @endforeach
                                    
                                </select>
                                <span class="kt-form__help error obf_id"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="seller_detail">Seller Ddetail</label>
                                <input type="text" name="seller_detail" id="seller_detail" class="form-control" placeholder="Enter Seller Detail">
                                <span class="kt-form__help error seller_detail"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="company_name">Make</label>
                                <select  class="form-control" id="company_name" name="company_name">
                                    <option value="">Select Car Company</option>
                                    @foreach($carcompany as $carcompany1)
                                    <option value="{{$carcompany1->company_name }}">{{$carcompany1->company_name }}</option>
                                    @endforeach
                                    
                                </select>
                                <span class="kt-form__help error car_model"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="variant">Variant</label>
                                <input type="text" name="variant" id="variant" class="form-control" placeholder="Enter Variant">
                                <span class="kt-form__help error variant"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="manufacturing_year">Manufacturing Year</label>
                                <input type="number" name="manufacturing_year" id="manufacturing_year" class="form-control" placeholder="Enter Manufacturing Year">
                                <span class="kt-form__help error manufacturing_year"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="registration_number">Registration Number</label>
                                <input type="text" name="registration_number" id="registration_number" class="form-control" placeholder="Enter Registration Number">
                                <span class="kt-form__help error registration_number"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="chassis_number">Chassis Number</label>
                                <input type="number" name="chassis_number" id="chassis_number" class="form-control" placeholder="Enter Chassis Number">
                                <span class="kt-form__help error chassis_number"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="engine_number">Engine Number</label>
                                <input type="number" name="engine_number" id="engine_number" class="form-control" placeholder="Enter Engine Number">
                                <span class="kt-form__help error engine_number"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="colour">Colour</label>
                                <input type="text" name="colour" id="colour" class="form-control" placeholder="Enter Colour">
                                <span class="kt-form__help error colour"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="time">Time</label>
                                <input type="time" name="time" id="time" class="form-control" placeholder="Enter Time">
                                <span class="kt-form__help error time"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="date">Date</label>
                                <input type="date" name="date" id="date" class="form-control" placeholder="Enter date">
                                <span class="kt-form__help error date"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="date_of_registration">date of registration</label>
                                <input type="date" name="date_of_registration" id="date_of_registration" class="form-control" placeholder="Enter date of registration">
                                <span class="kt-form__help error date_of_registration"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="purchase_date">purchase date</label>
                                <input type="date" name="purchase_date" id="purchase_date" class="form-control" placeholder="Enter purchase date">
                                <span class="kt-form__help error purchase_date"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="amount">Amount</label>
                                <input type="number" name="amount" id="amount" class="form-control" placeholder="Enter Amount">
                                <span class="kt-form__help error amount"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="exchange_bonus">Exchange Bonus</label>
                                <input type="number" name="exchange_bonus" id="exchange_bonus" class="form-control" placeholder="Enter Exchange Bonus">
                                <span class="kt-form__help error exchange_bonus"></span>
                            </div>
                            
                            <div class="form-group col-sm-3">
                                <label for="amount_in_words">Amount in Words</label>
                                <input type="text" name="amount_in_words" id="amount_in_words" class="form-control" placeholder="Enter Amount in Words">
                                <span class="kt-form__help error amount_in_words"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="HPA">HPA</label>
                                <input type="text" name="HPA" id="HPA" class="form-control" placeholder="Enter Amount in HPA">
                                <span class="kt-form__help error HPA"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="car_status">Car Status</label>
                                <select  class="form-control" id="car_status" name="car_status">
                                    <option value="">Car Status</option>
                                     <option value="exchange">Exchange</option>
                                     <option value="purchase">Purchase</option>
                                </select>
                                <span class="kt-form__help error car_status"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="relation_with_obf">Relation With OBF</label>
                                <input type="text" name="relation_with_obf" id="relation_with_obf" class="form-control" placeholder="Enter Relation With OBF">
                                <span class="kt-form__help error relation_with_obf"></span>
                            </div>
                                    <div>
                                            <div class="form-group col-md-6">
                                                <label class="banknoc-label">Pan Card Photo</label>
                                                <div class="dropify-wrapper">
                                                    <div class="dropify-message"><span class="file-icon">
                                                            <p>Drag and drop profile image here or click</p>
                                                        </span>
                                                        <p class="dropify-error">Ooops, something wrong happended.</p>
                                                    </div>
                                                    <div class="dropify-loader"></div>
                                                    <div class="dropify-errors-container">
                                                        <ul></ul>
                                                    </div><input type="file" name="pan_image[]" id="pan_image" onchange="previewMultiple(event,'pan_image_multi','pan_image')" class="form-control dropify" data-default-file="" data-allowed-file-extensions="jpg png jpeg" data-max-file-size-preview="2M" multiple=""><button type="button" class="dropify-clear">Remove</button>
                                                    <div class="dropify-preview"><span class="dropify-render"></span>
                                                        <div class="dropify-infos">
                                                            <div class="dropify-infos-inner">
                                                                <p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>
                                                                <p class="dropify-infos-message">Drag and drop or click to replace</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="kt-form__help error pan_image"></span>
                                            </div>

                                            <div id="pan_image_multi" class="form-group col-md-3">
                                         </div>
                                            
                                        <!-- adhar image -->
                                        <div class="form-group col-md-6">
                                                <label class="banknoc-label">adhar Card Photo</label>
                                                <div class="dropify-wrapper">
                                                    <div class="dropify-message"><span class="file-icon">
                                                            <p>Drag and drop profile image here or click</p>
                                                        </span>
                                                        <p class="dropify-error">Ooops, something wrong happended.</p>
                                                    </div>
                                                    <div class="dropify-loader"></div>
                                                    <div class="dropify-errors-container">
                                                        <ul></ul>
                                                    </div><input type="file" name="adhar_image[]" id="adhar_image" onchange="previewMultiple(event,'adhar_image_multi','adhar_image')" class="form-control dropify" data-default-file="" data-allowed-file-extensions="jpg png jpeg" data-max-file-size-preview="2M" multiple=""><button type="button" class="dropify-clear">Remove</button>
                                                    <div class="dropify-preview"><span class="dropify-render"></span>
                                                        <div class="dropify-infos">
                                                            <div class="dropify-infos-inner">
                                                                <p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>
                                                                <p class="dropify-infos-message">Drag and drop or click to replace</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="kt-form__help error adhar_image"></span>
                                            </div>

                                            <div id="adhar_image_multi" class="form-group col-md-3">
                                         </div>
                                         <!-- adhar image -->

                                         <!-- rc book -->
                                         <div class="form-group col-md-6">
                                                <label class="banknoc-label">R.C.Book Card Photo</label>
                                                <div class="dropify-wrapper">
                                                    <div class="dropify-message"><span class="file-icon">
                                                            <p>Drag and drop profile image here or click</p>
                                                        </span>
                                                        <p class="dropify-error">Ooops, something wrong happended.</p>
                                                    </div>
                                                    <div class="dropify-loader"></div>
                                                    <div class="dropify-errors-container">
                                                        <ul></ul>
                                                    </div><input type="file" name="rcbook[]" id="rcbook" onchange="previewMultiple(event,'rcbook_multi','rcbook')" class="form-control dropify" data-default-file="" data-allowed-file-extensions="jpg png jpeg" data-max-file-size-preview="2M" multiple=""><button type="button" class="dropify-clear">Remove</button>
                                                    <div class="dropify-preview"><span class="dropify-render"></span>
                                                        <div class="dropify-infos">
                                                            <div class="dropify-infos-inner">
                                                                <p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>
                                                                <p class="dropify-infos-message">Drag and drop or click to replace</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="kt-form__help error rcbook"></span>
                                            </div>

                                            <div id="rcbook_multi" class="form-group col-md-3">
                                         </div>
                                         <!-- rc book -->

                                         <!-- Insurance -->
                                            <div class="form-group col-md-6">
                                                <label class="banknoc-label">insurance Photo</label>
                                                <div class="dropify-wrapper">
                                                    <div class="dropify-message"><span class="file-icon">
                                                            <p>Drag and drop profile image here or click</p>
                                                        </span>
                                                        <p class="dropify-error">Ooops, something wrong happended.</p>
                                                    </div>
                                                    <div class="dropify-loader"></div>
                                                    <div class="dropify-errors-container">
                                                        <ul></ul>
                                                    </div><input type="file" name="insurance[]" id="insurance" onchange="previewMultiple(event,'insurance_multi','insurance')" class="form-control dropify" data-default-file="" data-allowed-file-extensions="jpg png jpeg" data-max-file-size-preview="2M" multiple=""><button type="button" class="dropify-clear">Remove</button>
                                                    <div class="dropify-preview"><span class="dropify-render"></span>
                                                        <div class="dropify-infos">
                                                            <div class="dropify-infos-inner">
                                                                <p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>
                                                                <p class="dropify-infos-message">Drag and drop or click to replace</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="kt-form__help error insurance"></span>
                                            </div>

                                            <div id="insurance_multi" class="form-group col-md-3">
                                         </div>
                                         <!-- Insurance -->

                                         <!-- totto -->
                                         <div class="form-group col-md-6">
                                                <label class="banknoc-label">totto Photo</label>
                                                <div class="dropify-wrapper">
                                                    <div class="dropify-message"><span class="file-icon">
                                                            <p>Drag and drop profile image here or click</p>
                                                        </span>
                                                        <p class="dropify-error">Ooops, something wrong happended.</p>
                                                    </div>
                                                    <div class="dropify-loader"></div>
                                                    <div class="dropify-errors-container">
                                                        <ul></ul>
                                                    </div><input type="file" name="totto[]" id="totto" onchange="previewMultiple(event,'totto_multi','totto')" class="form-control dropify" data-default-file="" data-allowed-file-extensions="jpg png jpeg" data-max-file-size-preview="2M" multiple=""><button type="button" class="dropify-clear">Remove</button>
                                                    <div class="dropify-preview"><span class="dropify-render"></span>
                                                        <div class="dropify-infos">
                                                            <div class="dropify-infos-inner">
                                                                <p class="dropify-filename"><span class="file-icon"></span> <span class="dropify-filename-inner"></span></p>
                                                                <p class="dropify-infos-message">Drag and drop or click to replace</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="kt-form__help error totto"></span>
                                            </div>

                                            <div id="totto_multi" class="form-group col-md-3">
                                         </div>
                                         <!-- totto -->
                                         </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('exchange') }}" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('assets/js/promise.min.js') }}"></script>
<script src="{{ asset('assets/js/sweetalert2.bundle.js') }}"></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>
<script>
    function previewMultiple(event,idnamediv,id_name){
        var saida = document.getElementById(id_name);
        var quantos = saida.files.length;
         $('#'+idnamediv).empty();
        for(i = 0; i < quantos; i++){
            var urls = URL.createObjectURL(event.target.files[i]);
            document.getElementById(idnamediv).innerHTML += '<img src="'+urls+'">';
        }
    }
    </script>

@endsection