@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"/>
@endpush
@section('content')
    @include('user.applicants.inc.topMenu')
    <div class="card mt-3">
        <div class="card-body">
            <div class="row p-2 more-menu">
                <div class="col-md-3">
                    @include('user.applicants.inc.menu')
                </div>
                <div class="col-md-9">
                    {{-- Start: Form --}}
                    <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="mb-3 col-md-12">
                                <fieldset class="reset-this redo-fieldset">
                                    <legend class="reset-this redo-legend">CNIC</legend>
                                    <div class="row">
                                        <div class="mb-3 col-md-12">
                                            <label class="form-label text-dark" for="name">CNIC *</label>
                                            <input type="text" class="cnic form-control @error('cnic') is-invalid @enderror"
                                                   name="cnic" id="cnic" data-inputmask="'mask': '99999-9999999-9'"
                                                   placeholder="XXXXX-XXXXXXX-X"
                                                   value="{{(!empty($data->cnic) && isset($data->cnic)) ? $data->cnic : old('cnic')}}">
                                            @error('cnic')
                                            <strong class="text-danger">{{ $message }}</strong>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-6" id="img_front">
                                            <label class="form-label text-dark" for="name">Front *</label>
                                            <input type="file"
                                                   class="front-cropper form-control @error('name') is-invalid @enderror"
                                                   name="front" id="front"
                                                   value="{{old('front')}}">
                                            @error('front')
                                            <strong class="text-danger">{{ $message }}</strong>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-md-6" id="img_back">
                                            <label class="form-label text-dark" for="name">Back *</label>
                                            <input type="file" class="back-cropper form-control @error('name') is-invalid @enderror"
                                                   name="back" id="back"
                                                   value="{{old('back')}}">
                                            @error('back')
                                            <strong class="text-danger">{{ $message }}</strong>
                                            @enderror
                                        </div>
                                    </div>
                                </fieldset>
                            </div>

                            <div class="mb-3 col-md-6">
                                <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="{{(!empty($applicantInfo->name) && isset($applicantInfo->name)) ? $applicantInfo->name : old('name')}}">
                                @error('name')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="name">Father Name</label>
                                <input type="text" class="form-control @error('father_name') is-invalid @enderror"
                                       name="father_name" id="father_name" placeholder="Father Name"
                                       value="{{(!empty($applicantInfo->father_name) && isset($applicantInfo->father_name)) ? $applicantInfo->father_name : old('father_name')}}">
                                @error('father_name')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="name">Date of Birth</label>
                                <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror"
                                       name="date_of_birth" id="date_of_birth" placeholder="Date"
                                       value="{{(!empty($applicantInfo->date_of_birth) && isset($applicantInfo->date_of_birth)) ? $applicantInfo->date_of_birth : old('date_of_birth')}}">
                                @error('date_of_birth')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="name">Gender *</label>
                                <select
                                    class="select2-gender form-control form-select @error('gender') is-invalid @enderror"
                                    name="gender">
                                    <option value=""></option>
                                    @foreach($genders as $gender)
                                        <option value="{{$gender->id}}" @if(!empty($applicantInfo->gender_id) && $applicantInfo->gender_id == $gender->id) selected @endif>{{$gender->title}}</option>
                                    @endforeach
                                </select>
                                @error('gender')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="name">Marital Status</label>
                                <select
                                    class="select2-marital form-control form-select @error('marital_status') is-invalid @enderror"
                                    name="marital_status">
                                    <option value=""></option>
                                    <option value="single"
                                            @if($applicantInfo->marital_status == 'single') selected @endif>Single
                                    </option>
                                    <option value="married"
                                            @if($applicantInfo->marital_status == 'married') selected @endif>Married
                                    </option>
                                </select>
                                @error('marital_status')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="name">Domicile</label>
                                <input type="text" class="form-control @error('domicile') is-invalid @enderror"
                                       name="domicile" id="domicile" placeholder="Domicile"
                                       value="{{(!empty($applicantInfo->domicile) && isset($applicantInfo->domicile)) ? $applicantInfo->domicile : old('domicile')}}">
                                @error('domicile')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-6" id="img_input">
                                <label class="form-label" for="name">Profile</label>
                                <input type="file" class="image-cropper form-control @error('image') is-invalid @enderror"
                                       accept=".png, .jpg, .jpeg" name="image" id="image">
                                @error('image')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="mb-3 col-md-12">
                                <label class="form-label" for="stall">Introduction</label>
                                <textarea rows="5" class="form-control" id="introduction"
                                          name="introduction">{{(!empty($applicantInfo->introduction) && isset($applicantInfo->introduction)) ? $applicantInfo->introduction : old('introduction')}}</textarea>
                                @error('introduction')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                        </div>
                        <button type="submit" class="btn btn-sm btn-success" onclick="holdOn('sk-rect');">Submit</button>
                    </form>
                    {{-- End: Form --}}
                </div>
            </div>
            {{-- 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>
    {{-- Modal --}}
    <div class="modal fade bd-example-modal-lg imageCrop" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true"  data-coreui-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0">
                    <h5 class="modal-title" id="cropperModal">Profile</h5>
                    <button type="button" class="close btn-close" id="reset-image-img" data-coreui-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img id="previewImage" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer py-1 m-0">
                    <button type="button" class="btn btn-success crop py-1 px-2" id="cropImage">Crop Image</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End: Modal --}}
    {{--     Start: ID Card Front  --}}
    <div class="modal fade bd-example-modal-lg imageFront" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true" data-coreui-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0">
                    <h5 class="modal-title" id="cropperModal">Front</h5>
                    <button type="button" class="close btn-close" id="reset-image-front" data-coreui-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img id="frontPreviewImage" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer py-1 m-0">
                    <button type="button" class="btn btn-success crop py-1 px-2" id="cropImageFront">Crop Image</button>
                </div>
            </div>
        </div>
    </div>
    {{--     End: ID Card Front --}}
    {{--     Start: ID Card Front  --}}
    <div class="modal fade bd-example-modal-lg imageBack" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true" data-coreui-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0">
                    <h5 class="modal-title" id="cropperModal">Back</h5>
                    <button type="button" class="close btn-close" id="reset-image-front" data-coreui-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img id="backPreviewImage" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer py-1 m-0">
                    <button type="button" class="btn btn-success crop py-1 px-2" id="cropImageBack">Crop Image</button>
                </div>
            </div>
        </div>
    </div>
    {{--     End: ID Card Front --}}
@endsection
@push('footer-scripts')
    <script src="{{ asset('user/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('user/ckeditor/ckfinder/ckfinder.js') }}"></script>
    <script src="{{ asset('admin/select2/dist/js/select2.js') }}"></script>
    <script src="{{ asset('user/js/mask.js') }}"></script>
    <script src="{{ asset('manager/cropper/cropper.js') }}"></script>
    <script src="{{asset('manager/cropper/canvas-to-blob.min.js')}}"></script>
    <script>
        $(function () {
            $('.active-personal-info').addClass('active');
        });
        $(document).ready(function () {
            //Select Status
            $('.select2-gender').select2({
                theme: "bootstrap5",
                placeholder: 'Select Gender',
            });
            //Select Status
            $('.select2-marital').select2({
                theme: "bootstrap5",
                placeholder: 'Select Marital Status',
            });
            CKEDITOR.replace('introduction');
            $('.cnic').inputmask();
        });

        //Image Cropper
        $(document).ready(function () {
            $('#reset-image-img').on('click', function () {
                $('.image-cropper').val('');
            });
            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: 1 / 1,
                    autoCropArea: 0.65,
                    viewMode: 1,
                    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) {
                    // Crop & Convert it to image
                    const bannerInput = document.getElementById("img_input")
                    var ban = document.createElement("INPUT");
                    ban.setAttribute("type", "file");
                    ban.setAttribute("name", "cropper_img");
                    ban.classList.add("d-none");
                    bannerInput.appendChild(ban);
                    const file = new File([blob], 'profile.jpg', {type: 'image/jpeg'})
                    const dataTransfer = new DataTransfer()
                    dataTransfer.items.add(file)
                    ban.files = dataTransfer.files
                    $modal.modal('hide');
                });
            });
        });
        //Image Front
        $(document).ready(function () {
            $('#reset-image-front').on('click', function () {
                $('.front-cropper').val('');
            });
            var $modal = $('.imageFront');
            var image = document.getElementById('frontPreviewImage');
            var cropper;
            $("body").on("change", ".front-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: 9 / 6,
                    autoCropArea: 0.65,
                    viewMode: 1,
                    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", "#cropImageFront", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 1013,
                    height: 638,
                });
                canvas.toBlob(function (blob) {
                    // Crop & Convert it to image
                    const bannerInput = document.getElementById("img_front")
                    var ban = document.createElement("INPUT");
                    ban.setAttribute("type", "file");
                    ban.setAttribute("name", "cropper_front");
                    ban.classList.add("d-none");
                    bannerInput.appendChild(ban);
                    const file = new File([blob], 'front.jpg', {type: 'image/jpeg'})
                    const dataTransfer = new DataTransfer()
                    dataTransfer.items.add(file)
                    ban.files = dataTransfer.files
                    $modal.modal('hide');
                });
            });
        });

        //Image Back
        $(document).ready(function () {
            $('#reset-image-back').on('click', function () {
                $('.back-cropper').val('');
            });
            var $modal = $('.imageBack');
            var image = document.getElementById('backPreviewImage');
            var cropper;
            $("body").on("change", ".back-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: 9 / 6,
                    autoCropArea: 0.65,
                    viewMode: 1,
                    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", "#cropImageBack", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 1013,
                    height: 638,
                });
                canvas.toBlob(function (blob) {
                    // Crop & Convert it to image
                    const bannerInput = document.getElementById("img_back")
                    var ban = document.createElement("INPUT");
                    ban.setAttribute("type", "file");
                    ban.setAttribute("name", "cropper_back");
                    ban.classList.add("d-none");
                    bannerInput.appendChild(ban);
                    const file = new File([blob], 'back.jpg', {type: 'image/jpeg'})
                    const dataTransfer = new DataTransfer()
                    dataTransfer.items.add(file)
                    ban.files = dataTransfer.files
                    $modal.modal('hide');
                });
            });
        });
    </script>
    @if(Session::has('messages'))
        <script>
            noti({!! json_encode((Session::get('messages'))) !!});
        </script>
    @endif
@endpush