@extends('layouts.admin')

@section('title', 'Shop Registration Applications')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Shop Registration Applications</h1>
            <p class="text-muted">Manage shop applications for all malls</p>
        </div>
        <div>
            <a href="{{ route('admin.malls.index') }}" class="btn btn-secondary">
                <i class="fas fa-building"></i> Manage Malls
            </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-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 Review</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['pending'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-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">Approved</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['approved'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-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-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">Operational</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['operational'] }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-store 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="fas fa-times-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Filters</h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.shop-registrations.index') }}">
                <div class="row">
                    <div class="col-md-3">
                        <label for="status" class="form-label">Status</label>
                        <select name="status" id="status" class="form-control">
                            <option value="">All Statuses</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-3">
                        <label for="mall_id" class="form-label">Mall</label>
                        <select name="mall_id" id="mall_id" class="form-control">
                            <option value="">All Malls</option>
                            @foreach($malls as $mall)
                                <option value="{{ $mall->id }}" {{ request('mall_id') == $mall->id ? 'selected' : '' }}>
                                    {{ $mall->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="search" class="form-label">Search</label>
                        <input type="text" name="search" id="search" class="form-control" 
                               placeholder="Store name, contact name, email..." 
                               value="{{ request('search') }}">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">Filter</button>
                        <a href="{{ route('admin.shop-registrations.index') }}" class="btn btn-secondary">Clear</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Applications Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Applications ({{ $applications->total() }} total)</h6>
        </div>
        <div class="card-body">
            @if($applications->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Shop Name</th>
                                <th>Mall</th>
                                <th>Contact</th>
                                <th>Category</th>
                                <th>Status</th>
                                <th>Applied</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($applications as $application)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($application->logo_image)
                                                <img src="{{ Storage::url($application->logo_image) }}" 
                                                     alt="Logo" class="rounded-circle me-2" width="40" height="40">
                                            @endif
                                            <div>
                                                <div class="fw-bold">{{ $application->store_name }}</div>
                                                @if($application->brand_name)
                                                    <div class="text-muted small">{{ $application->brand_name }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>{{ $application->mall->name }}</div>
                                        @if($application->unit_number)
                                            <div class="text-muted small">Unit: {{ $application->unit_number }}</div>
                                        @endif
                                        <div class="text-muted small">Floor: {{ $application->floor_number }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $application->primary_contact_name }}</div>
                                        <div class="text-muted small">{{ $application->primary_contact_phone }}</div>
                                        <div class="text-muted small">{{ $application->primary_contact_email }}</div>
                                    </td>
                                    <td>
                                        <span class="badge badge-info">{{ ucfirst(str_replace('_', ' ', $application->store_category)) }}</span>
                                        <div class="text-muted small">{{ ucfirst($application->business_type) }}</div>
                                    </td>
                                    <td>
                                        @if($application->registration_status == 'pending')
                                            <span class="badge badge-warning">Pending</span>
                                        @elseif($application->registration_status == 'approved')
                                            <span class="badge badge-success">Approved</span>
                                        @elseif($application->registration_status == 'rejected')
                                            <span class="badge badge-danger">Rejected</span>
                                        @else
                                            <span class="badge badge-secondary">{{ ucfirst($application->registration_status) }}</span>
                                        @endif
                                        
                                        @if($application->occupancy_status)
                                            <div class="text-muted small">{{ ucfirst(str_replace('_', ' ', $application->occupancy_status)) }}</div>
                                        @endif
                                    </td>
                                    <td>
                                        <div>{{ $application->application_date ? $application->application_date->format('M d, Y') : 'N/A' }}</div>
                                        <div class="text-muted small">{{ $application->application_date ? $application->application_date->diffForHumans() : '' }}</div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.shop-registrations.show', $application) }}" 
                                               class="btn btn-sm btn-primary" title="View Details">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            
                                            @if($application->registration_status == 'pending')
                                                <button type="button" class="btn btn-sm btn-success" 
                                                        onclick="approveApplication({{ $application->id }})" title="Approve">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger" 
                                                        onclick="rejectApplication({{ $application->id }})" title="Reject">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $applications->links() }}
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-inbox fa-3x text-gray-300 mb-3"></i>
                    <h5>No applications found</h5>
                    <p class="text-muted">No shop registration applications match your current filters.</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Quick Action Modals -->
<div class="modal fade" id="approveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Approve Application</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="approveForm" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Are you sure you want to approve this shop application?</p>
                    <div class="mb-3">
                        <label for="admin_notes" class="form-label">Admin Notes (Optional)</label>
                        <textarea name="admin_notes" id="admin_notes" class="form-control" rows="3" 
                                  placeholder="Any notes or instructions for the applicant..."></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="unit_number" class="form-label">Assign Unit Number</label>
                            <input type="text" name="unit_number" id="unit_number" class="form-control" 
                                   placeholder="e.g., A-101">
                        </div>
                        <div class="col-md-6">
                            <label for="floor_number" class="form-label">Floor Number</label>
                            <input type="number" name="floor_number" id="floor_number" class="form-control" 
                                   value="1" min="1">
                        </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-success">Approve Application</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Reject Application</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="rejectForm" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Please provide a reason for rejecting this application:</p>
                    <div class="mb-3">
                        <label for="rejection_reason" class="form-label">Rejection Reason *</label>
                        <textarea name="rejection_reason" id="rejection_reason" class="form-control" rows="4" 
                                  placeholder="Explain why this application is being rejected..." required></textarea>
                    </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-danger">Reject Application</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function approveApplication(applicationId) {
    document.getElementById('approveForm').action = `/admin/shop-registrations/${applicationId}/approve`;
    new bootstrap.Modal(document.getElementById('approveModal')).show();
}

function rejectApplication(applicationId) {
    document.getElementById('rejectForm').action = `/admin/shop-registrations/${applicationId}/reject`;
    new bootstrap.Modal(document.getElementById('rejectModal')).show();
}

// Auto-submit filter form when dropdowns change
document.getElementById('status').addEventListener('change', function() {
    this.form.submit();
});

document.getElementById('mall_id').addEventListener('change', function() {
    this.form.submit();
});
</script>
@endsection