<style>

#selectRegion option {
  background-color: #007bff !important;
  color: white !important;
}
</style>
<div class="card p-3 mt-5" id="dark-card1" style="margin: 10px;">
    <div class="default-tab">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#tab_1"><i class="bi bi-card-text me-2"></i>
                    Select Region</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#tab_2"><i class="bi bi-bar-chart me-2"></i>
                    Create New Region</a>
            </li>

        </ul>
        <div class="tab-content">

            <div class="tab-pane fade show active" id="tab_1">
                <div class="row" style="margin-top: 20px;">
                    <div class="col-md-12">

                        {{-- select region --}}



                        <div class="row" id="select_region" style="margin:10px; padding: 20px 0px;">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white">Select Region</label>
                                    <select class="form-control region_field" id="selectRegion" name="region_id">
                                        <option value="" selected class="bg-dark">
                                            Please select
                                        </option>
                                        @foreach ($allRegions as $list)
                                            <option value="{{ $list->_id }}" class="bg-dark" @selected($region_id == $list->_id)>
                                                {{ $list->region }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            {{-- create region --}}
            <div class="tab-pane fade" id="tab_2">
                <div class="row" style="margin-top: 20px;">
                    <div class="col-md-12">

                        <div class="row" id="create_region" style="margin:10px; padding: 20px 0px;">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="text-white">Region Name</label>
                                    <input type="text" placeholder="Enter Region Name"
                                        class="form-control region_field input-rounded" id="region_name"
                                        name="region" />
                                </div>
                            </div>

                            {{-- <div class="col-md-6">
                                <div class="form-check form-switch mb-2" style="margin-top: 15px;height: 70px;">
                                    <input class="form-check-input bg-success region_field" type="checkbox"
                                        id="flexSwitchCheckChecked" checked="" name="status"
                                        style="height: 46px;width: 98px;">
                                    <label style=" margin-left: 21px; font-size: 19px; margin-top: 10px; "
                                        class="form-check-label text-white"
                                        for="flexSwitchCheckChecked">Enable/Disable</label>
                                </div>
                            </div> --}}

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<script>
    function change_layout(type) {

        if (type == 1) {
            document.getElementById("dark-card1").style.display = "block";
            document.getElementById("dark-card2").style.display = "none";

        } else if (type == 2) {
            document.getElementById("dark-card1").style.display = "none";
            document.getElementById("dark-card2").style.display = "block";
        } else if (type == 3) {
            document.getElementById("dark-card1").style.display = "none";
            document.getElementById("dark-card2").style.display = "none";
        }

    }


    document.addEventListener('DOMContentLoaded', function() {
        const mySelect = document.getElementById('mySelect');
        const regionNameInput = document.getElementById('region_name');

        // Function to reset select to first option
        function resetSelect() {
            mySelect.selectedIndex = 0;
        }

        // Event listener for select change
        mySelect.addEventListener('change', function() {
            if (this.selectedIndex !== 0) {
                regionNameInput.value = '';
            }
        });

        // Event listener for region_name input
        regionNameInput.addEventListener('input', function() {
            if (this.value.trim() !== '') {
                resetSelect();
            }
        });
    });
</script>
