@extends('layouts.admin')

@section('title', 'Traditional Markets Management')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Traditional Markets Management</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Markets</li>
            </ol>
        </nav>
    </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 Markets</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_markets'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-shop-window 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">Total Stalls</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_stalls'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-grid-3x3-gap 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">Active Vendors</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['active_vendors'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-people 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">Available Stalls</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['available_stalls'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="bi bi-house-add fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Search & Filter Markets</h6>
        </div>
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-4">
                    <label for="search" class="form-label">Search Markets</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request('search') }}" placeholder="Search by name, address, phone...">
                </div>
                <div class="col-md-3">
                    <label for="market_type" class="form-label">Market Type</label>
                    <select class="form-select" id="market_type" name="market_type">
                        <option value="">All Types</option>
                        <option value="traditional" {{ request('market_type') === 'traditional' ? 'selected' : '' }}>Traditional</option>
                        <option value="farmers" {{ request('market_type') === 'farmers' ? 'selected' : '' }}>Farmers Market</option>
                        <option value="flea" {{ request('market_type') === 'flea' ? 'selected' : '' }}>Flea Market</option>
                        <option value="specialty" {{ request('market_type') === 'specialty' ? 'selected' : '' }}>Specialty Market</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="bi bi-search"></i> Search
                    </button>
                    <a href="{{ route('admin.markets.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-clockwise"></i> Reset
                    </a>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <a href="{{ route('admin.markets.create') }}" class="btn btn-success">
                        <i class="bi bi-plus-circle"></i> Add Market
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Markets Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Markets</h6>
        </div>
        <div class="card-body">
            @if($markets->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Market Name</th>
                                <th>Type</th>
                                <th>Location</th>
                                <th>Stalls</th>
                                <th>Occupancy</th>
                                <th>Revenue</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($markets as $market)
                                @php
                                    $totalStalls = $market->marketDetail ? $market->marketDetail->total_stalls : 0;
                                    $occupiedStalls = $market->stalls ? $market->stalls->where('is_available', false)->count() : 0;
                                    $occupancyRate = $totalStalls > 0 ? round(($occupiedStalls / $totalStalls) * 100, 1) : 0;
                                @endphp
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $market->name }}</div>
                                        <small class="text-muted">{{ $market->getBizspotCategoryPath() ?? 'No Category' }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ ucfirst($market->market_type) }}</span>
                                    </td>
                                    <td>{{ Str::limit($market->address, 40) }}</td>
                                    <td>
                                        <div class="text-center">
                                            <strong>{{ $totalStalls }}</strong>
                                            <small class="text-muted d-block">total</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar bg-success" role="progressbar" 
                                                 style="width: {{ $occupancyRate }}%" 
                                                 aria-valuenow="{{ $occupancyRate }}" 
                                                 aria-valuemin="0" aria-valuemax="100">
                                                {{ $occupancyRate }}%
                                            </div>
                                        </div>
                                        <small class="text-muted">{{ $occupiedStalls }}/{{ $totalStalls }} occupied</small>
                                    </td>
                                    <td>
                                        @php
                                            $monthlyRevenue = $market->stalls ? $market->stalls->sum('monthly_rent') : 0;
                                        @endphp
                                        <strong>${{ number_format($monthlyRevenue) }}</strong>
                                        <small class="text-muted d-block">/month</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-success">Active</span>
                                    </td>
                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" 
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                Actions
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('admin.markets.show', $market) }}">
                                                        <i class="bi bi-eye"></i> View Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('admin.markets.stalls', $market) }}">
                                                        <i class="bi bi-grid-3x3-gap"></i> Manage Stalls
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('admin.markets.vendors', $market) }}">
                                                        <i class="bi bi-people"></i> Manage Vendors
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('admin.markets.analytics', $market) }}">
                                                        <i class="bi bi-graph-up"></i> Analytics
                                                    </a>
                                                </li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <a class="dropdown-item text-danger" href="#" 
                                                       onclick="confirmDelete('{{ $market->id }}', '{{ $market->name }}')">
                                                        <i class="bi bi-trash"></i> Delete
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                {{ $markets->links() }}
            @else
                <div class="text-center py-4">
                    <i class="bi bi-shop-window display-1 text-muted"></i>
                    <h5 class="mt-3">No Markets Found</h5>
                    <p class="text-muted">There are no traditional markets registered in the system yet.</p>
                    <a href="{{ route('admin.markets.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Create First Market
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the market <strong id="marketName"></strong>?</p>
                <p class="text-warning">
                    <i class="bi bi-exclamation-triangle"></i>
                    This action cannot be undone and will also remove all associated stalls and vendor data.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Market</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(marketId, marketName) {
    document.getElementById('marketName').textContent = marketName;
    document.getElementById('deleteForm').action = `/admin/markets/${marketId}`;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endsection