@extends('front.layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('front/assets/css/store.css') }}">
    <style>
        .favorite-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.9);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .favorite-btn:hover {
            background: white;
            color: #ff6b35;
        }

        .product-info {
            padding: 15px;
        }

        .product-price {
            font-size: 18px;
            font-weight: bold;
            color: #ff6b35;
            margin-bottom: 5px;
        }

        .product-price span {
            font-size: 20px;
        }

        .product-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .product-location {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #666;
            font-size: 12px;
            margin-bottom: 15px;
        }

        .location-icon {
            color: #ff6b35;
        }

        .call-btn {
            background: linear-gradient(135deg, #ff6b35, #ff8c42);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
            transition: all 0.2s ease;
        }

        .call-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
        }

        /* الـ Modal الأساسي */
        .contact-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            position: relative;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        /* الـ Header */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .modal-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #ff6b35;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            background-color: #f0f0f0;
            border-radius: 50%;
        }

        /* معلومات الاتصال */
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            border-radius: 10px;
            background-color: #ffff;
            border: 1px solid #ddd;
        }

        .contact-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .contact-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .whatsapp-icon {
            background-color: #25d366;
            color: white;
        }

        .phone-icon {
            background-color: #ff6b35;
            color: white;
        }

        .contact-number {
            font-size: 16px;
            color: #333;
            font-weight: 500;
        }

        .copy-btn {
            background: none;
            border: 1px solid #ddd;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }

        .copy-btn:hover {
            background-color: #f0f0f0;
        }

        /* أزرار العمل في المودال */
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 30px;
        }

        .action-btn {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .whatsapp-btn {
            background-color: #25d366;
            color: white;
        }

        .phone-btn {
            background-color: #ff6b35;
            color: white;
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* الرسالة المؤقتة */
        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #28a745;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            display: none;
            z-index: 1001;
        }

        /* Slick carousel styles */
        .slick-dots {
            bottom: 10px;
        }

        .slick-dots li button:before {
            color: white;
            font-size: 8px;
        }

        .slick-dots li.slick-active button:before {
            color: #ff6b35;
        }
    </style>
@endpush
@section('content')
    <div class="container" style="margin-top: 50px;">
        <div class="mab_bac">
            <div class="icons-container">
                <svg class="icon phone-icon" viewBox="0 0 24 24"
                    onclick="openContactModal({{ $store->phone }},{{ $store->whatsapp }})">
                    <path
                        d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" />
                </svg>

                <svg class="icon share-icon" viewBox="0 0 24 24"
                    onclick="share_news('{{ route('site.store.user', ['id' => $store->id]) }}')">
                    <circle cx="18" cy="5" r="3" />
                    <circle cx="6" cy="12" r="3" />
                    <circle cx="18" cy="19" r="3" />
                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
                    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
                </svg>

                <svg class="icon heart-icon" viewBox="0 0 24 24"
                    onclick="addOrRemoveFromStoreFavorite({{ $store->id }}, this)"
                    @if (auth('end-user')->check() && auth('end-user')->user()->favoritesStores->contains($store->id)) style="fill: red;"
                    @else
                    style="fill: none;" 
                    @endif>
                    <path
                        d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
                </svg>

            </div>

            <div class="header_main">
                <div class="profile-section">
                    <div class="profile-pic">
                        <img src="{{ 'https://images.bkamthis.com/' . $store->logo }}" alt="Profile"
                            style="width: 76px; height: 76px;">
                    </div>
                    <div class="profile-info">
                        <h3>{{ $store->name }}</h3>
                        <p>{{ $store->description }}</p>
                        <div class="rating">
                            <span>{{ $store->country?->name }} - {{ $store->city?->name }}</span>
                            {{-- <span>5.0 (366)</span> --}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="content">
                <div class="categories">
                    <div class="main_detels">
                        <div class="menu-icon">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="category-tabs scrollbar-hide">
                            @foreach ($brands as $brand)
                                <a href="{{ route('site.store.user', ['id' => $store->id, 'brand_id' => $brand->id]) }}"><span
                                        class="category-tab">{{ $brand->name }}</span></a>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="product-grid">
                    <!-- Product Card 1 -->
                    @forelse ($ads as $ad)
                        <div class="product-card">
                            <div class="product-image">
                                <div class="product-slider">
                                    <div style="position: relative;">
                                        <img src="https://images.bkamthis.com/{{ $ad->images->first()->filename }}"
                                            alt="Product" style="width:100%; height:auto;">
                                        <i class="far fa-heart favorite-btn"></i>
                                    </div>

                                </div>
                            </div>
                            <div class="product-info">
                                <div class="product-price"><span>{{ $ad->price }}</span> {{ $ad->currency }}</div>
                                <div class="product-title"><a href="{{ route('site.show_detiles_ad', ['id' => $ad->id]) }}">{{ $ad->title }}</a></div>
                                <div class="product-location">
                                    <i class="fas fa-location-dot location-icon"></i> {{ $ad->city->name }} .
                                    {{ $ad->region->name }}
                                </div>
                                <button class="call-btn"
                                    onclick="openContactModal({{ $store->phone }},{{ $store->whatsapp }})">Call</button>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 ">
                            <div class="alert alert-danger">
                                No ads found
                            </div>
                        </div>
                    @endforelse


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

    <!-- Contact Modal -->
    <div id="contactModal" class="contact-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Contact Information</h2>
                <button class="close-btn" onclick="closeContactModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="contact-info">
                <!-- Phone -->
                <div class="contact-item">
                    <div class="contact-left">
                        <div class="contact-icon">
                            <img src="{{ asset('front/assets/img/Group.svg') }}" alt="">
                        </div>
                        <span id="phone-number" class="contact-number"></span>
                    </div>
                    <button class="copy-btn" id="copy-phone-btn">
                        <img src="{{ asset('front/assets/img/solar_copy-linear.svg') }}" alt="">
                    </button>
                </div>

                <!-- WhatsApp -->
                <div class="contact-item">
                    <div class="contact-left">
                        <div class="contact-icon">
                            <img src="{{ asset('front/assets/img/top.svg') }}" alt="">
                        </div>
                        <span id="whatsapp-number" class="contact-number"></span>
                    </div>
                    <button class="copy-btn" id="copy-whatsapp-btn">
                        <img src="{{ asset('front/assets/img/solar_copy-linear.svg') }}" alt="">
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!-- Toast Message -->
    <div id="toast" class="toast">
        تم نسخ الرقم بنجاح!
    </div>
@endsection
@push('js')
    <script>
        document.querySelectorAll('.category-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });

        document.querySelectorAll('.favorite-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                if (this.classList.contains('fas')) {
                    this.classList.remove('fas');
                    this.classList.add('far');
                    this.style.color = '';
                } else {
                    this.classList.remove('far');
                    this.classList.add('fas');
                    this.style.color = '#ff6b35';
                }
            });
        });

        function openContactModal(phone, whatsapp) {
            // Set phone & whatsapp values
            document.getElementById('phone-number').textContent = phone;
            document.getElementById('whatsapp-number').textContent = whatsapp;

            // Update copy buttons
            document.getElementById('copy-phone-btn').onclick = () => copyToClipboard(phone);
            document.getElementById('copy-whatsapp-btn').onclick = () => copyToClipboard(whatsapp);

            // Show modal
            document.getElementById('contactModal').style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        function closeContactModal() {
            document.getElementById('contactModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        document.getElementById('contactModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeContactModal();
            }
        });

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(showToast).catch(function() {
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                showToast();
            });
        }

        function showToast() {
            const toast = document.getElementById('toast');
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 2000);
        }

        function openWhatsApp(number) {
            const message = 'مرحبا، أريد التواصل معكم';
            const whatsappUrl = `https://wa.me/${number}?text=${encodeURIComponent(message)}`;
            window.open(whatsappUrl, '_blank');
        }

        function makeCall(number) {
            window.location.href = `tel:${number}`;
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeContactModal();
            }
        });
    </script>
    <script>
        function share_news(route) {
            if (navigator.share) {
                navigator
                    .share({
                        title: document.title,
                        text: 'Check out this news!',
                        // TODO: Add object id here
                        url: route,
                    })
                    .then(() => {
                        console.log('Thanks for sharing!');
                    })
                    .catch(console.error);
            }
        }

        function addOrRemoveFromStoreFavorite(id, el) {
            const url = "{{ route('site.store.add-remove-favorite', ['id' => ':id']) }}".replace(':id', id);

            $.ajax({
                url: url,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    // Example: your backend should return {status: "added"} or {status: "removed"}
                    if (response.status == 'added') {
                        $(el).css('fill', 'red'); // highlight heart
                        Swal.fire({
                            icon: 'success',
                            title: '{{ __('Success') }}',
                            text: '{{ __('Added to favorites successfully.') }}'
                        });
                    } else if (response.status == 'removed') {
                        $(el).css('fill', 'none'); // reset to unfilled
                        Swal.fire({
                            icon: 'success',
                            title: '{{ __('Success') }}',
                            text: '{{ __('Removed from favorites successfully.') }}'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error adding/removing favorite:', error);
                    Swal.fire({
                        icon: 'error',
                        title: '{{ __('Error') }}',
                        text: '{{ __('Failed to update favorites. Please try again.') }}'
                    });
                }
            });
        }
    </script>
@endpush