@extends('layouts.organization.app')
@section('content')

<style>
.show-amazing{
    background: #ffffff;
    border-color: #bcb1b1;
    font-size: 12px;
    color: #000000!important;
    padding: 1px 4px;
    text-align: left;
}
</style>


<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-header">
                        <h5 class="">Prepare Offer Letter</h5>
                    </div>
                    <div class="card-body">
                    <form class="forms-sample row" action="{{url('save-prepare-candidate-offer-letter')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="col-sm-4">
                                <div class="form-group"> 
                                 
                                    <label>Name </label>
                                    <input type="text" class="form-control" id="name" name="name" value=""  required>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group"> 
                                    <label>Email </label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group"> 
                                    <label>Mobile No </label>
                                    <input type="text" class="form-control" id="mobile" name="mobile" required>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="form-group"> 
                                    <label>Gender </label>
                                     <select id="gender" name="gender" class="form-control" style="width:100%" required>
                                        <option value="">--Select--</option>
                                        <option value="male">Male</option>
                                        <option value="Female">Female</option>
                                    </select>
                                </div>
                            </div>


                            <div class="col-sm-4">
                            <div class="form-group"> 
                                <label>Position Name </label>
                                <input type="text" class="form-control" id="position" name="position" required>

                              
                            </div>
                            </div>
                              
                            
                             
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>Refered By Manager</label>
                                    <input type="text" class="form-control" id="manager_name" name="manager_name" required>
                                   
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label>Resume *</label>
                                    <input type="file" name="resume" id="resume" class="form-control" onchange="loadFile(event)" required>
                                </div>    
                            </div>


                    <!-- ----------------START ATTACHED DOCUMENT ------------------ -->
                    <div class="col-sm-8">
                                <div class="multi-field-wrapper" style="margin-top: 12px;">
                                    <div class="multi-fields">
                                        <div class="multi-field">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <lable>Document Title</lable>
                                                        <input type="text" name="filename[]" class="form-control" placeholder="Enter Documnet Title" required>
                                                    </div>
                                                </div>
                                                <div class="col-md-6" style="width:40%;flex: 0 0 40%;">
                                                    <div class="form-group">
                                                        <lable>Select Document</lable>
                                                        <input type="file" name="upload_document[]" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="remove-field btn-danger btn-sm float-right" style="width:7%;margin-top: -60px;padding: 0.3rem 0rem;"><i class="fa fa-trash"></i></button>
                                        </div>
                                    </div>
                                    <button type="button" class="add-field remove-field btn-success btn-sm" style="padding: 0rem 2.5rem"><i class="fa fa-plus"></i> Add More</button><br>
                                </div>
                            </div>
                    <!-- ------------------END ATTACHED DOCUMENT ------------------ -->




                             

                             
                            


                            <div class="col-sm-4">
                                <div class="form-group" style="margin-top: 32px;"> 
                                    <button type="submit" class="btn btn-primary btn-sm  mr-2">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
             
        </div>
    </div>
</div>


<script>
    var loadFile = function(event) {
        document.getElementById('output').setAttribute("style",
            "width: 8rem;height: 8rem;border-radius: 0.25rem;object-fit: contain;max-height: 51px;max-width: 10rem;margin-top: -9px;"
            );
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('output');
            output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    };
    </script>


 
<script>
$(document).ready(function () {
    var datatable = $('#examples').dataTable({
    dom: 'Bfrtip',
    buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    });
});
$(document).ready(function() {
    //$('.hr_email').select2();
    $('.employee_id').select2();
});
</script>





<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script>
    function show_data(id,candidate_id){
        $('#document_id').val(id);
        $('.selection__rendered').empty();
        $('.documents_name').text($('.dx_'+id).attr("data-name"));
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
            type:'POST',
            url: "{{url('ajax/get-uploaded-document-status')}}",
            data:{document_id:id,candidate_id:candidate_id},
            success:function(xhr){
                if(xhr.status==200){
                    var datas = xhr.data;
                    for(var i=0;i<datas.length;i++){
                        $('.selection__rendered').append('<li class="selection__choice choice__remove_'+datas[i].id+'" title="'+datas[i].documnet_title+' Download"><span class="selection__choice__remove" onclick="remove_data('+datas[i].id+','+candidate_id+','+id+')">×</span><a href="{{url("public/uploads/status_document")}}/'+datas[i].documnet_file+'" download class="ink_documnet">'+datas[i].documnet_title+'</a></li>');

                        $('.rendered').append('<li class="choice__remove_'+datas[i].id+'" title="'+datas[i].documnet_title+' Download"><span class="selection__choice__remove" onclick="remove_data('+datas[i].id+','+candidate_id+','+id+')">×</span><a href="{{url("public/uploads/status_document")}}/'+datas[i].documnet_file+'" download class="ink_documnet">'+datas[i].documnet_title+'</a></li>');
                    }
                }
            }
        });
    }
    function remove_data(id,candidate_id,document_id){
        swal({
            title: "Are you sure?",
            text: "Do you want to remove",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, change status!",
            closeOnConfirm: false
        }, function (isConfirm) {
            if (isConfirm) {
                $('.choice__remove_'+id).hide();
                $('.alert-remove').html('<div class="alert alert-success">Removed Successfully</div>');
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    url: "{{url('ajax/remove-documet')}}",
                    type: "POST",
                    data: {id:id,candidate_id:candidate_id,document_id:document_id},
                    success: function(xhr){
                        if(xhr.count==0){
                            $('#lis_'+document_id).removeClass('active');
                            $('.dx_'+document_id).addClass('text-danger');
                            $('.dx_'+document_id).removeClass('text-success');
                            $('.favicon_'+document_id).addClass('fa-upload');
                            $('.favicon_'+document_id).removeClass('fa-check');
                            $('.dx_'+document_id).removeAttr('data-target','#myModal1');
                            $('.dx_'+document_id).attr('data-target','#myModal');
                            $('.date_time_'+document_id).empty();
                        }
                        swal(xhr.msg, "Succesfully "+xhr.msg, "success");
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        swal("Something Went to Wrong!", "Please try again", "error");
                    }
                });
            }
        });
    }
</script>
<script>
$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $('#alert-image').fadeIn();
        var spinner = $('#loader');
        spinner.show();
        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
            type:'POST',
            url: "{{url('ajax/upload-status-document')}}",
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                if(data.status==200){
                    $('#imageUploadForm')[0].reset();
                    $('#alert-image').html('<div class="alert alert-success">'+data.msg+'</div>');
                    $('#lis_'+data.document_id).addClass('active');
                    $('.dx_'+data.document_id).removeClass('text-danger');
                    $('.dx_'+data.document_id).addClass('text-success');
                    $('.favicon_'+data.document_id).removeClass('fa-upload');
                    $('.favicon_'+data.document_id).addClass('fa-check');
                    $('.dx_'+data.document_id).removeAttr('data-target','#myModal');
                    $('.dx_'+data.document_id).attr('data-target','#myModal1');
                    $('.date_time_'+data.document_id).text(data.data.createdat);
                }else{
                    $('#alert-image').html('<div class="alert alert-danger">'+data.msg+'</div>');
                }
                setTimeout(function () {
                    $('#alert-image').fadeOut();
                }, 2000);
                spinner.hide();
            }
        });
    }));
});
</script>
<script>
$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
        $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field .remove-field', $wrapper).click(function() {
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
</script>




@endsection('content')