@extends('layouts.app')

@section('title', 'Outlet QR Code - Tiqkets')
@section('page-title', $outlet->outlet_name . ' - QR Code')

@section('header-action')
    <a href="{{ route('food-court.outlets.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back to Outlets
    </a>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Outlet Info Card -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h4 class="mb-3">{{ $outlet->outlet_name }}</h4>
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <small class="text-muted d-block">Shop Number</small>
                            <strong>{{ $outlet->shop_number ?? 'N/A' }}</strong>
                        </div>
                        <div class="col-md-6 mb-2">
                            <small class="text-muted d-block">Contact Person</small>
                            <strong>{{ $outlet->outlet_contact_name }}</strong>
                        </div>
                        <div class="col-md-6 mb-2">
                            <small class="text-muted d-block">Phone</small>
                            <strong>{{ $outlet->outlet_contact_phone }}</strong>
                        </div>
                        <div class="col-md-6 mb-2">
                            <small class="text-muted d-block">Email</small>
                            <strong>{{ $outlet->outlet_contact_email }}</strong>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <span class="badge bg-{{ $outlet->status === 'active' ? 'success' : 'danger' }} fs-6 px-3 py-2">
                        {{ ucfirst($outlet->status) }}
                    </span>
                    <p class="text-muted small mt-2 mb-0">
                        <i class="fas fa-users me-1"></i> {{ $users->count() }} Staff Members
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- WhatsApp QR Code Card -->
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-success text-white text-center">
                    <h4 class="mb-0">
                        <i class="fab fa-whatsapp me-2"></i> WhatsApp QR Code
                    </h4>
                </div>
                <div class="card-body text-center p-4">
                    <div class="qr-code-container mb-4">
                        {!! $whatsappQrSvg !!}
                    </div>

                    <div class="alert alert-info mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Scan this QR code</strong> to connect directly via WhatsApp
                    </div>

                    <div class="d-grid gap-3">
                        <a href="{{ route('food-court.outlets.download', $outlet) }}"
                           class="btn btn-success btn-lg">
                            <i class="fas fa-download me-2"></i> Download QR Code (PNG)
                        </a>
                        <a href="{{ route('food-court.outlets.print', $outlet) }}"
                           class="btn btn-outline-secondary btn-lg" target="_blank">
                            <i class="fas fa-print me-2"></i> Print QR Code
                        </a>
                    </div>
                </div>
                <div class="card-footer bg-light">
                    <div class="text-center">
                        <small class="text-muted d-block mb-2"><strong>WhatsApp Link:</strong></small>
                        <small class="text-muted text-break">{{ $whatsappQrUrl }}</small>
                    </div>
                    <div class="text-center mt-3">
                        <small class="text-muted d-block mb-1"><strong>Encoded Outlet ID:</strong></small>
                        <code class="bg-white p-2 rounded d-inline-block">outlet : {{ base64_encode($outlet->id) }}</code>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Staff Section -->
    @if($users->count() > 0)
    <div class="card shadow-sm mt-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fas fa-users me-2"></i> Staff Members ({{ $users->count() }})
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                        <tr>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone ?? 'N/A' }}</td>
                            <td>
                                <span class="badge bg-secondary">{{ $user->role ?? 'Staff' }}</span>
                            </td>
                            <td>
                                <span class="badge bg-{{ $user->status === 'active' ? 'success' : 'danger' }}">
                                    {{ ucfirst($user->status ?? 'active') }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('styles')
<style>
.qr-code-container {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    padding: 30px;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.qr-code-container svg {
    display: block;
    margin: 0 auto;
    background: white;
    padding: 15px;
    border-radius: 10px;
}

.card-header {
    font-weight: 600;
}

.card-footer {
    background-color: #f8f9fa;
}

code {
    font-size: 0.9rem;
}
</style>
@endpush