@extends('layouts.main_frontend')
@section('content')

<main>
    <!-- Desktop Breadcrumb -->
    <section class="py-md-4 py-2">
        <div class="container">
            <nav class="breadcrumb-container" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{route('Home')}}"> @lang('site.home') </a>
                    </li>
                    <li class="breadcrumb-item text-main" aria-current="page">
                        @lang('site.favourite')
                    </li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- section -->
    <section>
        <div class="container">
            <div class="row">
                <div class="tabs-details mt-3">
                    <ul class="tabs-nav-all-booking list-unstyled d-flex mb-2 tabs-nav-detailss">
                        <li class="tab @if($activeTab === 'tab-1') tab-active @endif">
                            <a href="#tab-1" class="tab-link-all d-flex align-items-center justify-content-center">
                                <div>
                                    <i class="far fa-building"></i>
                                </div>
                                <h2 class="mb-0 pe-2">@lang('site.aquars')</h2>
                            </a>
                        </li>
                        <li class="tab @if($activeTab === 'tab-2') tab-active @endif">
                            <a href="#tab-2" class="tab-link-all d-flex align-items-center justify-content-center">
                                <div>
                                    <i class="far fa-car-side"></i>
                                </div>
                                <h2 class="mb-0 pe-2">@lang('site.cars')</h2>
                            </a>
                        </li>
                        <li class="tab @if($activeTab === 'tab-3') tab-active @endif">
                            <a href="#tab-3" class="tab-link-all d-flex align-items-center justify-content-center">
                                <div>
                                    <i class="far fa-car-side"></i>
                                </div>
                                <h2 class="mb-0 pe-2">@lang('site.places')</h2>
                            </a>
                        </li>

                    </ul>
                    <ul class="tabs-content pt-4 list-unstyled all-booking-tabs tabs-content-details">
                        <li id="tab-1" class="tab @if($activeTab === 'tab-1') tab-active @endif" style=" @if($activeTab != 'tab-1') display: none !important; @endif" >
                            <div class="row"  id="tab-content-1">
                                <div class="col-12">
                                    <div class="card card-department  mb-4 p-md-3 p-2" style="border: none">
                                       <div class="row g-0">
                                    @if (!empty($AqarCitiesSelector))
                                            @foreach($AqarCitiesSelector as $aqar)
                                                @if(!empty($aqar))
                                        
                                                    <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-1">
                                                        <div class="card-tour mb-3">
                                                            <a href="{{ route('favouritAqarsDetails', ['city_id' => $aqar->id ,'type' => 0]) }}">
                                                                <div class="card-image-box">
                                                                    <img class="card-img"
                                                                        src="{{ $aqar->image }}"
                                                                        alt="Card image cap">
                                                                </div>
                                                                <div class="card-tour-body d-flex justify-content-between align-items-center">
                                                                    <div class="number d-flex">
                                                                        <h2 class="card-title">{{ $aqar->name_ar }}</h2>
                                                                        <h5 style="color:var(--m-main); margin-inline:5px;">( {{ $aqar->aqar_count }} )</h5>
                                                                    </div>
                                                                    <div>
                                                                        {{-- <img src="./assets/images/turkey.png" alt="turkey"
                                                                            class="icon-flag"> --}}
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                    @elseif(empty($AqarCitiesSelector) && !empty($AqarSelector))

                                            @foreach ($AqarSelector as $aqar )
                                                @if (!empty($aqar))
                                                    <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-1">
                                                        <div class="card-tour mb-3 flex">
                                                            <a href="{{ route('favouriteCities',[ 'country_id'=>$aqar->country_id ,'type' =>0]) }}">
                                                                <div class="card-image-box">
                                                                    <img class="card-img" src="{{ $aqar->image }}" alt="Card image cap">
                                                                </div>
                                                                <div class="card-tour-body d-flex justify-content-between align-items-center">
                                                                    <div class="number d-flex">
                                                                        <h2 class="card-title">{{ $aqar->name_ar }}</h2>
                                                                        
                                                                        <h5>( {{ $aqar->aqar_count }} )</h5>
                                                                    </div>
                                                                    <div>
                                                                        {{-- <img src="./assets/images/countries/turkey.png" alt="turkey" class="icon-flag"> --}}
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                    @endif
                                          
                                    @unless(empty($AqarCitiesSelector) && empty($AqarSelector))
                                                <!-- Empty booking -->
                                                 <div class="col-12 mb-5">
                                                    <div class="card-empty d-md-flex align-items-center">
                                                        <div class="card-empty-txt">@lang('site.No Favourite')</div>
                                                        <div>
                                                            <img src="{{ FRONTASSETS }}/investor/empty-ic.svg" alt="empty icon" />
                                                        </div>
                                                    </div>
                                                </div> 
                                   @endunless
                                    
                                </div>

                            </div>

                        </li>
                        <li id="tab-2" class="tab @if($activeTab === 'tab-2') tab-active @endif" style=" @if($activeTab != 'tab-2') display: none !important; @endif">
                            <div class="row"  id="tab-content-2">
                                <div class="col-12">
                                   

                                    <div class="card card-department  mb-4 p-md-3 p-2" style="border: none">
                                                <div class="row">
                                                    @if (!empty($CarCitiesSelector))
                                                    @foreach ($CarCitiesSelector as $car)
                                                        @if (!empty($car) )
                                                    <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-1">
                                                        <div class="card-tour mb-3">
                                                            <a href="{{ route('favouritAqarsDetails', ['city_id' => $car->id ,'type' => 1]) }}">
                                                                <div class="card-image-box">
                                                                    <img class="card-img"
                                                                        src="{{ $car->image }}"
                                                                        alt="Card image cap">
                                                                </div>
                                                                <div
                                                                    class="card-tour-body d-flex justify-content-between align-items-center">
                                                                    <div class="number d-flex">
                                                                        <h2 class="card-title">{{ $car->name_ar }}</h2>
                                                                        <h5 style="color:var(--m-main); margin-inline:5px;">( {{ $car->car_count }} )</h5>
                                                                    </div>
                                                                    <div>
                                                                        {{-- <img src="./assets/images/turkey.png" alt="turkey"
                                                                            class="icon-flag"> --}}
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        
                                      
                                                @elseif(empty($CarCitiesSelector) && !empty($CarSelector))

                                                @foreach ($CarSelector as $car)
                                                    @if (!empty($car))
                                                                <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-1">
                                                                    <div class="card-tour mb-3">
                                                                        <a href="{{ route('favouriteCities',['country_id'=>$car->id ,'type' =>1]) }}">
                                                                            <div class="card-image-box">
                                                                                <img class="card-img" src="{{ $car->image }}" alt="Card image cap">
                                                                            </div>
                                                                            <div class="card-tour-body d-flex justify-content-between align-items-center">
                                                                                <div class="number d-flex">
                                                                                    <h2 class="card-title">{{ $car->name_ar }}</h2>
                                                                    
                                                                                    <h5>( {{ $car->car_count }} )</h5> 
                                                                                </div>
                                                                                <div>
                                                                                    {{-- <img src="./assets/images/turkey.png" alt="turkey" class="icon-flag"> --}}
                                                                                </div>
                                                                            </div>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                        
                                                    @endif
                                                @endforeach
                                           
                                        @elseif(empty($CarCitiesSelector) && empty($CarSelector))
                                          
                                            <!-- Empty booking -->
                                            <div class="col-12 mb-5">
                                                <div class="card-empty d-md-flex align-items-center">
                                                    <div class="card-empty-txt">@lang('site.No Favourite')</div>
                                                    <div>
                                                        <img src="{{ FRONTASSETS }}/investor/empty-ic.svg" alt="empty icon" />
                                                    </div>
                                                </div>
                                            </div>
                                            @endif

                                </div>


                            </div>
                        </li>
                        <li id="tab-3" class="tab @if($activeTab === 'tab-3') tab-active @endif" style=" @if($activeTab != 'tab-3') display: none !important; @endif">
                            <div class="row"  id="tab-content-3"> 
                                <div class="col-12">

                                    
                                    <div id="removefav" class="card card-department round-border mb-4 p-md-3 p-2" style="border: none">
                                        <div class="row">
                         @if (!empty($PlaceCitiesSelector))
                                        @foreach ($PlaceCitiesSelector as $place)
                                            @if (!empty($place))
                                                        <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-1">
                                                            <div class="card-tour mb-3">
                                                                <a href="{{ route('favouritAqarsDetails', [ 'city_id' => $place->id ,'type' => 2]) }}">
                                                                    <div class="card-image-box">
                                                                        <img class="card-img"
                                                                            src="{{ $place->image }}"
                                                                            alt="Card image cap">
                                                                    </div>
                                                                    <div
                                                                        class="card-tour-body d-flex justify-content-between align-items-center">
                                                                        <div class="number d-flex">
                                                                            <h2 class="card-title">{{ $place->name_ar }}</h2>
                                                                            <h5 style="color:var(--m-main); margin-inline:5px;">( {{ $place->place_count }} )</h5>
                                                                        </div>
                                                                        <div>
                                                                            <!-- <img src="./assets/images/turkey.png" alt="turkey"
                                                                                class="icon-flag"> -->
                                                                        </div>
                                                                    </div>
                                                                </a>
                                                            </div>
                                                        </div>

                                                    
                                        @endif
                                        @endforeach
                                </div>
                            </div>
                                  
                        @elseif(empty($PlaceCitiesSelector) && !empty($PlaceSelector))

                                @foreach ($PlaceSelector as $place)
                                    @if (!empty($place))
                                                <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-1">
                                                    <div class="card-tour mb-3">
                                                        <a href="{{ route('favouriteCities', ['country_id' => $place->id ,'type' =>2]) }}">
                                                            <div class="card-image-box">
                                                                <img class="card-img" src="{{ $place->image }}" alt="Card image cap">
                                                            </div>
                                                            <div class="card-tour-body d-flex justify-content-between align-items-center">
                                                                <div class="number d-flex">
                                                                    <h2 class="card-title">{{ $place->name_ar }}</h2>
                                            
                                                                    <h5>( {{ $place->place_count }} )</h5>
                                                                </div>
                                                                <div>
                                                                    {{-- <img src="./assets/images/turkey.png" alt="turkey" class="icon-flag"> --}}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </div>
                                                </div>
                                    @endif
                                @endforeach
                        
                        @elseif((empty($PlaceCitiesSelector) && empty($PlaceSelector)))
                            <!--empty booking-->
                            <div class="col-12 mb-5">
                                <div class="card-empty d-md-flex align-items-center">
                                    <div class="card-empty-txt"> @lang('site.No Favourite') </div>
                                    <div>
                                        <img src="{{FRONTASSETS}}/investor/empty-ic.svg" alt="empty icon" />
                                    </div>
                                </div>
                            </div>

                            @endif
                            {{-- </div>
                        </div>
                   </div> --}}

            </li>

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

        </div>
    </section>
    <!-- /section -->
</main>

@endsection
@section('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Assuming $activeTab is set in your Blade template
    var activeTabId = '{{ $activeTab }}';
    var activeTabElement = document.getElementById(activeTabId);

    if (activeTabElement) {
        // Scroll the tab into view
        activeTabElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
        
        // Optionally, you can add additional logic to focus on the tab content area if needed
        var tabContentId = 'tab-' + activeTabId.substring(4); // Remove 'tab-' to get corresponding tab content id
        var tabContentElement = document.getElementById(tabContentId);
        if (tabContentElement) {
            tabContentElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }
});

</script>
<script>
jQuery(document).ready(function() {
    jQuery('.favouritess').click(function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        console.log("iddd", id);
        // console.log("iddd", id);
        jQuery.ajax({

            url: "{{ url('favouritPlace')}}" + '/' + id,
            method: 'GET',
            data: {
                '_token': '{{ csrf_token() }}',
            },
            success: function(result) {
                console.log("result.status");
                console.log(result);
                if (result.status == 'deleted') {
                    $(`#favouritess${id} i`).addClass('far').removeClass('fas');
                    // $('#removefav').hide();
                    // window.location.href = "#tab-3";
                    window.location.reload();
                    // $('#nofev').show();
                } else if (result.status == 'added') {
                    $(`#favouritess${id} i`).addClass('fas').removeClass('far');
                    // $('#nofev').hide();
                } else if (result.status == 'auth') {
                    swal({
                        title: "Warning!",
                        text: "{{ trans('site.register/ sign in first to be able to add to favorite') }}",
                        type: "warning",
                        confirmButtonText: "OK"
                    });
                    setInterval(function() {
                        Swal.close()
                    }, 2000)
                    window.location.href = '{{ route("sitelogin") }}';
                }
            },
            error: function(err) {
                console.log(err)
            }
        });
    });
});
</script>

<script>
jQuery(document).ready(function() {
    jQuery('.favouritess2').click(function(e) {
        e.preventDefault();

        var id = $(this).data('id');
        jQuery.ajax({
            url: 'favouritCar/' + id,
            method: 'GET',
            data: {
                '_token': '{{ csrf_token() }}',
            },
            success: function(result) {
                console.log("result.status");
                console.log(result);
                if (result.status == 'deleted') {
                    $(`#favouritess2${id} i`).addClass('far').removeClass('fas');
                    // $('#removefav2').hide();
                    // window.location.href = "#tab-2";
                    window.location.reload();

                } else if (result.status == 'added') {
                    $(`#favouritess2${id} i`).addClass('fas').removeClass('far');

                } else if (result.status == 'auth') {
                    swal({
                        title: "Warning!",
                        text: "{{ trans('site.register/ sign in first to be able to add to favorite') }}",
                        type: "warning",
                        confirmButtonText: "OK"
                    });
                    setInterval(function() {
                        Swal.close()
                    }, 2000)
                    window.location.href = '{{ route("sitelogin") }}';
                }
            },
            error: function(err) {
                console.log(err)
            }
        });
    });
});
</script>

<script>
jQuery(document).ready(function() {
    jQuery('.favouritess3').click(function(e) {
        e.preventDefault();

        var id = $(this).data('id');
        jQuery.ajax({
            url: 'favouritAqar/' + id,
            method: 'GET',
            data: {
                '_token': '{{ csrf_token() }}',
            },
            success: function(result) {
                console.log(result.status);
                if (result.status == 'deleted') {
                    $(`#favouritess3${id} i`).addClass('far').removeClass('fas');
                    $('#removefav').hide();
                    window.location.href = "#tab-3";
                    window.location.reload();
                    // $('#nofev').show();
                } else if (result.status == 'added') {
                    $(`#favouritess3${id} i`).addClass('fas').removeClass('far');
                    // $('#nofev').hide();

                } else if (result.status == 'auth') {
                    swal({
                        title: "Warning!",
                        text: "{{ trans('site.register/ sign in first to be able to add to favorite') }}",
                        type: "warning",
                        confirmButtonText: "OK"
                    });

                    setTimeout(function() {
                        Swal.close()
                    }, 2000)

                    window.location.href = '{{route("sitelogin")}}';
                }

            },
            error: function(err) {
                console.log(err)
            }
        });
    });
});
</script>
@endsection