@extends('layouts.admin')

@section('title', 'Businesses & Shops - ' . $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 }} - Businesses & Shops</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">Shops</li>
            </ol>
        </nav>
    </div>
    <div>
        <a href="{{ route('admin.malls.businesses.create', $mall) }}" class="btn btn-primary">
            <i class="bi bi-plus me-1"></i>
            Add New Business
        </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 Applications</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_applications'] }}</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-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">Pending</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['pending'] }}</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-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-danger 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-danger text-uppercase mb-1">Rejected</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['rejected'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-x-circle 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 Businesses</h6>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.malls.shops', $mall) }}" class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search Businesses</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Business name, owner, contact...">
            </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="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                    <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                    <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                </select>
            </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 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.shops', $mall) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-clockwise"></i>
                </a>
            </div>
        </form>
    </div>
</div>

<!-- Shops Table -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">Business Applications & Shops</h6>
        <small class="text-muted">{{ $shops->count() }} {{ Str::plural('business', $shops->count()) }} found</small>
    </div>
    <div class="card-body">
        @if($shops->count() > 0)
        <div class="table-responsive">
            <table class="table table-bordered" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Business Info</th>
                        <th>Owner & Contact</th>
                        <th>Location</th>
                        <th>Category</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($shops as $shop)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                @if($shop->logo_image)
                                    <img src="{{ asset('storage/' . $shop->logo_image) }}" 
                                         alt="Logo" class="rounded me-3" style="width: 40px; height: 40px; object-fit: cover;">
                                @else
                                    <div class="bg-secondary rounded me-3 d-flex align-items-center justify-content-center" 
                                         style="width: 40px; height: 40px;">
                                        <i class="bi bi-shop text-white"></i>
                                    </div>
                                @endif
                                <div>
                                    <div class="font-weight-bold">{{ $shop->store_name }}</div>
                                    <small class="text-muted">{{ $shop->store_number ?: 'No store number' }}</small>
                                    @if($shop->brand_name)
                                        <br><small class="text-info">{{ $shop->brand_name }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="font-weight-bold">{{ $shop->primary_contact_name }}</div>
                            <small class="text-muted d-block">📧 {{ $shop->primary_contact_email }}</small>
                            <small class="text-muted d-block">📞 {{ $shop->primary_contact_phone }}</small>
                            @if($shop->whatsapp_number)
                                <small class="text-success d-block">💬 {{ $shop->whatsapp_number }}</small>
                            @endif
                        </td>
                        <td>
                            <div>Floor {{ $shop->floor_number }}</div>
                            <small class="text-muted">Unit {{ $shop->unit_number }}</small>
                            @if($shop->store_area_sqft)
                                <br><small class="text-muted">{{ number_format($shop->store_area_sqft) }} sq ft</small>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-info">{{ ucfirst(str_replace('_', ' ', $shop->store_category ?? 'N/A')) }}</span>
                            @if($shop->business_type)
                                <br><small class="text-muted">{{ ucfirst($shop->business_type) }}</small>
                            @endif
                        </td>
                        <td>
                            @php
                                $statusColors = [
                                    'pending' => 'warning',
                                    'approved' => 'success',
                                    'rejected' => 'danger',
                                    'suspended' => 'secondary'
                                ];
                                $statusColor = $statusColors[$shop->registration_status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusColor }}">{{ ucfirst($shop->registration_status) }}</span>
                            
                            @if($shop->occupancy_status)
                                <br><small class="text-muted">{{ ucfirst(str_replace('_', ' ', $shop->occupancy_status)) }}</small>
                            @endif
                            
                            @if($shop->opening_date)
                                <br><small class="text-muted">Opens: {{ $shop->opening_date->format('M d, Y') }}</small>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('admin.malls.show-store', [$mall, $shop]) }}" 
                                   class="btn btn-sm btn-outline-primary" title="View Details">
                                    <i class="bi bi-eye"></i>
                                </a>
                                
                                @if($shop->registration_status === 'pending')
                                    <button type="button" class="btn btn-sm btn-outline-success" 
                                            onclick="approveShop({{ $shop->id }})" title="Approve">
                                        <i class="bi bi-check"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="rejectShop({{ $shop->id }})" title="Reject">
                                        <i class="bi bi-x"></i>
                                    </button>
                                @endif
                                
                                <button type="button" class="btn btn-sm btn-outline-secondary" 
                                        onclick="editShop({{ $shop->id }})" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                
                                <button type="button" class="btn btn-sm btn-outline-danger" 
                                        onclick="deleteShop({{ $shop->id }})" title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="text-center py-5">
            <i class="bi bi-shop fa-3x text-gray-300 mb-3"></i>
            <h5 class="text-gray-600">No Businesses Found</h5>
            <p class="text-gray-500 mb-4">
                @if(request()->hasAny(['search', 'status', 'floor', 'category']))
                    No businesses match your current filters. Try adjusting your search criteria.
                @else
                    No businesses have been registered for this mall yet.
                @endif
            </p>
            <a href="{{ route('admin.malls.businesses.create', $mall) }}" class="btn btn-primary">
                <i class="bi bi-plus me-1"></i>
                Add First Business
            </a>
        </div>
        @endif
    </div>
</div>

@endsection

@section('scripts')
<script>
function approveShop(shopId) {
    if (confirm('Are you sure you want to approve this business application?')) {
        // Handle approval logic
        fetch(`/admin/malls/{{ $mall->id }}/shops/${shopId}/approve`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while approving the business.');
        });
    }
}

function rejectShop(shopId) {
    const reason = prompt('Please provide a reason for rejection:');
    if (reason && reason.trim()) {
        fetch(`/admin/malls/{{ $mall->id }}/shops/${shopId}/reject`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ reason: reason.trim() })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while rejecting the business.');
        });
    }
}

function editShop(shopId) {
    // Redirect to edit page or open modal
    window.location.href = `/admin/malls/{{ $mall->id }}/shops/${shopId}/edit`;
}

function deleteShop(shopId) {
    if (confirm('Are you sure you want to delete this business? This action cannot be undone.')) {
        fetch(`/admin/malls/{{ $mall->id }}/shops/${shopId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while deleting the business.');
        });
    }
}
</script>
@endsection