@extends('layout.maincontant')

@section('page-to-tittle')
    <h6 class="float-start m-0 them-fs-2">Location Settings</h6>
@endsection


@section('main-content-top-nav-btn')
    <style>
        .custom-dropdown {
            position: relative;
            display: inline-block;
        }

        .custom-dropdown select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            background: transparent;
            padding: 5px 30px 5px 15px;
            font-size: 16px;
            font-weight: bold;
            color: #007bff;
            cursor: pointer;
        }

        .custom-dropdown::before {
            content: "\f124";
            /* FontAwesome icon unicode */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #007bff;
        }


        .custom-dropdown select:focus {
            outline: none;
        }

        .custom-dropdown {
            border: 1px solid #007bff;
            border-radius: 4px;
            background-color: #f1f7fe;
            /* padding: 5px 15px; */
        }

        .custom-dropdownroles {
            position: relative;
            display: inline-block;
        }

        .custom-dropdownroles select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            background: #fff9ea;
            padding: 5px 30px 5px 15px;
            font-size: 16px;
            font-weight: bold;
            color: #e1994d;
            cursor: pointer;
        }

        .custom-dropdownroles::before {
            content: "\f007";
            /* FontAwesome icon unicode */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #e1994d;
        }


        .custom-dropdownroles select:focus {
            outline: none;
        }

        .custom-dropdownroles {
            border: 1px solid #e1994d;
            border-radius: 4px;
            background-color: #fff9ea;
            /* padding: 5px 15px; */
        }
    </style>
    <div class="row mt-1">
        <div class="col d-flex  px-2">


            <div class="custom-dropdown ">
                <select style='text-align:left' class="custom-select fs-13" id="inputGroupSelect02">
                    @if ($loc->isEmpty())
                        <option value="" selected><i class="fa-solid fa-location-arrow"></i> Location</option>
                    @else
                        @php
                            $sessionLocationId = session('location_id');
                        @endphp
                        @foreach ($loc as $loct)
                            <option value="{{ $loct->id }}" {{ $sessionLocationId == $loct->id ? 'selected' : '' }}>
                                {{ $loct->location }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>

            <div class="custom-dropdownroles d-none teamdiv">
                <select style='text-align:left' class="custom-select" id="roles">
                    @if ($user_role->isEmpty())
                        <option value="" selected><i class="fa-solid fa-location-arrow"></i> Roles</option>
                    @else
                        @php
                            $sessionLocationId = session('location_id');
                        @endphp
                        @foreach ($user_role as $ur)
                            <option value="{{ $ur->id }}" {{ $sessionLocationId == $ur->id ? 'selected' : '' }}>
                                {{ $ur->role }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </div>
        </div>



    </div>
@endsection
@section('main-content')
    <div class="row ">
        <div class="col-md-12 p-2  mb-2">
            <style>
                .overview-nav-tab-top>.nav-item>.nav-link text-dark {
                    border: 0px;

                }

                .overview-nav-tab-top>.nav-item>.active {
                    border: 0px;
                    color: #52050A !important;
                    background-color: #fff8f8;
                    border-radius: 5px;
                    font-weight: 500;
                }

                .overview-nav-tab-top {
                    border: 0px;
                }

                .overview-card-nav-tab>li>button {
                    color: black
                }

                .overview-card-nav-tab>li>.active {
                    color: black !important;
                    background-color: #ffffff !important;
                    border-bottom: 3px solid #52050a;
                    border-radius: 0px;
                }

                .overview-card-nav-tab>li>button>p {
                    color: #ffffff !important;
                    background-color: #a4656d !important;
                    border-radius: 50%;
                    width: 22px;
                    height: 22px;
                    text-align: center;
                    font-size: 14px;
                    margin: auto 5px;
                }

                .overview-card-nav-tab>li>button {
                    display: flex;
                }

                .visitors-table-name {
                    color: #52050a;
                }

                .weekly-table-name {
                    color: #b8b8b8;
                }

                .visitors-table-badge {
                    background-color: #f5e3e3;
                    color: #52050A;
                }

                .borderless-table td,
                .borderless-table th {
                    border: none;
                }
            </style>
            <div>
                <ul class="nav nav-tabs bg-white fs-15 rounded p-2 overview-nav-tab-top" id="overviewnavtabtop"
                    role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#general" class="nav-link anchortab text-dark active" id="general-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="general" aria-selected="true">General</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#opening" class="nav-link anchortab text-dark" id="opening-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="opening" aria-selected="false">Opening Hours</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#services" class="nav-link anchortab text-dark" id="services-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="services" aria-selected="false">Services</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#desk" class="nav-link anchortab text-dark" id="desk-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="desk" aria-selected="false">Desk</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a href="#inputlabel" class="nav-link anchortab text-dark" id="inputlabel-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="inputlabel" aria-selected="false">Input Field & Labels</a>
                    </li>
                    {{-- <li class="nav-item" role="presentation">
            <a href="#ipad" class="nav-link text-dark" id="ipad-tab" data-bs-toggle="tab" role="tab" aria-controls="ipad" aria-selected="false">Ipad</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#tv" class="nav-link text-dark" id="tv-tab" data-bs-toggle="tab" role="tab" aria-controls="tv" aria-selected="false">TV screen</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#planner" class="nav-link text-dark" id="planner-tab" data-bs-toggle="tab" role="tab" aria-controls="planner" aria-selected="false">Visit Planner</a>
        </li>
        <li class="nav-item" role="presentation">
            <a href="#message" class="nav-link text-dark" id="message-tab" data-bs-toggle="tab" role="tab" aria-controls="message" aria-selected="false">Text-Message</a>
        </li> --}}
                    <li class="nav-item px-2" role="presentation">
                        <a href="#team" class="nav-link anchortab text-dark" id="team-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="team" aria-selected="false">Team</a>
                    </li>
                    <li class="nav-item px-2" role="presentation">
                        <a href="#location-all" class="nav-link anchortab text-dark" id="location-all-tab" data-bs-toggle="tab"
                            role="tab" aria-controls="location-all" aria-selected="false">Locations</a>
                    </li>

                    <li class="nav-item" role="presentation">
                        <a href="#newloc" class="btn  nav-link anchortab loc-add-nav-link text-dark" id="newloc-tab"
                            data-bs-toggle="tab" role="tab" aria-controls="newloc" aria-selected="false"
                            style="background:#52050a;color:#ffffff !important">+ New Location</a>
                    </li>
                </ul>
            </div>

            <div class="tab-content col-md-12 p-2" id="myTabContent">
                @yield('content')
                <div class="tab-pane fade show active m-0 p-2" id="general" role="tabpanel" aria-labelledby="general-tab">
                    @include('pages.location.general')
                </div>
                <div class="tab-pane fade m-0 p-2" id="opening" role="tabpanel" aria-labelledby="opening-tab">
                    @include('pages.location.opening')
                </div>
                <div class="tab-pane fade m-0 p-2" id="services" role="tabpanel" aria-labelledby="services-tab">
                    @include('pages.location.services')
                </div>
                <div class="tab-pane removeshow show active fade m-0 p-2" id="desk" role="tabpanel"
                    aria-labelledby="desk-tab">
                    @include('pages.location.desk')
                </div>
                <div class="tab-pane fade m-0 p-2" id="inputlabel" role="tabpanel" aria-labelledby="inputlabel-tab">
                    @include('pages.location.inputlabel')
                </div>
                <div class="tab-pane fade m-0 p-2" id="ipad" role="tabpanel" aria-labelledby="ipad-tab">
                    @include('pages.location.ipad')
                </div>
                <div class="tab-pane fade m-0 p-2" id="tv" role="tabpanel" aria-labelledby="tv-tab">
                    @include('pages.location.tv')
                </div>
                <div class="tab-pane fade m-0 p-2" id="planner" role="tabpanel" aria-labelledby="planner-tab">
                    @include('pages.location.visitplan')
                </div>
                <div class="tab-pane fade m-0 p-2" id="team" role="tabpanel" aria-labelledby="team-tab">
                    @include('pages.location.team')
                </div>
                <div class="tab-pane fade m-0 p-2" id="location-all" role="tabpanel" aria-labelledby="location-all-tab">
                    @include('pages.settings-pages.seeting-location')
                </div>
                <div class="tab-pane removeshow fade show active m-0 p-2" id="newloc" role="tabpanel"
                    aria-labelledby="newloc-tab">
                    @include('pages.location.newlocation')
                </div>
            </div>



        </div>
        <script>
            $(document).ready(function() {

                $(".removeshow").removeClass("show");
                $(".removeshow").removeClass("active");
                // Handle tab click events
                $('.anchortab').on('click', function(e) {
                    e.preventDefault();
                    var target = $(this).attr('href');
                    $('.tab-pane').removeClass('show active');
                    $(target).addClass('show active');
                    $('.anchortab').removeClass('active');
                    $(this).addClass('active');

                    // Update URL hash
                    window.location.hash = target.replace('#', '');
                    var hash1 = window.location.hash;
                    if (hash1 === '#team') {
                        $(".teamdiv").removeClass('d-none');
                    } else {

                        $(".teamdiv").addClass('d-none');
                    }
                });

                // Check hash in URL on page load
                if (window.location.hash) {
                    var hash = window.location.hash;
                    $('.anchortab[href="' + hash + '"]').tab('show');
                    $(hash).addClass('show active');

                    if (hash === '#team') {
                        //    $(".teamdiv").show();
                        $(".teamdiv").removeClass('d-none');
                    } else {
                        // $(".teamdiv").hide();
                        $(".teamdiv").addClass('d-none');
                    }
                }
            });
        </script>
        <script>
            $('.menu-location').addClass('current-menu-active');
        </script>
        <script>
            $(document).ready(function() {
                $('#inputGroupSelect02').on('change', function() {
                    setsec()

                });
            });
            $(document).ready(function() {
                var secession_value = "{{ $sess_id }}";
                if (secession_value == "") {
                    var drop = $("#inputGroupSelect02").val();
                    // alert(drop);
                    if (drop != "") {
                        setsec()
                    }
                }
            });

            function setsec() {
                var locationId = $("#inputGroupSelect02").val();
                var locationName = $("#inputGroupSelect02").find('option:selected').text();

                $.ajax({
                    url: "{{ route('update.location.session') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        location_id: locationId,
                        location_name: locationName
                    },
                    success: function(response) {
                        window.location.reload();
                        console.log('Session updated successfully');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error updating session');
                    }
                });
            }
        </script>

        <script>
            $(document).ready(function() {

                // $(".removeshow").removeClass("show");
                // $(".removeshow").removeClass("active");
            });
        </script>
    @endsection