@extends('tenant.layouts.supervisor')

{{-- Tilte Section --}}
@section('title', 'Edit Question Page')

{{-- Style Section --}}
@section('style')

    <style>
        .card-style {
            background: #fdfdfd
        }

        .col-7 {
            width: 60%;
        }

        .w-13 {
            width: 13% !important;
        }

        .w-5 {
            width: 4% !important;
        }

        .center {
            text-align: center;
        }

        .p-10 {
            padding: 10px;
        }

        .b-white {
            background: white;
        }

        .b-radius-10 {
            border-radius: 10px;
        }

        :focus-visible {
            outline: none;
        }

        .filters-block {
            padding-top: 8px;
        }

        .div-search {
            padding-left: 0px;
        }

        .checkbox-icon {
            font-size: 18px;
            color: black;
        }

        .table-body-color {
            color: #6b6b6b;
        }

        .table-header-color {
            color: #929e98;
            font-weight: 400;
        }

        .fa-style {
            margin-right: 9px;
            font-size: 18px;
        }

        .fa-file-text {
            vertical-align: middle;
        }

        .filters-block {
            display: inline-flex;
            width: 36%;
            justify-content: end;
            float: right;
            position: absolute;
            right: 60px;
        }

        .table-body-style {
            color: #6c6c6c;
            font-size: small;
        }

        .mt-10 {
            margin-right: 12px;
        }

        .btn-color {
            height: 43px;
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .btn-dark {
            height: 43px;
        }

        .modal-button-search {
            position: relative;
            /* Higher z-index value to bring the button to the front */
        }

        .modal-content-search {
            position: absolute !important;
            top: 125% !important;
            left: -9% !important;
            background-color: #fff !important;
            box-shadow: 0 0.125rem 7.25rem #00000013 !important;
            width: 500px;
            border-radius: 10px !important;
            z-index: 1 !important;
            display: none;
        }



        .style-btn-search {
            margin: 5px;
            padding: 0px;
            width: 100%;
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .input-search {
            width: 100%;
            border: var(--bs-border-width) var(--bs-border-style) #ffffff !important;
            vertical-align: sub;
            margin-top: 5px;
            padding: 0px;
        }

        /*.search-icon {*/
        /*    margin-top: 5px;*/
        /*}*/

        .modal-content {
            margin-top: 15% !important;
            border-radius: 25px;
            border: 0px;
            width: 115%;
            margin-left: -10%;
        }


        .submit-style {
            height: 40px;
            width: 10%;
            border-radius: 10px;
        }
        .form-check-input:checked {
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .switche{
            font-size: 150%;
            cursor: pointer;
        }
        .table{
            text-align: center;
            vertical-align: middle
        }
        .span_icon{
            vertical-align: sub;
            float: inline-end;
            cursor: pointer;
        }
        #row{
            border: 3px solid #40e690;
            box-shadow: -18px -1px 3px 0px rgb(0 163 78);
        }
        .header{
            margin-bottom: 3%;
        }
        .table-responsive{
            overflow: visible;
        }

        .but{
            padding-left: 20px;
            padding-right: 20px;
            border-radius: 40px;
            border-color: #e0f4ea;
            background-color: #e0f4ea;
            border: 2px;
            padding-top: 5px;
            padding-bottom: 5px;
        }



        .custom-select select {

            border-radius: 0px;
            cursor: pointer;
        }

        .arrow-icon {
            position: absolute;
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
            pointer-events: none;
            fill: #00a34e;
            width: 36px;
            height: 32px;
        }
        .new-header-style{
            text-align: end;
            text-decoration: underline;
            color: #00a34e;
            padding-top: 5px;
            cursor: pointer;
        }
        /* This css is for normalizing styles. You can skip this. */
        *, *:before, *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }





        /*                              ------      CheckBox Style      ------                   */
        .checkbox-parent , .radio-parent{
            display: flex;
        }
        .form-group {

            border: 1px solid #e3e3e3;
            border-radius: 4px;
            padding: 3px;

        }

        .form-group input {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            display: none;
            cursor: pointer;
        }

        .form-group label {
            position: relative;
            cursor: pointer;
        }

        .form-group label:before {
            content: '';
            -webkit-appearance: none;
            background-color: transparent;
            border: 2px solid #e1e7e4;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 15px;
        }

        .form-group input:checked + label:after {
            content: '';
            display: block;
            position: absolute;
            top: 2px;
            left: 7px;
            width: 6px;
            height: 14px;
            border: solid #00a34e;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .form-group-raido{
            border: 1px solid #e3e3e3;
            border-radius: 4px;
            padding: 3px;
        }
        .form-group-raido input {

            cursor: pointer;
            height: 17px;
            width: 18px;
            vertical-align: sub;
            border: 2px solid #cacaca;
        }
        /*                              ------      End CheckBox Style      ------                   */
        .dropdown-style{
            border: 1px solid #e3e3e3;
            padding: 10px;
            border-radius: 10px;
            cursor: pointer;
        }
        .circle {
            cursor: pointer;
            width: 40px;
            height: 34px;
            border-radius: 50%;
            background-color: #00a34e;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 5%;
            margin-left: 13px;
        }

        .form-control{
            border-radius: 0;
        }
        .content{
            height: 32rem;
            border-radius: 20px;
            /*margin-bottom: 5rem;*/
        }
        .header-div{
            background-image: linear-gradient(to right, #02a34e , #abc959);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        .coustome-style-div{
            padding: 2%;
            height: 100%;
            overflow: auto;
        }
        .footer-btn{
            padding: 20px;
        }
    </style>




@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid">

        <livewire:tenant.supervisor.evaluation.edit-question :evaluation_id="$evaluation_id" :group_id="$group_id" :question_id="$question_id" />

    </div>
@endsection

{{-- Script Section --}}
@section('script')
    <script type="module">

        $(document).ready(function() {
            var searchButton = $('#search_button');
            var search = $('#search');

            searchButton.click(function() {
                if (search.css('display') === 'none') {
                    search.css('display', 'block');
                } else {
                    search.css('display', 'none');
                }
            });
        });
        window.addEventListener('close-modal', event => {
            document.getElementById('closeModal').click()
        });
        window.addEventListener('open-modal', event => {
            $('#open_modal').click()
        });
        window.addEventListener('close-modal-search', event => {
            $('#search_button').click()
        });

        document.addEventListener('DOMContentLoaded', function () {
            var searchButton = document.getElementById('searchButton');

            if (searchButton) {
                searchButton.addEventListener('click', function (event) {
                    event.stopPropagation(); // Stop the event propagation
                });
            }
        });
        window.addEventListener('click-on-fatal-checkbox', event => {
            document.getElementById('Fatal').click()
        });
        window.addEventListener('click-on-na-checkbox', event => {
            document.getElementById('NA').click()
        });








    </script>
@endsection