@extends('tenant.layouts.admin')

{{--Tilte Section--}}
@section('title', 'Form Fields')

{{--Style Section--}}
@section('style')
{{--    <link rel="stylesheet" href="{{asset('vendor/select2/css/select2.min.css')}}">--}}

    <style>
        .custom-select {
            position: relative;
            display: inline-block;
            border: 1px solid #ccc;
        }

        .custom-select select {
            display: none;
        }

        .custom-select .select-selected {
            background-color: #f1f1f1;
            padding: 5px 10px;
            font-size: 16px;
        }

        .custom-select .select-selected:after {
            content: "\25BC";
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
        }

        .custom-select .select-items {
            position: absolute;
            z-index: 999;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #f1f1f1;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid #ccc;
        }

        .custom-select .select-items div {
            padding: 5px 10px;
            cursor: pointer;
        }

        .custom-select .select-items div:hover {
            background-color: #e9e9e9;
        }

    </style>

@endsection

{{--Content Section--}}
@section('content')
    <div class="container-fluid">
        @include('tenant.admin.flows.filter.filter')
        <livewire:tenant.admin.flows.form.fields />

    </div>

@endsection

{{--Script Section--}}
@section('script')

{{--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>--}}
{{--    <script src="{{asset('vendor/select2/js/select2.full.min.js')}}"></script>--}}


    <script type="module">
        $(document).ready(function(){
            document.getElementById('value').disabled="disabled"
        });

        window.addEventListener('checkType', event => {
            var type = document.getElementById('type').value;
            if(type == 'select')
            {
                document.getElementById('value').disabled=""
            }else {
                document.getElementById('value').disabled="disabled"
            }
            console.log(type);
        });

        // jQuery(document).ready(function($) {
        //     $(".select2").select2({
        //         tags: true,
        //         closeOnSelect:false,
        //         minimumResultsForSearch:Infinity,
        //     });
        // });
        window.addEventListener('close-modal', event => {
            console.log('test')
            document.getElementById('closeModal').click();
        });
    </script>

    <script>
        var selectBox = document.getElementsByClassName("custom-select")[0];
        var selectItems = selectBox.getElementsByClassName("select-items")[0];
        var selectSelected = selectBox.getElementsByClassName("select-selected")[0];
        var selectOptions = selectBox.getElementsByTagName("option");

        selectSelected.addEventListener("click", function(e) {
            e.stopPropagation();
            closeAllSelectBoxes();
            selectBox.classList.toggle("select-active");
        });

        for (var i = 0; i < selectOptions.length; i++) {
            var div = document.createElement("div");
            div.innerHTML = selectOptions[i].innerHTML;
            div.addEventListener("click", function(e) {
                var option = this.parentNode.previousSibling;
                var value = this.innerHTML;
                for (var j = 0; j < option.length; j++) {
                    if (option.options[j].innerHTML == value) {
                        option.options[j].selected = true;
                        break;
                    }
                }
                selectSelected.innerHTML = value;
                selectBox.classList.remove("select-active");
            });
            selectItems.appendChild(div);
        }

        function closeAllSelectBoxes() {
            var selectBoxes = document.getElementsByClassName("custom-select");
            for (var i = 0; i < selectBoxes.length; i++) {
                var selectBox = selectBoxes[i];
                var selectItems = selectBox.getElementsByClassName("select-items")[0];
                selectBox.classList.remove("select-active");
            }
        }

        document.addEventListener("click", closeAllSelectBoxes);

    </script>
@endsection