@extends('user.layouts.app')
@section('page_title')
    {{(!empty($page_title) && isset($page_title)) ? $page_title : ''}}
@endsection
@push('head-scripts')
    <link href="{{ asset('user/select2/dist/css/select2.min.css') }}" rel="stylesheet"/>
    <link href="{{ asset('user/select2/dist/css/select2-bootstrap5.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
<style>
      img {
        max-width: 100%;
    }
    .cropper-point.point-se {
        height: 5px !important;
        width: 5px !important;
    }
    @media (max-width: 768px) {
        .cropper-container{
        width: 100% !important;
        }
    }
</style>
@section('content')
    @include('user/inc.candidateNotification')
    <div class="card mt-3">
{{--        @if(!isset($activeSession))--}}
{{--            <p class="alert alert-danger blink_me">No session is active. <a class="btn btn-sm btn-primary px-2 p-0 m-0"--}}
{{--                                                                            href="{{route('user.convocation-session.index')}}">Click--}}
{{--                    Here</a></p>--}}
{{--        @endif--}}
        <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">
                    <button type="button" class="btn btn-sm btn-secondary d-none" id="single-entry">Single Entry
                    </button>
                        <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>
            {{-- Start: Form --}}

            <div class="row p-2 more-menu">
                <div class="col-md-3">
                    @include('user/inc.sideHeader')
                </div>
                <div class="col-md-9 py-2 shadow">
                    <div class="single-box">
                        <form class=" @if($allowFreeGuest <= 0) disables-from-fields @endif" method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}" onsubmit="submitButton.disabled = true; $('#acct-register-spiner').css('display', 'inline-block'); return true;">
                            @csrf

                            <div class="academic_details">

                                <div class="mb-3">
                                    <label class="form-label" for="name">Name *</label>
                                    <input type="text" class="form-control @error('name.*') is-invalid @enderror" name="name[]"
                                           id="name" placeholder="Name" value="">
                                    @error('name.*')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="mb-3">
{{--                                    <label class="form-label" for="cnic">Cnic# *</label>--}}
{{--                                    <input type="number" class="form-control @error('cnic.*') is-invalid @enderror" name="cnic[]"--}}
{{--                                           id="reg_no"--}}
{{--                                           placeholder="331000000000">--}}
{{--                                    @error('cnic.*')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}
{{--                                    @enderror--}}
{{--                                    <label class="form-label required" for="cnic">CNIC</label>--}}
{{--                                    <div class="input-group">--}}

{{--                                        <input class="form-control cnic @error('cnic') is-invalid @enderror" type="text"--}}
{{--                                               placeholder="Enter CNIC Without Dashes" name="cnic[]">--}}
{{--                                    </div>--}}
{{--                                    @error('cnic')--}}
{{--                                    <strong class="text-danger">{{ $message }}</strong>--}}

{{--                                    @enderror--}}
                                    <label class="form-label required" for="cnic">CNIC</label>

                                    @foreach(old('cnic', ['']) as $index => $cnic)
                                        <div class="input-group">
                                            <input class="form-control cnic @error('cnic.' . $index) is-invalid @enderror" type="text"
                                                   placeholder="Enter CNIC Without Dashes" name="cnic[]" value="{{ $cnic }}">
                                        </div>
                                        @error('cnic.' . $index)
                                        <strong class="text-danger">{{ $message }}</strong>
                                        @enderror
                                    @endforeach

                                    <p class="mb-3">e.g CNIC(3310050000000)</p>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="contact_no">Contact Number *</label>
                                    <input type="number" class="form-control @error('contact_no.*') is-invalid @enderror" name="contact_no[]"
                                           id="contact_no" placeholder="contact No" value="">
                                    @error('contact_no.*')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" for="relation">Relation *</label>
                                    <select name="relation[]" class="form-control form-control-name @error('relation.*') is-invalid @enderror">
                                        <option value="">Please Select</option>
                                        <option value="father">Father</option>
                                        <option value="Mother">Mother</option>
                                        <option value="Brother">Brother</option>
                                        <option value="Sister">Sister</option>
                                        <option value="Uncle">Uncle</option>
                                        <option value="Aunt">Aunt</option>
                                        <option value="Other">Other</option>
                                    </select>
                                    @error('relation.*')
                                    <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">
                                    <label class="" for="password">The Image Should not be greater than 1 mb</label>
                                    @error('image.*')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                    <div class="image-preview container-image-preview">
                                        <div id="image-preview-background"></div>
                                    </div>
                                </div>

                                    <hr class="underline text-dark fw-bold d-none mt-4">
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 mb-5">
                                <button type="button" class="btn btn-sm btn-dark float-end @if($allowFreeGuest <= 0) d-none @endif" id="add-qualification">Add More</button>
                            </div>
                            <button type="submit" name="submitButton" class="btn btn-sm btn-success @if($allowFreeGuest <= 0) d-none @endif" onclick="holdOn('sk-rect');">
                                <span class="spinner-border spinner-border-sm" id="acct-register-spiner" style="display:none;"></span> Save
                            </button>
                        </form>
                    </div>
                </div>
            </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('user/select2/dist/js/select2.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>
        //Prevent Click
        function holdOn(themeName) {
            HoldOn.open({
                theme: themeName,
                message: "<h4>Please wait...</h4>"
            });
        }
    </script>

    <script>
        $(function() {
            $('.is_active_guest').addClass('active');
        });
    </script>
    <script>
        $(document).ready(function () {
            $("#upload-csv").click(function () {
                $(".csv-box").removeClass('d-none');
                $("#upload-csv").addClass('d-none');

                $("#single-entry").removeClass('d-none');
                $(".single-box").addClass('d-none');
            });

            $("#single-entry").click(function () {
                $(".single-box").removeClass('d-none');
                $("#single-entry").addClass('d-none');

                $(".csv-box").addClass('d-none');
                $("#upload-csv").removeClass('d-none');
            });
        });
    </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>
    <script>
        // $('#add-qualification').click(function () {
        //     $(this).before($(".academic_details:eq(0)").clone());
        //     $('.academic_details:last').find('input,select',).each(function () {
        //         $(this).val('');
        //     });
        // });



        $(document).ready(function() {
            var max_fields      = {{$allowFreeGuest}}; //maximum div allowed
            var wrapper         = $(".academic_details"); //Fields wrapper
            var add_button      = $("#add-qualification"); //Add button ID
            var clone           = $(".academic_details:eq(0):first").clone().append('<a href="#" class="remove_field text-danger fw-bold text-decoration-none">Remove</a>').find("input").val("").end();

            var x = 1; //initlal div count
            $(add_button).click(function(e){ //on add input button click
                $(".underline").removeClass("d-none");
                e.preventDefault();
                if(x < max_fields){ //max div allowed
                    x++; //div increment
                    wrapper.append(clone.clone()); //
                }
            });

            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            });
        });


    </script>
    <script src="{{asset('user/js/mask.js')}}"></script>
    <script>
        (function () {
            $('.cnic').inputmask('9999999999999');
            // $('.mobile').inputmask('03999999999');
        }());
    </script>


    {{-- Toastr : Script : Start --}}
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
@endpush