@extends('layouts.admin')

@section('title', 'Mall Stores - ' . $mall->name)

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">{{ $mall->name }} - Store Management</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url('/admin') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.malls.index') }}">Malls</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.malls.show', $mall) }}">{{ $mall->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Stores</li>
            </ol>
        </nav>
    </div>
    <div>
        <a href="{{ route('admin.malls.stores.create', $mall) }}" class="btn btn-primary">
            <i class="bi bi-plus me-1"></i>
            Add New Store
        </a>
        <a href="{{ route('admin.malls.show', $mall) }}" class="btn btn-outline-secondary ms-2">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Mall
        </a>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Stores</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-shop fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Operational</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['operational'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-check-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Coming Soon</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['coming_soon'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-clock fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Area</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">
                            @if($stats['total'] > 0)
                                {{ number_format($stats['total_area'] ?? 0) }} sq ft
                            @else
                                0 stores
                            @endif
                        </div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-arrows-angle-expand fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search and Filter -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Search & Filter Stores</h6>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.malls.stores', $mall) }}" class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search Stores</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Store name, number, unit...">
            </div>
            <div class="col-md-2">
                <label for="floor" class="form-label">Floor</label>
                <select class="form-select" id="floor" name="floor">
                    <option value="">All Floors</option>
                    @foreach($floors as $floor)
                        <option value="{{ $floor }}" {{ request('floor') == $floor ? 'selected' : '' }}>
                            Floor {{ $floor }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label for="category" class="form-label">Category</label>
                <select class="form-select" id="category" name="category">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category }}" {{ request('category') == $category ? 'selected' : '' }}>
                            {{ ucfirst(str_replace('_', ' ', $category)) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">All Status</option>
                    <option value="operational" {{ request('status') == 'operational' ? 'selected' : '' }}>Operational</option>
                    <option value="coming_soon" {{ request('status') == 'coming_soon' ? 'selected' : '' }}>Coming Soon</option>
                    <option value="temporarily_closed" {{ request('status') == 'temporarily_closed' ? 'selected' : '' }}>Temporarily Closed</option>
                    <option value="permanently_closed" {{ request('status') == 'permanently_closed' ? 'selected' : '' }}>Permanently Closed</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-search"></i> Search
                </button>
                <a href="{{ route('admin.malls.stores', $mall) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-clockwise"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Stores Table -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Stores</h6>
    </div>
    <div class="card-body">
        @if($stores->count() > 0)
        <div class="table-responsive">
            <table class="table table-bordered" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Photo</th>
                        <th>Store Info</th>
                        <th>Location</th>
                        <th>Details</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($stores as $store)
                    <tr>
                        <td>
                            <div class="store-photo-container" data-store-name="{{ $store->store_name ?: 'Unit ' . $store->unit_number }}">
                                @if($store->logo_image)
                                    <img src="{{ asset('storage/' . $store->logo_image) }}" 
                                         alt="{{ $store->store_name }}" 
                                         class="store-photo">
                                @elseif($store->cover_image)
                                    <img src="{{ asset('storage/' . $store->cover_image) }}" 
                                         alt="{{ $store->store_name }}" 
                                         class="store-photo">
                                @elseif($store->store_images && count($store->store_images) > 0)
                                    <img src="{{ asset('storage/' . $store->store_images[0]) }}" 
                                         alt="{{ $store->store_name }}" 
                                         class="store-photo">
                                @else
                                    <div class="store-photo-placeholder">
                                        <i class="bi bi-shop text-muted"></i>
                                    </div>
                                @endif
                            </div>
                        </td>
                        <td>
                            <div class="font-weight-bold">{{ $store->store_name ?: 'Unit ' . $store->unit_number }}</div>
                            <small class="text-muted">{{ $store->store_number ?: 'N/A' }}</small>
                            @if($store->tenantBusiness)
                                <br><small class="text-primary">{{ $store->tenantBusiness->name }}</small>
                            @endif
                        </td>
                        <td>
                            <div>Floor {{ $store->floor_number }}</div>
                            <small class="text-muted">Unit {{ $store->unit_number }}</small>
                        </td>
                        <td>
                            <div>{{ $store->store_area_sqft ? number_format($store->store_area_sqft) . ' sq ft' : 'N/A' }}</div>
                            <small class="text-muted">{{ ucfirst(str_replace('_', ' ', $store->store_category)) }}</small>
                        </td>
                        <td>
                            @php
                                $statusColors = [
                                    'operational' => 'success',
                                    'coming_soon' => 'warning',
                                    'temporarily_closed' => 'danger',
                                    'permanently_closed' => 'secondary'
                                ];
                                $statusColor = $statusColors[$store->occupancy_status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusColor }}">{{ ucfirst(str_replace('_', ' ', $store->occupancy_status)) }}</span>
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('admin.malls.stores.edit', [$mall, $store]) }}" class="btn btn-outline-primary">
                                    <i class="bi bi-pencil"></i>
                                    Edit
                                </a>
                                <button type="button" class="btn btn-outline-danger" onclick="deleteStore({{ $store->id }})">
                                    <i class="bi bi-trash"></i>
                                    Delete
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="d-flex justify-content-center">
            {{ $stores->links() }}
        </div>
        @else
        <div class="text-center py-4">
            <i class="bi bi-shop" style="font-size: 48px; color: #e0e0e0;"></i>
            <h5 class="mt-3">No Stores Found</h5>
            <p class="text-muted">There are no stores in this mall yet.</p>
            <a href="{{ route('admin.malls.stores.create', $mall) }}" class="btn btn-primary">
                <i class="bi bi-plus"></i> Add Your First Store
            </a>
        </div>
        @endif
    </div>
</div>

<!-- Add Store Modal -->
<div class="modal fade" id="addStoreModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Store</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.malls.stores.store', $mall) }}">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="store_name" class="form-label">Store Name</label>
                            <input type="text" class="form-control" id="store_name" name="store_name">
                        </div>
                        <div class="col-md-6">
                            <label for="store_number" class="form-label">Store Number</label>
                            <input type="text" class="form-control" id="store_number" name="store_number">
                        </div>
                        <div class="col-md-4">
                            <label for="floor_number" class="form-label">Floor Number *</label>
                            <input type="number" class="form-control" id="floor_number" name="floor_number" min="1" required>
                        </div>
                        <div class="col-md-4">
                            <label for="unit_number" class="form-label">Unit Number *</label>
                            <input type="text" class="form-control" id="unit_number" name="unit_number" required>
                        </div>
                        <div class="col-md-4">
                            <label for="store_area_sqft" class="form-label">Size (sq ft)</label>
                            <input type="number" step="0.01" class="form-control" id="store_area_sqft" name="store_area_sqft">
                        </div>
                        <div class="col-md-6">
                            <label for="store_category" class="form-label">Store Category *</label>
                            <select class="form-select" id="store_category" name="store_category" required>
                                <option value="">Select Category</option>
                                <option value="fashion_apparel">Fashion & Apparel</option>
                                <option value="electronics">Electronics</option>
                                <option value="food_beverage">Food & Beverage</option>
                                <option value="health_beauty">Health & Beauty</option>
                                <option value="home_garden">Home & Garden</option>
                                <option value="sports_recreation">Sports & Recreation</option>
                                <option value="books_media">Books & Media</option>
                                <option value="jewelry_accessories">Jewelry & Accessories</option>
                                <option value="services">Services</option>
                                <option value="entertainment">Entertainment</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="occupancy_status" class="form-label">Status *</label>
                            <select class="form-select" id="occupancy_status" name="occupancy_status" required>
                                <option value="operational">Operational</option>
                                <option value="coming_soon">Coming Soon</option>
                                <option value="temporarily_closed">Temporarily Closed</option>
                                <option value="permanently_closed">Permanently Closed</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="lease_start_date" class="form-label">Lease Start Date</label>
                            <input type="date" class="form-control" id="lease_start_date" name="lease_start_date">
                        </div>
                        <div class="col-md-6">
                            <label for="lease_end_date" class="form-label">Lease End Date</label>
                            <input type="date" class="form-control" id="lease_end_date" name="lease_end_date">
                        </div>
                        <div class="col-12">
                            <label for="store_description" class="form-label">Description</label>
                            <textarea class="form-control" id="store_description" name="store_description" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Store</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteStoreModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this store?</p>
                <p class="text-danger mb-0">
                    <i class="bi bi-exclamation-triangle"></i>
                    This action cannot be undone.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteStoreForm" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Store</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Image Preview Modal -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imagePreviewTitle">Store Image</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="imagePreviewSrc" src="" alt="" class="img-fluid rounded" style="max-height: 500px;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function deleteStore(storeId) {
    document.getElementById('deleteStoreForm').action = `/admin/malls/{{ $mall->id }}/stores/${storeId}`;
    const modal = new bootstrap.Modal(document.getElementById('deleteStoreModal'));
    modal.show();
}

// Image preview functionality
document.addEventListener('DOMContentLoaded', function() {
    // Add click event to all store photos
    document.querySelectorAll('.store-photo').forEach(function(img) {
        img.addEventListener('click', function() {
            const src = this.src;
            const alt = this.alt;
            const storeName = this.closest('.store-photo-container').getAttribute('data-store-name');
            
            document.getElementById('imagePreviewSrc').src = src;
            document.getElementById('imagePreviewSrc').alt = alt;
            document.getElementById('imagePreviewTitle').textContent = storeName + ' - Image';
            
            const modal = new bootstrap.Modal(document.getElementById('imagePreviewModal'));
            modal.show();
        });
    });
});
</script>

<style>
.store-photo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.store-photo:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
    position: relative;
}

.store-photo-placeholder {
    width: 60px;
    height: 60px;
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.store-photo-placeholder:hover {
    background-color: #e9ecef;
}

.table-responsive {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .store-photo,
    .store-photo-placeholder {
        width: 50px;
        height: 50px;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Photo preview tooltip */
.store-photo-container {
    position: relative;
}

.store-photo-container:hover::after {
    content: attr(data-store-name);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}
</style>