@extends('manager.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link href="{{ asset('manager/select2/dist/css/select2.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('manager/select2/dist/css/select2-bootstrap5.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('manager/cropper/cropper.min.css') }}" rel="stylesheet"/>
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
@endpush
<style>
      img {
            max-width: 100%;
        }
        .cropper-point.point-se {
            height: 5px !important;
            width: 5px !important;
        }
        .select2-container {
            width: 100% !important
        }
    @media (max-width: 768px) {
        .cropper-container{
        width: 100% !important;
        }
    }
</style>
@section('content')
    <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($page_title) && isset($page_title)) ? $page_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">
                    @can('manager_session-registration_registration-list')
                        <a href="{{(!empty($url) && isset($url)) ? $url : ''}}"
                           class="btn btn-sm btn-primary">{{(!empty($url_text) && isset($url_text)) ? $url_text : ''}}</a>
                    @endcan
                </div>
            </div>
            <hr>

            {{-- Start: Form --}}
            <div>
                <form>
                    <div class="mb-3">
                        <fieldset class="reset-this redo-fieldset">
                            <legend class="reset-this redo-legend">Search</legend>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="candidate">Candidate Registration #</label>
                                        <select id="can-reg"
                                                class="select2-options-candidate-reg form-control @error('candidate_id') is-invalid @enderror"
                                                name="candidate_id"></select>
                                        @error('candidate_id')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="candidate">Candidate CNIC #</label>
                                        <select id="can-cnic"
                                                class="select2-options-candidate-cnic form-control @error('candidate_cnic') is-invalid @enderror"
                                                name="candidate_cnic"></select>
                                        @error('candidate_cnic')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-success btn-submit">Search</button>
                            <p class="text-danger fw-bold mt-3 fs-4 mb-0 text-center" id="no_data"></p>
                        </fieldset>
                    </div>
                </form>
                <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}">
                    @csrf
                    <div class="mb-3">
                        <fieldset class="reset-this redo-fieldset">
                            <legend class="reset-this redo-legend">Eligible</legend>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="Session">Session</label>
                                        <select name="session_id"
                                                class="form-control session-readonly @error('session_id') is-invalid @enderror">
                                            @if(isset($session))
                                                <option value="{{$session->id}}">{{$session->title}}</option>
                                            @endif
                                        </select>
                                        @error('session_id')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">Name</label>
                                        <input type="text"
                                               class="form-control session-readonly @error('name') is-invalid @enderror"
                                               name="name"
                                               id="name"
                                               placeholder="Name" value="{{old('name')}}">
                                        @error('name')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">Reg No.</label>
                                        <input type="text"
                                               class="form-control session-readonly @error('reg_no') is-invalid @enderror"
                                               name="reg_no"
                                               id="reg_no" placeholder="Registration No" value="{{old('reg_no')}}">
                                        @error('reg_no')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">CNIC</label>
                                        <input type="text"
                                               class="form-control session-readonly @error('cnic') is-invalid @enderror"
                                               name="cnic"
                                               id="cnic"
                                               placeholder="CNIC" value="{{old('cnic')}}">
                                        @error('cnic')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="mb-3">
                        <fieldset class="reset-this redo-fieldset">
                            <legend class="reset-this redo-legend">Registration</legend>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">Email</label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                               name="email"
                                               id="email" placeholder="Email" value="{{old('email')}}">
                                        @error('email')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <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="{{old('contact_no')}}">
                                        @error('contact_no')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">Password</label>
                                        <input type="password"
                                               class="form-control @error('password') is-invalid @enderror"
                                               name="password" id="password" placeholder="Password"
                                               value="{{old('password')}}">
                                        @error('password')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name">Confirm Password</label>
                                        <input type="password"
                                               class="form-control @error('password_confirmation') is-invalid @enderror"
                                               name="password_confirmation" id="password_confirmation"
                                               placeholder="Confirm Password"
                                               value="">
                                        @error('password_confirmation')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="image-edit mb-3">
                                        <label class="form-label" for="password">Profile Image <small>(optional)</small></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>
                                </div>
                                <div class="col-sm-6">
                                    <br class="mb-3">
                                    <label class="mt-2" for="work_status">Have Work Experience?</label><br>
                                    <input class="mt-1" id="work_status" type="checkbox" name="work_status" value="1"/>
                                    <span class="item-text mt-1">Yes</span>
                                </div>
                            </div>
                        </fieldset>
                    </div>

                    <div class="mb-3">
                        <fieldset class="reset-this redo-fieldset working">
                            <legend class="reset-this redo-legend">Current / Last Working Experience</legend>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="name_of_institution">Name of Organization <small>(optional)</small></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="{{old('name_of_institution')}}">
                                        @error('name_of_institution')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="form-label" for="designation">Designation
                                            <small>(optional)</small></label>
                                        <input type="text"
                                               class="form-control @error('designation') is-invalid @enderror"
                                               name="designation"
                                               id="designation" placeholder="Designation"
                                               value="{{old('designation')}}">
                                        @error('designation')
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <button type="submit" class="btn btn-sm btn-success">Submit</button>
                </form>
            </div>
            {{-- End: Form --}}

            {{-- 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 --}}
            {{-- 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 --}}
            {{-- End: Page Content --}}
        </div>
    </div>
@endsection
@push('footer-scripts')
    <script src="{{ asset('admin/select2/dist/js/select2.js') }}"></script>
    <script src="{{ asset('user/cropper/cropper.js') }}"></script>
    <script>
        $(function () {
            $("#work_status").on("click", function () {
                $(".working").toggle(this.checked);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            //Select Module
            $('.select2-options-candidate-reg').select2({
                theme: "bootstrap5",
                placeholder: 'Select Candidate Reg #',
                ajax: {
                    url: '{{route('manager.get.eligible-candidate')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.reg_no
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2')
            //Select Group
            $('.select2-options-candidate-cnic').select2({
                theme: "bootstrap5",
                placeholder: 'Select CNIC',
                ajax: {
                    url: '{{route('manager.get.eligible-candidate')}}',
                    dataType: 'json',
                    delay: 250,
                    type: 'GET',
                    data: function (params) {
                        var query = {
                            q: params.term,
                            type: 'public',
                            _token: '{{csrf_token()}}'
                        }
                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    id: item.id,
                                    text: item.cnic
                                }
                            })
                        };
                    },
                    cache: true
                }
            }).trigger('change.select2')
            $(document).on('select2:open', () => {
                document.querySelector('.select2-search__field').focus();
            });
        });

        //


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $(".btn-submit").click(function (e) {
            e.preventDefault();
            var can_reg = $('#can-reg').val();
            var can_cnic = $('#can-cnic').val();
            $.ajax({
                type: 'POST',
                url: "{{ route('manager.candidate.search-eligible') }}",
                data: {can_reg: can_reg, can_cnic: can_cnic},
                success: function (response) {

                    if (response['data'] === '') {
                        $('#no_data').text('No Data Found')
                    }else{
                        $('#no_data').text('')
                    }

                    var can_name = response['data']['name'];
                    var can_cnic = response['data']['cnic'];
                    var can_reg = response['data']['reg_no'];
                    // Show Fetch Data of Select List
                    $('#name').val(can_name)
                    $('#cnic').val(can_cnic)
                    $('#reg_no').val(can_reg)
                }
            });
        });

    </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',
                    viewMode: 1,
                    aspectRatio: 260 / 270,
                    autoCropArea: 0.75,
                    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: 260,
                    height: 270,
                });
                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>
    {{-- Toastr : Script : Start --}}
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
@endpush