@extends('manager.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/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('manager/inc.topHeader')
    <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>
            <hr>
            <div class="row p-2 more-menu">
                <div class="col-md-3">
                    @include('manager/inc.sideHeader')
                </div>
                <div class="col-md-9 py-2">

                    @if(empty($registerCandidate->contact_no))
                        @can('manager_session-registration_personal-information-create')
                            <form method="{{$method}}" action="{{$action}}" enctype="{{$enctype}}">
                                @csrf

                                <div class="mb-3">
                                    <label class="form-label" for="Session">Session</label>
                                    <select name="session_id"
                                            class="form-control @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 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="mb-3">
                                    <label class="form-label" for="name_of_institution">Name of 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>



                                <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>

                                <button type="submit" class="btn btn-sm btn-success" onclick="holdOn('sk-rect');">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>Registration No.</th>
                                            <th>contact No</th>
                                            <th>Residence Cell No</th>
                                            <th>Seat No</th>
                                            <th>Profile Image</th>
                                            <th>Actions</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endcan
                    @else
                        @canany(['manager_session-registration_personal-information-list','manager_session-registration_personal-information-edit'])
                            <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>Registration No.</th>
                                            <th>contact No</th>
                                            <th>Residence Cell No</th>
                                            <th>Seat No</th>
                                            <th>Profile Image</th>
                                            <th>Gender</th>

                                            <th>Actions</th>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endcanany
                    @endif

                </div>
            </div>
            {{-- Datatatble : Start --}}

            {{-- 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 --}}
            {{-- 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>
        {{-- 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 --}}
        {{-- Upload Seat Model : Start --}}
        <div class="upload-model-wrapper">
            <div class="modal fade" id="upload-model" tabindex="-1" aria-labelledby="upload-model" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header py-2">
                            <h5 id="name_candidate" class="mb-0"></h5>
                            <button type="button" class="btn-close shadow-none" data-coreui-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <form method="POST" id="upload-form" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="modal-body">
                                <p class="font-weight-bold mb-2">Seat No.</p>
                                <input type="text" name="seat_no" id="seat_no" class="form-control"
                                       placeholder="Seat No.">
                                @error('seat_no')
                                <strong class="text-danger">{{ $message }}</strong>
                                @enderror
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-coreui-dismiss="modal">Cancel
                                </button>
                                <button type="submit" class="btn btn-success text-white" >
                                    {{ __('Submit') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {{-- Upload Seat Model : End --}}
    </div>
@endsection
@push('footer-scripts')
    <script src="{{asset('manager/formToJson/formToJson.js')}}"></script>
    <script type="text/javascript" src="{{asset('user/holdOn/src/js/HoldOn.js') }}"></script>
    <script type="text/javascript" src="{{ asset('user/datatable/datatables.min.js')}}"></script>
    <script src="{{ asset('manager/cropper/cropper.js') }}"></script>
    <script>
        $(function () {
            $('.is_active_personal').addClass('active');
        });
    </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>
    <script>
        //Prevent Click
        function holdOn(themeName) {
            HoldOn.open({
                theme: themeName,
                message: "<h4>Please wait...</h4>"
            });
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            let URL = "{{ route('manager.get.personal-information', [':sid',':cid']) }}";
            URL = URL.replace(':sid', {{$session->id}});
            URL = URL.replace(':cid', {{$registerCandidate->id}});
            //Datatable
            $('#indextable').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                order: [[0, "desc"]],
                ajax: {
                    "type": "GET",
                    "url": URL,
                },
                columns: [
                    {data: 'id', orderable: false},
                    {data: 'name'},
                    {data: 'reg_no'},
                    {data: 'contact_no'},
                    {data: 'residence_cell_no'},
                    {data: 'seat_no'},
                    {data: null},
                    {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('manager.personalInformation.get.image',':id')}}';
                            Imagess = Imagess.replace(':id', row.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: 7,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            var genderText = '';

                            // Check if gender is not null
                            if (data.gender === null || data.gender === undefined) {
                                genderText = ''; // Shows nothing if gender is null or undefined
                            } else if (data.gender == 0) {
                                genderText = 'Female';
                            } else if (data.gender == 1) {
                                genderText = 'Male';
                            }

                            // Return empty div or a div with the text if gender exists
                            return '<div class="d-flex"><p>' + genderText + '</p></div>';
                        }
                    },


                    {
                        targets: -1,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            let edit = "{{ route('manager.convocation-session.personal-information.create', [':sid' , ':cid']) }}";
                            edit = edit.replace(':sid', {{$session->id}});
                            edit = edit.replace(':cid', row.id);
                            let editgender = "{{ route('manager.get.personal-information-edit-gender', [':sid' , ':cid']) }}";
                            editgender = editgender.replace(':sid', {{$session->id}});
                            editgender = editgender.replace(':cid', row.id);

                            let URL = "{{ route('manager.convocation-session.personal-information.show', [':sid' , ':cid' ,':id']) }}";
                            URL = URL.replace(':sid', {{$session->id}});
                            URL = URL.replace(':cid', row.id);
                            URL = URL.replace(':id', row.id);

                            let ACTIVITY = "{{ route('manager.get.personal-information-activity', [':sid' , ':cid' ,':id']) }}";
                            ACTIVITY = ACTIVITY.replace(':sid', {{$session->id}});
                            ACTIVITY = ACTIVITY.replace(':cid', {{$registerCandidate->id}});
                            ACTIVITY = ACTIVITY.replace(':id', row.id);

                            let gatePass = "{{ route('manager.get.gatepass', ':id') }}";
                            gatePass = gatePass.replace(':id', row.id);

                            let uploadSeat = "{{ route('manager.get.upload-seat', [':sid' ,':id']) }}";
                            uploadSeat = uploadSeat.replace(':sid', {{$session->id}});
                            uploadSeat = uploadSeat.replace(':id', row.id);

                            if (data.voucher_status === 'approve' &&  data.status !=null) {
                                return '<div class="d-flex">' +
                                    @can('manager_session-registration-gatepass')
                                        '<a class="me-1" href="' + gatePass + '"><span class="badge bg-primary text-white">Gate Pass</span></a>' +
                                    @endcan
                                        @can('manager_session-registration_personal-information-activity-log')
                                        '<a class="me-1" href="' + ACTIVITY + '"><span class="badge bg-warning text-dark">Activity</span></a>' +
                                    @endcan
                                        @can('manager_session-registration_registration-seat')
                                        '| <a class="me-1 ms-2" href="javascript:void(0)"><span type="button" class="badge bg-success" data-candidate="' + row.name + '" data-seat_no="' + row.seat_no + '" data-url="' + uploadSeat + '" data-coreui-toggle="modal" data-coreui-target="#upload-model"><i class="nav-icon text-white cil-sofa"></i> Seat</span></a>' +
                                    @endcan

{{--                                        @can('manager_session-registration_personal-information-edit')--}}
                                        '<a class="me-1" href="' + editgender + '"><span class="badge bg-info text-dark">Edit Gender</span></a>' +
{{--                                    @endcan--}}

                                        '</div>'
                            } else {
                                return '<div class="d-flex">' +
                                    @can('manager_session-registration_registration-seat')
                                        '<a class="me-1" href="javascript:void(0)"><span type="button" class="badge bg-success" data-candidate="' + row.name + '" data-seat_no="' + row.seat_no + '" data-url="' + uploadSeat + '" data-coreui-toggle="modal" data-coreui-target="#upload-model"><i class="nav-icon text-white cil-sofa"></i> Seat</span></a>' +
                                    @endcan

                                        @can('manager_session-registration_personal-information-edit')
                                        '<a class="me-1" href="' + edit + '"><span class="badge bg-info text-dark">edit</span></a>' +
                                    @endcan
                                        @can('manager_session-registration_personal-information-show')
                                        '<a class="me-1" href="' + URL + '"><span class="badge bg-success text-dark">Show</span></a>' +
                                    @endcan
                                        @can('manager_session-registration_personal-information-activity-log')
                                        '<a class="me-1" href="' + ACTIVITY + '"><span class="badge bg-warning text-dark">Activity</span></a>' +
                                    @endcan


                                        '</div>'

                            }


                        }
                    }
                ]
            });
        });

        function selectRange() {
            $('.dataTable').DataTable().ajax.reload()
        }
    </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>

    {{-- Upload Candidate Model : Script : Start --}}
    <script>
        $("#upload-model").on('show.coreui.modal', function (event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            var name = triggerLink.data("candidate");
            var seat_no = triggerLink.data("seat_no");
            $("#upload-form").attr('action', url);
            $("#name_candidate").text(name);
            $("#seat_no").val(seat_no);
        })
    </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