@extends('template.app')

@section('meta')
@endsection

@section('title')
exchange
@endsection

@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="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <style type="text/css">
        #pan_image_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        #adhar_image_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        #rcbook_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        #insurance_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        #totto_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        #documents_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        #licance_image_multi img{
            width: 200px;
            height: 150px;
            border-radius: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            opacity: 85%;
            padding: 3px;
        }
    
        .img_specing {
            margin-top: 60px!important;
        }
        
        .col-sm-3{
            font-size: 15px;
        }
        
        .form-control{
            height: 30px;
            font-size: 14px;
        }
        .select2-container .select2-selection--single {
            height:38px!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">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 col-md-12">
                                
                                <div class="form-group col-md-3">
                                    <label for="car_status">Car Status</label>
                                    <select  class="form-control" id="car_status" name="car_status">
                                        <option value="">-- Select 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-md-3" id="hide_show_obf" style="display:none;">
                                    <label for="obf_id">Select OBF </label>
                                    <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-md-3" id="car_name">
                                    <label for="Car Name">Car Name</label>  
                                    <input type="text" name="car_name" id="car_name_disable" value="" class="form-control" placeholder=""><span class="kt-form__help error car_name"></span>
                                </div>
    
                                <div class="form-group col-md-3">
                                    <label for="seller_detail">Seller detail</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-md-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-md-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-md-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-md-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-md-3">
                                    <label for="chassis_number">Chassis Number</label>
                                    <input type="text" 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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-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-md-3">
                                    <label for="amount_in_words">Total Amount</label>
                                    <input type="text" name="amount_in_words" id="amount_in_words" class="form-control" placeholder="Total Amount">
                                    <span class="kt-form__help error amount_in_words"></span>
                                </div>
                                
                                <div class="form-group col-md-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-md-3" id="relation_with_obf" style="display:none;">
                                    <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 class="form-group col-md-3">
                                    <label class="control-label">Remarks</label>
                                    <textarea  name="remarks" class="form-control" placeholder="Enter Remarks" style="text-transform:uppercase"></textarea>
                                    <span class="kt-form__help error remarks"></span>
                                </div>
                            </div> 
                            
                            <div class="row col-md-12">
                                
                                <!-- paan image -->
                                <div class="form-group col-md-3">
                                    <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 img_specing"></div>
                                <!-- paan image -->
                                                
                                <!-- adhar image -->
                                <div class="form-group col-md-3">
                                    <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 img_specing"></div>
                                <!-- adhar image -->
    
                                <!-- rc book -->
                                <div class="form-group col-md-3">
                                    <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 img_specing"></div>
                                <!-- rc book -->
    
                                <!-- Insurance -->
                                <div class="form-group col-md-3">
                                    <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 img_specing"></div>
                                <!-- Insurance -->
    
                                <!-- tto -->
                                <div class="form-group col-md-3">
                                    <label class="banknoc-label">TTO 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 img_specing"></div>
                                <!-- tto -->
                                             
                            </div>
                               
                            <div class="form-group">
                                <button type="submit" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-secondary">Submit</button>
                                <button class="btn btn-outline-secondary btn-sm pull-right submit_once" type="submit">Save as Draft</button>
                                <a href="{{ route('exchange') }}" class="btn waves-effect waves-light btn-sm 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 src="{{ asset('assets/js/select2.js') }}"></script>

    <script>
    
        $(document).ready(function() {
            $('#obf_id').select2({
                placeholder: "Search & Select Customer",
                allowClear: true,
                width: '100%'
            });
        });

        $(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);
                            });
                        }
                    }
                });
            });
        });

        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+'">';
            }
        }

        var a = ['', 'one ', 'two ', 'three ', 'four ', 'five ', 'six ', 'seven ', 'eight ', 'nine ', 'ten ', 'eleven ', 'twelve ', 'thirteen ', 'fourteen ', 'fifteen ', 'sixteen ', 'seventeen ', 'eighteen ', 'nineteen '];
        var b = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
        
        function inWords(num) {
            if ((num = num.toString()).length > 9) return 'overflow';
            n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
            if (!n) return;
            var str = '';
            str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
            str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
            str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
            str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
            str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) + 'only ' : '';
            return str;
        }
        
        jQuery(document).on('input', '#amount, #exchange_bonus', function(e) {
            var amount = parseFloat($('#amount').val()) || 0;
            var bonus = parseFloat($('#exchange_bonus').val()) || 0;
        
            var total = bonus ? amount + bonus : amount;
        
            var amount_in_words = total;
            $('#amount_in_words').val(amount_in_words);
        });
        
        jQuery(document).on('change', '#car_status', function(e) {
            $car_status = $(this).val();
            if($car_status == 'exchange'){
                $('#hide_show_obf').show();
                $('#relation_with_obf').show();
                $('#car_name_disable').attr('readonly', true);
            } else {
                $('#hide_show_obf').hide();
                $('#relation_with_obf').hide();
                $('#car_name_disable').removeAttr('readonly');
            }
        });
    
        function car_name(obf_id, option_check){
            $.ajax({
               url:"{{url('exchange/car_name')}}",
               data:{
                'obf_id':obf_id,
                'option_check':option_check
               },
               type: 'get',
               dataType: 'json',
               success:function(result){
                var html ='';
                var car = result.data.carname;
               // alert(car);
                html = '<label for="Car Name">Car Name</label>  <input type="text"  name="car_name" id="car_name" value="'+car+'" class="form-control" placeholder="Car Name" readonly><span class="kt-form__help error car_name"></span>';
    
                    jQuery("#car_name").empty();
                    jQuery("#car_name").html(html);
               }  
            });
        }

        jQuery(document).on('change', '#obf_id', function(e) {
            var option_check = 'Car Name';
            var obf_id = $('#obf_id').val();           
            
            car_name(obf_id, option_check);
        });
    </script>
@endsection