

<?php $__env->startSection('title', 'مدیریت مکان‌ها'); ?>

<?php $__env->startSection('styles'); ?>
<style>
    /* Modern Locations Page Styles */
    .locations-container {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        padding: 2rem 0;
    }

    .page-header {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        z-index: 1;
    }

    .page-header-content {
        position: relative;
        z-index: 2;
        color: white;
        margin-top: 20px;
    }

    .page-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .page-subtitle {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-bottom: 2rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #667eea, #764ba2);
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: 0 auto 1rem;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 0.5rem;
    }

    .stat-label {
        color: #718096;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .filters-section {
        background: white;
        border-radius: 16px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .filters-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f1f5f9;
    }

    .filters-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2d3748;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .filters-title-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    .filter-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .filter-item {
        position: relative;
    }

    .filter-label {
        display: block;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }

    .filter-input {
        width: 100%;
        padding: 0.875rem 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: #f9fafb;
    }

    .filter-input:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .filter-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: left 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-left: 3rem;
    }

    .search-container {
        position: relative;
        grid-column: 1 / -1;
    }

    .search-input {
        padding-left: 3rem;
    }

    .search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 1.25rem;
    }

    .filter-actions {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 1rem;
    }

    .modern-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 0.875rem 2rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    .modern-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        color: white;
        text-decoration: none;
    }

    .modern-btn-secondary {
        background: #6b7280;
    }

    .modern-btn-secondary:hover {
        background: #4b5563;
        box-shadow: 0 8px 25px rgba(107, 114, 128, 0.3);
    }

    .modern-btn-outline {
        background: transparent;
        color: #667eea;
        border: 2px solid #667eea;
    }

    .modern-btn-outline:hover {
        background: #667eea;
        color: white;
    }

    .locations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .location-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        position: relative;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .location-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    }

    .location-image {
        position: relative;
        height: 220px;
        overflow: hidden;
    }

    .location-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .location-card:hover .location-image img {
        transform: scale(1.05);
    }

    .location-image-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 3rem;
    }

    .location-status {
        position: absolute;
        top: 1rem;
        right: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-size: 0.75rem;
        font-weight: 600;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .status-approved {
        background: rgba(16, 185, 129, 0.9);
        color: white;
    }

    .status-pending {
        background: rgba(245, 158, 11, 0.9);
        color: white;
    }

    .status-rejected {
        background: rgba(239, 68, 68, 0.9);
        color: white;
    }

    .location-content {
        padding: 1.5rem;
    }

    .location-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .location-meta {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .location-meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #718096;
        font-size: 0.875rem;
    }

    .location-meta-icon {
        width: 16px;
        height: 16px;
        color: #667eea;
    }

    .location-description {
        color: #4a5568;
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .location-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-top: 1px solid #f1f5f9;
        margin-bottom: 1rem;
    }

    .location-stat {
        text-align: center;
        flex: 1;
    }

    .location-stat-number {
        font-size: 1.25rem;
        font-weight: 700;
        color: #667eea;
        display: block;
    }

    .location-stat-label {
        font-size: 0.75rem;
        color: #718096;
        margin-top: 0.25rem;
    }

    .location-actions {
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
    }

    .action-btn {
        flex: 1;
        padding: 0.75rem;
        border: none;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    .action-btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
    }

    .action-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        color: white;
        text-decoration: none;
    }

    .action-btn-secondary {
        background: #f8fafc;
        color: #4a5568;
        border: 1px solid #e2e8f0;
    }

    .action-btn-secondary:hover {
        background: #edf2f7;
        color: #2d3748;
        text-decoration: none;
    }

    .action-btn-danger {
        background: #fed7d7;
        color: #c53030;
        border: 1px solid #feb2b2;
    }

    .action-btn-danger:hover {
        background: #fc8181;
        color: white;
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .empty-state-icon {
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        margin: 0 auto 2rem;
    }

    .empty-state-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 1rem;
    }

    .empty-state-description {
        color: #718096;
        font-size: 1rem;
        margin-bottom: 2rem;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 3rem;
    }

    .loading-spinner {
        display: none;
        text-align: center;
        padding: 2rem;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f4f6;
        border-top: 4px solid #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 0 auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .locations-container {
            padding: 1rem 0;
        }

        .page-header {
            margin: 1rem;
            padding: 1.5rem;
        }

        .page-title {
            font-size: 2rem;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .filter-group {
            grid-template-columns: 1fr;
        }

        .locations-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .filter-actions {
            flex-direction: column;
        }

        .location-actions {
            flex-direction: column;
        }
    }

    /* Animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .location-card {
        animation: fadeInUp 0.6s ease forwards;
    }

    .location-card:nth-child(1) { animation-delay: 0.1s; }
    .location-card:nth-child(2) { animation-delay: 0.2s; }
    .location-card:nth-child(3) { animation-delay: 0.3s; }
    .location-card:nth-child(4) { animation-delay: 0.4s; }
    .location-card:nth-child(5) { animation-delay: 0.5s; }
    .location-card:nth-child(6) { animation-delay: 0.6s; }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="locations-container">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="page-header">
            <div class="page-header-content">
                <h1 class="page-title">مدیریت مکان‌ها</h1>
                <p class="page-subtitle">مدیریت و نظارت بر مکان‌های ثبت شده توسط شما</p>

                <div class="d-flex justify-content-end">
                    <a href="<?php echo e(route('user.locations.create')); ?>" class="modern-btn">
                        <i class="fas fa-plus"></i>
                        افزودن مکان جدید
                    </a>
                </div>
            </div>

            <!-- Statistics Grid -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="stat-number"><?php echo e($stats['total']); ?></div>
                    <div class="stat-label">کل مکان‌ها</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-number"><?php echo e($stats['approved']); ?></div>
                    <div class="stat-label">تایید شده</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-number"><?php echo e($stats['pending']); ?></div>
                    <div class="stat-label">در انتظار تایید</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div class="stat-number"><?php echo e(number_format($stats['total_views'])); ?></div>
                    <div class="stat-label">کل بازدیدها</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-number"><?php echo e($stats['total_ratings']); ?></div>
                    <div class="stat-label">کل نظرات</div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-number"><?php echo e($stats['avg_rating']); ?></div>
                    <div class="stat-label">میانگین امتیاز</div>
                </div>
            </div>
        </div>

        <!-- Filters Section -->
        <div class="filters-section">
            <div class="filters-header">
                <div class="filters-title">
                    <div class="filters-title-icon">
                        <i class="fas fa-filter"></i>
                    </div>
                    فیلتر و جستجو
                </div>

                <button type="button" class="modern-btn-outline" onclick="clearFilters()">
                    <i class="fas fa-times"></i>
                    پاک کردن فیلترها
                </button>
            </div>

            <form method="GET" action="<?php echo e(route('user.locations.index')); ?>" id="filtersForm">
                <div class="filter-group">
                    <div class="search-container">
                        <div class="filter-item">
                            <label class="filter-label">جستجو در عنوان، توضیحات و آدرس</label>
                            <input type="text"
                                   name="search"
                                   value="<?php echo e($search); ?>"
                                   class="filter-input search-input"
                                   placeholder="جستجو کنید...">
                            <i class="fas fa-search search-icon"></i>
                        </div>
                    </div>

                    <div class="filter-item">
                        <label class="filter-label">وضعیت</label>
                        <select name="status" class="filter-input filter-select">
                            <option value="all" <?php echo e($status == 'all' ? 'selected' : ''); ?>>همه وضعیت‌ها</option>
                            <option value="approved" <?php echo e($status == 'approved' ? 'selected' : ''); ?>>تایید شده</option>
                            <option value="pending" <?php echo e($status == 'pending' ? 'selected' : ''); ?>>در انتظار تایید</option>
                            <option value="rejected" <?php echo e($status == 'rejected' ? 'selected' : ''); ?>>رد شده</option>
                        </select>
                    </div>

                    <div class="filter-item">
                        <label class="filter-label">دسته‌بندی</label>
                        <select name="category" class="filter-input filter-select">
                            <option value="">همه دسته‌ها</option>
                            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($cat->id); ?>" <?php echo e($category == $cat->id ? 'selected' : ''); ?>>
                                <?php echo e($cat->category_fa); ?>

                            </option>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>

                    <div class="filter-item">
                        <label class="filter-label">مرتب‌سازی</label>
                        <select name="sort" class="filter-input filter-select">
                            <option value="newest" <?php echo e($sort == 'newest' ? 'selected' : ''); ?>>جدیدترین</option>
                            <option value="oldest" <?php echo e($sort == 'oldest' ? 'selected' : ''); ?>>قدیمی‌ترین</option>
                            <option value="title" <?php echo e($sort == 'title' ? 'selected' : ''); ?>>بر اساس عنوان</option>
                            <option value="status" <?php echo e($sort == 'status' ? 'selected' : ''); ?>>بر اساس وضعیت</option>
                            <option value="rating" <?php echo e($sort == 'rating' ? 'selected' : ''); ?>>بر اساس امتیاز</option>
                        </select>
                    </div>
                </div>

                <div class="filter-actions">
                    <button type="submit" class="modern-btn">
                        <i class="fas fa-search"></i>
                        اعمال فیلتر
                    </button>
                </div>
            </form>
        </div>

        <!-- Success/Error Messages -->
        <?php if(session('success')): ?>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            <?php echo e(session('success')); ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <?php if(session('error')): ?>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <?php echo e(session('error')); ?>

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>

        <!-- Locations Grid -->
        <?php if($locations->isEmpty()): ?>
        <div class="empty-state">
            <div class="empty-state-icon">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            <h2 class="empty-state-title">هنوز مکانی ثبت نکرده‌اید</h2>
            <p class="empty-state-description">
                برای شروع، اولین مکان خود را ثبت کنید و با جامعه کاربران به اشتراک بگذارید
            </p>
            <a href="<?php echo e(route('user.locations.create')); ?>" class="modern-btn">
                <i class="fas fa-plus"></i>
                ثبت اولین مکان
            </a>
        </div>
        <?php else: ?>
        <div class="locations-grid" id="locationsGrid">
            <?php $__currentLoopData = $locations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $location): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="location-card">
                <!-- Location Image -->
                <div class="location-image">
                    <?php
                        $images = [];
                        if ($location->images && $location->images->count() > 0) {
                            $images = $location->images->pluck('image')->toArray();
                        } elseif (is_string($location->images)) {
                            $images = json_decode($location->images, true) ?? [];
                        } elseif (is_array($location->images)) {
                            $images = $location->images;
                        }
                    ?>

                    <?php if(count($images) > 0): ?>
                        <img src="<?php echo e(asset('storage/locations/' . $images[0])); ?>" alt="<?php echo e($location->title); ?>">
                    <?php else: ?>
                        <div class="location-image-placeholder">
                            <i class="fas fa-image"></i>
                        </div>
                    <?php endif; ?>

                    <!-- Status Badge -->
                    <div class="location-status status-<?php echo e($location->is_active == 1 ? 'approved' : ($location->is_active == -1 ? 'rejected' : 'pending')); ?>">
                        <?php if($location->is_active == 1): ?>
                            <i class="fas fa-check"></i> تایید شده
                        <?php elseif($location->is_active == -1): ?>
                            <i class="fas fa-times"></i> رد شده
                        <?php else: ?>
                            <i class="fas fa-clock"></i> در انتظار تایید
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Location Content -->
                <div class="location-content">
                    <h3 class="location-title"><?php echo e($location->title); ?></h3>

                    <div class="location-meta">
                        <div class="location-meta-item">
                            <i class="fas fa-map-marker-alt location-meta-icon"></i>
                            <span>
                                <?php echo e($location->province ? $location->province->name_fa : ''); ?>

                                <?php if($location->city): ?>
                                    - <?php echo e($location->city->name_fa); ?>

                                <?php endif; ?>
                            </span>
                        </div>

                        <div class="location-meta-item">
                            <i class="fas fa-tag location-meta-icon"></i>
                            <span><?php echo e($location->categoryRelation ? $location->categoryRelation->category_fa : 'دسته‌بندی نامشخص'); ?></span>
                        </div>

                        <div class="location-meta-item">
                            <i class="fas fa-calendar location-meta-icon"></i>
                            <span><?php echo e($location->created_at ? \App\Helpers\DateHelper::formatByLocale($location->created_at) : 'نامشخص'); ?></span>
                        </div>
                    </div>

                    <?php if($location->description): ?>
                    <p class="location-description"><?php echo e($location->description); ?></p>
                    <?php endif; ?>

                    <!-- Location Stats -->
                    <div class="location-stats">
                        <div class="location-stat">
                            <span class="location-stat-number"><?php echo e($location->ratings_count ?? 0); ?></span>
                            <span class="location-stat-label">نظر</span>
                        </div>
                        <div class="location-stat">
                            <span class="location-stat-number"><?php echo e(number_format($location->views_count ?? 0)); ?></span>
                            <span class="location-stat-label">بازدید</span>
                        </div>
                        <div class="location-stat">
                            <span class="location-stat-number"><?php echo e(number_format($location->ratings_avg_rating ?? 0, 1)); ?></span>
                            <span class="location-stat-label">امتیاز</span>
                        </div>
                    </div>

                    <!-- Location Actions -->
                    <div class="location-actions">
                        <a href="<?php echo e(route('user.locations.show', $location->id)); ?>" class="action-btn action-btn-primary">
                            <i class="fas fa-eye"></i>
                            مشاهده
                        </a>

                        <?php if($location->is_active == 0): ?>
                        <a href="<?php echo e(route('user.locations.edit', $location->id)); ?>" class="action-btn action-btn-secondary">
                            <i class="fas fa-edit"></i>
                            ویرایش
                        </a>
                        <?php endif; ?>

                        <?php if($location->is_active == 0): ?>
                        <form action="<?php echo e(route('user.locations.destroy', $location->id)); ?>" method="POST" class="d-inline" onsubmit="return confirmDelete(event, '<?php echo e($location->title); ?>')">
                            <?php echo csrf_field(); ?>
                            <?php echo method_field('DELETE'); ?>
                            <button type="submit" class="action-btn action-btn-danger">
                                <i class="fas fa-trash"></i>
                                حذف
                            </button>
                        </form>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <!-- Loading Spinner -->
        <div class="loading-spinner" id="loadingSpinner">
            <div class="spinner"></div>
            <p class="mt-2">در حال بارگذاری...</p>
        </div>

        <!-- Pagination -->
        <div class="pagination-container">
            <?php echo e($locations->appends(request()->query())->links()); ?>

        </div>
        <?php endif; ?>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Modern Locations Manager
    class ModernLocationsManager {
        constructor() {
            this.init();
        }

        init() {
            this.initializeFilters();
            this.initializeSearch();
            this.initializeAnimations();
            this.initializeInfiniteScroll();
            this.initializeStatCounters();
        }

        // Initialize Filters
        initializeFilters() {
            const form = document.getElementById('filtersForm');
            const inputs = form.querySelectorAll('select, input');

            // Auto-submit on filter change
            inputs.forEach(input => {
                if (input.type !== 'text') {
                    input.addEventListener('change', () => {
                        this.submitFilters();
                    });
                }
            });

            // Search input with debounce
            const searchInput = form.querySelector('input[name="search"]');
            if (searchInput) {
                let searchTimeout;
                searchInput.addEventListener('input', () => {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        this.submitFilters();
                    }, 500);
                });
            }
        }

        // Submit Filters
        submitFilters() {
            const form = document.getElementById('filtersForm');
            const formData = new FormData(form);
            const params = new URLSearchParams();

            for (let [key, value] of formData.entries()) {
                if (value) {
                    params.append(key, value);
                }
            }

            // Show loading
            this.showLoading();

            // Update URL and reload
            const newUrl = window.location.pathname + '?' + params.toString();
            window.location.href = newUrl;
        }

        // Clear Filters
        clearFilters() {
            const form = document.getElementById('filtersForm');
            form.reset();
            window.location.href = window.location.pathname;
        }

        // Initialize Search
        initializeSearch() {
            const searchInput = document.querySelector('input[name="search"]');
            if (searchInput) {
                searchInput.addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        this.submitFilters();
                    }
                });
            }
        }

        // Initialize Animations
        initializeAnimations() {
            // Animate stats on scroll
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        this.animateNumber(entry.target);
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.stat-number, .location-stat-number').forEach(el => {
                observer.observe(el);
            });

            // Hover effects for cards
            document.querySelectorAll('.location-card, .stat-card').forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.transform = 'translateY(-8px)';
                });

                card.addEventListener('mouseleave', () => {
                    card.style.transform = 'translateY(0)';
                });
            });
        }

        // Initialize Infinite Scroll
        initializeInfiniteScroll() {
            const nextPageUrl = document.querySelector('.pagination .page-link[rel="next"]')?.href;
            if (!nextPageUrl) return;

            let loading = false;

            window.addEventListener('scroll', () => {
                if (loading) return;

                const scrollTop = window.pageYOffset;
                const windowHeight = window.innerHeight;
                const documentHeight = document.documentElement.scrollHeight;

                if (scrollTop + windowHeight >= documentHeight - 1000) {
                    this.loadMoreLocations();
                    loading = true;
                }
            });
        }

        // Load More Locations
        async loadMoreLocations() {
            const nextPageUrl = document.querySelector('.pagination .page-link[rel="next"]')?.href;
            if (!nextPageUrl) return;

            this.showLoading();

            try {
                const response = await fetch(nextPageUrl, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                const data = await response.json();

                if (data.html) {
                    const grid = document.getElementById('locationsGrid');
                    grid.insertAdjacentHTML('beforeend', data.html);

                    // Update pagination
                    if (data.nextPageUrl) {
                        document.querySelector('.pagination .page-link[rel="next"]').href = data.nextPageUrl;
                    } else {
                        document.querySelector('.pagination .page-link[rel="next"]')?.remove();
                    }

                    // Re-initialize animations for new cards
                    this.initializeAnimations();
                }
            } catch (error) {
                console.error('Error loading more locations:', error);
                this.showNotification('خطا در بارگذاری مکان‌ها', 'error');
            } finally {
                this.hideLoading();
            }
        }

        // Initialize Stat Counters
        initializeStatCounters() {
            document.querySelectorAll('.stat-number').forEach(el => {
                const finalNumber = parseInt(el.textContent.replace(/[^\d]/g, ''));
                if (finalNumber > 0) {
                    el.textContent = '0';
                    el.dataset.target = finalNumber;
                }
            });
        }

        // Animate Number
        animateNumber(element) {
            const target = parseInt(element.dataset.target || element.textContent.replace(/[^\d]/g, ''));
            if (target === 0) return;

            const duration = 2000;
            const increment = target / (duration / 16);
            let current = 0;

            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    current = target;
                    clearInterval(timer);
                }

                element.textContent = Math.floor(current).toLocaleString('fa-IR');
            }, 16);
        }

        // Show Loading
        showLoading() {
            const spinner = document.getElementById('loadingSpinner');
            if (spinner) {
                spinner.style.display = 'block';
            }
        }

        // Hide Loading
        hideLoading() {
            const spinner = document.getElementById('loadingSpinner');
            if (spinner) {
                spinner.style.display = 'none';
            }
        }

        // Show Notification
        showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.innerHTML = `
                <div class="notification-content">
                    <i class="fas fa-${this.getNotificationIcon(type)}"></i>
                    <span>${message}</span>
                </div>
                <button class="notification-close" onclick="this.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            `;

            document.body.appendChild(notification);

            setTimeout(() => {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, 5000);
        }

        getNotificationIcon(type) {
            switch (type) {
                case 'success': return 'check-circle';
                case 'error': return 'exclamation-circle';
                case 'warning': return 'exclamation-triangle';
                default: return 'info-circle';
            }
        }
    }

    // Initialize Locations Manager
    const locationsManager = new ModernLocationsManager();

    // Global Functions
    window.clearFilters = function() {
        locationsManager.clearFilters();
    };

    window.confirmDelete = function(event, locationTitle) {
        event.preventDefault();

        if (confirm(`آیا از حذف مکان "${locationTitle}" اطمینان دارید؟\n\nاین عمل قابل بازگشت نیست.`)) {
            event.target.submit();
        }

        return false;
    };
});
</script>

<!-- Notification Styles -->
<style>
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10000;
    min-width: 300px;
    animation: slideInRight 0.3s ease;
}

.notification-success {
    border-left: 4px solid #10b981;
}

.notification-error {
    border-left: 4px solid #ef4444;
}

.notification-warning {
    border-left: 4px solid #f59e0b;
}

.notification-info {
    border-left: 4px solid #3b82f6;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.notification-content i {
    font-size: 1.25rem;
}

.notification-success .notification-content i {
    color: #10b981;
}

.notification-error .notification-content i {
    color: #ef4444;
}

.notification-warning .notification-content i {
    color: #f59e0b;
}

.notification-info .notification-content i {
    color: #3b82f6;
}

.notification-close {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.notification-close:hover {
    background: #f3f4f6;
    color: #374151;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
</style>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.user', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/aluirani/public_html/aludubai.ir/resources/views/user/locations/index.blade.php ENDPATH**/ ?>