@extends('user.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('user/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('user/select2/dist/css/select2-bootstrap5.min.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('user/datatable/datatables.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('user/cropper/cropper.min.css') }}" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('user/holdOn/src/css/HoldOn.css') }}"/>
@endpush
@section('content')
    @include('user/inc.candidateNotification')
    <div class="card mt-3">
        <div class="card-body">
            {{-- Start: Page Content --}}
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">{{(!empty($p_title) && isset($p_title)) ? $p_title : ''}}</h4>
                    <div class="small text-medium-emphasis">{{(!empty($p_summary) && isset($p_summary)) ? $p_summary : ''}}</div>
                </div>
{{--                <div class="btn-toolbar d-none d-md-block" role="toolbar" aria-label="Toolbar with buttons">--}}
{{--                    <a href="{{(!empty($url) && isset($url)) ? $url : ''}}" class="btn btn-sm btn-primary">{{(!empty($url_text) && isset($url_text)) ? $url_text : ''}}</a>--}}

{{--                </div>--}}
            </div>
            <hr>
            {{-- Datatatble : Start --}}
            <div class="row p-2 more-menu">
                <div class="col-md-3">
                    @include('user/inc.sideHeader')
                </div>
                <div class="col-md-9 py-2">


                    @if(empty($registerCandidate->contact_no))
                        <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}">
                            @csrf
                            <div class="mb-3">
                                <fieldset class="reset-this redo-fieldset">
                                    <legend class="reset-this redo-legend">Personal Information</legend>
                                    <div class="mb-3">
                                        <label class="form-label" for="contact_no">Cell No *</label>
                                        <input type="text" class="form-control @error('contact_no') is-invalid @enderror"
                                               name="contact_no"
                                               id="contact_no" placeholder="Cell No" value="{{$registerCandidate->contact_no}}">
                                        @error('contact_no')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="residence_cell_no">Contact No (Residence)</label>
                                        <input type="text" class="form-control @error('residence_cell_no') is-invalid @enderror"
                                               name="residence_cell_no"
                                               id="reg_no"
                                               placeholder="Contact No (Residence)"
                                               value="{{$registerCandidate->residence_cell_no}}">
                                        @error('residence_cell_no')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                    <div class="image-edit mb-3">
                                        <label class="form-label" for="password">Profile Image</label>
                                        <input type="file" id="image-cropper" accept=".png, .jpg, .jpeg" name="image"
                                               class="form-control wizard-required image-cropper @error('password') is-invalid @enderror">
                                        <input type="hidden" name="base64image" id="base64image">
                                        @error('image')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                        <div class="image-preview container-image-preview">
                                            <div id="image-preview-background"></div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="mb-3">
                                <fieldset class="reset-this redo-fieldset">
                                    <legend class="reset-this redo-legend">Working Experience</legend>
                                    <div class="mb-3">
                                        <label class="form-label" for="name_of_institution">Name of Institution /
                                            Organization</label>
                                        <input type="text"
                                               class="form-control @error('name_of_institution') is-invalid @enderror"
                                               name="name_of_institution"
                                               id="name_of_institution" placeholder="Name of Institution / Organization"
                                               value="{{$registerCandidate->name_of_institution}}">
                                        @error('name_of_institution')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" for="designation">Designation</label>
                                        <input type="text" class="form-control @error('designation') is-invalid @enderror"
                                               name="designation"
                                               id="designation" placeholder="Designation"
                                               value="{{$registerCandidate->designation}}">
                                        @error('designation')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </fieldset>
                            </div>

                            <button type="submit"  onclick="holdOn('sk-rect');" class="btn btn-sm btn-success">Save</button>
                        </form>
                    @else
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table id="indextable"
                                           class="table table-bordered table-striped table-hover table-responsive w-100 pt-1">
                                        <thead class="table-dark">
                                        <th>#</th>
                                        <th>Name </th>
                                        <th>contact No</th>
                                        <th>Residence Cell No</th>
                                        <th>Name of Institution</th>
                                        <th>Designation</th>
                                        <th>Profile Image</th>
                                        <th>Actions</th>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif

                </div>
            </div>
            {{-- Datatatble : End --}}
            {{-- Page Description : Start --}}
            @if(!empty($p_description) && isset($p_description))
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 mb-sm-2 mb-0">
                            <p>{!! (!empty($p_description) && isset($p_description)) ? $p_description : '' !!}</p>
                        </div>
                    </div>
                </div>
            @endif
            {{-- Page Description : End --}}
            {{-- Modal --}}
            <div class="modal fade bd-example-modal-lg imageCrop" id="model" tabindex="-1" role="dialog" aria-labelledby="cropperModalLabel" aria-hidden="true" data-bs-backdrop="static">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="cropperModal">Crop Image</h5>
                            <button type="button" class="close btn-close" id="reset-image" data-coreui-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="img-container">
                                <div class="row">
                                    <div class="col-md-11">
                                        <img id="previewImage" src="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="reset-image-close" data-coreui-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary crop" id="cropImage">Crop</button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End: Modal --}}
            {{-- Delete Confirmation Model : Start --}}
            <div class="del-model-wrapper">
                <div class="modal fade" id="del-model" tabindex="-1" aria-labelledby="del-model" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="btn-close shadow-none" data-coreui-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p class="font-weight-bold mb-2"> Are you sure you wanna delete this ?</p>
                                <p class="text-muted "> This item will be deleted immediately. You can't undo this action.</p>
                            </div>
                            <div class="modal-footer">
                                <form method="POST" id="del-form">
                                    @csrf
                                    {{method_field('DELETE')}}
                                    <button type="button" class="btn btn-light" data-coreui-dismiss="modal">Cancel</button>
                                    <button type="submit" class="btn btn-danger">
                                        {{ __('Delete') }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Delete Confirmation Model : End --}}
            {{-- End: Page Content --}}
        </div>
    </div>
@endsection
@push('footer-scripts')

    <script type="text/javascript" src="{{ asset('user/datatable/datatables.min.js')}}"></script>
    <script src="{{ asset('user/cropper/cropper.js') }}"></script>
    <script src="{{asset('manager/formToJson/formToJson.js')}}"></script>
    <script type="text/javascript" src="{{asset('user/holdOn/src/js/HoldOn.js') }}"></script>
    <script>
        $(function() {
            $('.is_active_personal').addClass('active');
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            //Datatable
            $('#indextable').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                order: [[ 0, "desc" ]],
                ajax: {
                    "type":"GET",
                    "url":"{{route('user.get.personal-information')}}",
                },
                columns: [
                    {data: 'id', orderable: false},
                    {data: 'name'},
                    {data: 'contact_no'},
                    {data: 'residence_cell_no'},
                    {data: 'name_of_institution'},
                    {data: 'designation'},
                    {data: null},
                    {data: null},
                ],
                columnDefs: [
                    {
                        targets: 0,
                        orderable: false,
                        searchable: false,
                        width: '20px',
                        render: function ( data, type, row, meta ) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        targets: 1,
                        width: '15%'
                    },{
                        render: function (data,type,row,meta) {
                            var Imagess ='{{route('user.personalInformation.get.image',auth()->user()->id)}}';
                            if(data.candidate_image){
                                return '<div class="text-center"><img src="' + Imagess + '" height="50" width="50" alt="No Image Uploaded"/></div>';
                            }else{
                                return 'Image Not Uploaded';
                            }
                        },
                        searchable:false,
                        orderable:false,
                        targets: 6
                    },
                    {
                        targets: -1,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            let edit = "{{ route('user.personal-information.create') }}";

                            let URL = "{{ route('user.personal-information.show', ':id') }}";
                            URL = URL.replace(':id', row.id);

                            let gatePass = "{{ route('user.get.gatepass', auth()->user()->id) }}";

                            function getGatePass() {
                                let gate_pass = "{{(!empty($gate_pass_status) && isset($gate_pass_status)) ? $gate_pass_status : ''}}";

                                let statusElement = '';
                                if (gate_pass === '1') {
                                    statusElement += '<a class="me-1" href="' + gatePass + '"><span class="badge bg-primary text-white">Gate Pass</span>';
                                } else {
                                    statusElement += '';
                                }

                                return statusElement;
                            }

                            if(data.voucher_status == 'approve' && data.status !=null ){
                                return '<div class="d-flex">' +
                                            getGatePass() +
                                        '</div>'
                            }else{
                                if(data.status == 1){
                                    return '<div class="d-flex">' +
                                        '<a class="me-1" href="' + URL + '"><span class="badge bg-success text-dark">Show</span>' +
                                        '</div>'
                                }else {

                                    return '<div class="d-flex">' +
                                        '<a class="me-1" href="' + edit + '"><span class="badge bg-info text-dark">edit</span>' +
                                        '<a class="me-1" href="' + URL + '"><span class="badge bg-success text-dark">Show</span>' +
                                        '</div>'
                                }
                            }


                        }
                    }
                ]
            });
        });
        function selectRange(){
            $('.dataTable').DataTable().ajax.reload()
        }
    </script>

    <script>
        //Prevent Click
        function holdOn(themeName) {
            HoldOn.open({
                theme: themeName,
                message: "<h4>Please wait...</h4>"
            });
        }
    </script>
    <script>
        //Image Cropper
        $(document).ready(function() {
            var $modal = $('.imageCrop');
            var image = document.getElementById('previewImage');
            var cropper;
            $("body").on("change", ".image-cropper", function(e){
                e.preventDefault();
                var files = e.target.files;
                var done = function(url) {
                    image.src = url;
                    $modal.modal('show');
                };
                var reader;
                var file;
                var URL;
                if (files && files.length > 0) {
                    file = files[0];
                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function(e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            $modal.on('shown.coreui.modal', function() {
                cropper = new Cropper(image, {
                    dragMode: 'move',
                    aspectRatio: 2 / 2,
                    autoCropArea: 0.45,
                    restore: false,
                    guides: false,
                    center: false,
                    highlight: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    toggleDragModeOnDblclick: false,
                });
            }).on('hidden.coreui.modal', function() {
                cropper.destroy();
                cropper = null;
            });
            $("body").on("click", "#cropImage", function() {
                canvas = cropper.getCroppedCanvas({
                    width: 200,
                    height: 300,
                });
                canvas.toBlob(function(blob) {
                    url = URL.createObjectURL(blob);
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = function() {
                        var base64data = reader.result;
                        $('#base64image').val(base64data);
                        document.getElementById('image-preview-background').style.backgroundImage = "url("+base64data+")";
                        $modal.modal('hide');
                    }
                });
            });
        });
    </script>

    {{-- Delete Confirmation Model : Script : Start --}}
    <script>
        $("#del-model").on('show.coreui.modal', function (event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            $("#del-form").attr('action', url);
        })
    </script>
    {{-- Delete Confirmation Model : Script : Start --}}
    {{-- Toastr : Script : Start --}}
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
@endpush