@extends('template.app')

@section('meta')
@endsection

@section('title')
    Renewal Insurance Policy
@endsection

@section('styles')
<link href="{{ asset('assets/css/dropify.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/css/sweetalert2.bundle.css') }}" rel="stylesheet">
@endsection

<style type="text/css">
    #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;
    }

</style>

@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">Renewal Insurance</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('expired_insurance') }}" class="text-muted">Renewal Insurance</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Renewal</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Renewal Insurance</h4>
                </div>
                <div class="card-body">
                     <form action="{{ route('expired_insurance.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="obf_id" value="{{ $data->obf_id }}">

                        

                        <div class="row">

                            <div class="form-group col-md-3">
                                <label class="control-label col-sm-12">Insurance</label>
                                <label class="checkbox-inline"><input type="radio" value="1" name="insurance_exist" class="chk_ncb insurance_exist" checked> Yes</label>
                                <label class="checkbox-inline"><input type="radio" value="2" name="insurance_exist"  class="chk_ncb insurance_exist"> No</label>
                                <span class="kt-form__help error insurance_exist"></span>
                            </div>
                            
                        <div class="form-group col-md-3 insurance_exist_c">
                            <!-- <label class="control-label col-sm-12">NCB - None Claim Bonus</label> -->
                            <label class="control-label col-sm-12">NCB - No Claim Bonus</label>
                            <label class="checkbox-inline"><input type="radio" value="yes" name="ncb" class="chk_ncb" checked> Yes</label>
                            <label class="checkbox-inline"><input type="radio" value="no" name="ncb" class="chk_ncb" > No</label>
                            <span class="kt-form__help error occupation"></span>
                        </div>

                        <div class="form-group col-md-3 insurance_exist_c">
                            <label class="control-label">Date of Insurance</label>
                            <input type="date"  name="ri_date_of_insurance" id="ri_date_of_insurance" class="form-control" placeholder="Date Of Insurance" value="">
                            <span class="kt-form__help error ri_date_of_insurance"></span>
                        </div>
                        <div class="form-group col-md-3 insurance_exist_c">
                            <label class="control-label">Time of Insurance</label>
                            <select name="ri_time_of_insurance" id="ri_time_of_insurance" class="form-control">
                                <option value="" selected disabled>Please Select Year</option>
                                <option value="1" >1 Year</option>
                                <option value="3" >3 Year</option>
                                
                            </select>
                            <span class="kt-form__help error ri_time_of_insurance"></span>
                        </div>
                        <div class="form-group col-md-3 insurance_exist_c">
                            <input type="text" name="ri_last_time_of_insurance" id="ri_last_time_of_insurance" hidden>
                            <label class="control-label">Last Date of Insurance</label>
                            <input type="text"  name="ri_last_time_of_insurance1" id="ri_last_time_of_insurance1" class="form-control" placeholder="last time of insurance" value="{{ $data->last_time_of_insurance ?? '' }}" readonly>
                            <span class="kt-form__help error ri_last_time_of_insurance1"></span>
                        </div>
                        <div class="form-group col-md-3 insurance_not_exist_c">
                            <label class="control-label">Company Name</label>
                            <input type="text"  name="ri_company_name" id="ri_company_name" class="form-control" placeholder="Enter Company Name" value="">
                            <span class="kt-form__help error ri_company_name"></span>
                        </div>
                        <div class="form-group col-md-3 insurance_not_exist_c">
                            <label class="control-label">Amount</label>
                            <input type="number"  name="ri_ncb_amount" id="ri_ncb_amount" class="form-control" placeholder="Enter NCB Amount" value="">
                            <span class="kt-form__help error ri_ncb_amount"></span>
                        </div>
                        <div class="form-group col-md-3 insurance_exist_c">
                            <label class="control-label">Policy Number</label>
                            <input type="text"  name="ri_policy_number" id="ri_policy_number" class="form-control" placeholder="Enter Policy Number" value="">
                            <span class="kt-form__help error ri_policy_number"></span>
                        </div>

                        <div class="form-group col-md-3 insurance_exist_c">
                            <label class="control-label">Status</label>
                            <select name="status" id="status" class="form-control">
                                <option value="1" >Activate</option>
                                <option value="0" >Deactivate</option>
                            </select>
                            <span class="kt-form__help error rto_type"></span>
                        </div>

                        <div class="form-group col-md-3 insurance_exist_c">
                            <label class="control-label">Upload Document</label>
                            <input type="file" name="documents[]" id="documents"  onchange="previewMultiple(event,'documents_multi','documents')" class="form-control dropify" data-default-file="" data-allowed-file-extensions="jpg png jpeg" data-max-file-size-preview="2M" multiple>
                            <span class="kt-form__help error documents"></span>
                        </div>

                        <div class="form-group col-md-3 insurance_exist_c"></div>
                        <div id="documents_multi" class="form-group col-md-3 insurance_exist_c">                            
                        </div>

                      </div>
                        <div class="form-group text-center">
                            <!-- <button type="submit" class="btn btn-success btn-sm">Update</button> -->
                            <button class="btn btn-outline-primary nextBtn btn-lg pull-right" type="submit">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('assets/js/dropify.min.js') }}"></script>
<script src="{{ asset('assets/js/promise.min.js') }}"></script>
<script src="{{ asset('assets/js/sweetalert2.bundle.js') }}"></script>


<script type="text/javascript">
    function insurance_exist(){
       var insurance_exist =  $('input[name="insurance_exist"]:checked').val();

        if(insurance_exist == 1){
            $('.insurance_exist_c').show();
            $('.insurance_not_exist_c').show();
        }else{
            $('.insurance_exist_c').hide();
            $('.insurance_not_exist_c').show();
        }
    }

    $(document).on('change','.insurance_exist',function(){
        insurance_exist();
    });

    insurance_exist();

    $('.dropify').dropify({
        messages: {
            'default': 'Drag and drop profile image here or click',
            'remove':  'Remove',
            'error':   'Ooops, something wrong happended.'
        }
    });

    var drEvent = $('.dropify').dropify();

    var dropifyElements = {};
    $('.dropify').each(function () {
        dropifyElements[this.id] = false;
    });

    drEvent.on('dropify.beforeClear', function(event, element){
        id = event.target.id;
        if(!dropifyElements[id]){
            var url = "{!! route('obf.profile.remove') !!}";
                            Swal.fire({
                    title: 'Are you sure want delete this image?',
                    text: "",
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes'
                }).then(function (result){
                    if (result.value){
                        Swal.fire('Deleted!', 'Deleted Successfully.', 'success');
                        dropifyElements[id] = true;
                        element.clearElement();
                    }else{
                        Swal.fire('Cancelled', 'Discard Last Operation.', 'error');
                    }
                });
                return false;
                    } else {
            dropifyElements[id] = false;
            return true;
        }
    });


    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>
<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);
                        });
                    }
                }
            });
        });
    });
    $(document).on('change','#ri_time_of_insurance',function(){
        var value=$(this).val();
        var start_date = document.getElementById("ri_date_of_insurance").value;
        var newDate = "";
        if(value == 1){
            var newDate = moment(start_date, "YYYY-MM-DD").add(1, 'year');
        }else{
            var newDate = moment(start_date, "YYYY-MM-DD").add(3, 'year');
        }   
            var new_Date = moment(newDate).format('DD-MM-YYYY');
            var date_new = moment(newDate).format('YYYY-MM-DD');
        
        $("#ri_last_time_of_insurance").val(date_new);
          
        $("#ri_last_time_of_insurance1").val(new_Date);
        
    });
</script>
@endsection