<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Guest website assignments · Super Admin</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #059669;
            --primary-dark: #047857;
            --soft: #ecfdf5;
            --muted: #6b7280;
        }
        * { box-sizing: border-box; }
        body { margin: 0; font-family: 'Inter', sans-serif; background: #f3f4f6; color: #111827; }
        .top-nav {
            background: #fff; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center;
            box-shadow: 0 2px 10px rgba(5, 150, 105, 0.08); border-bottom: 2px solid var(--soft);
        }
        .back {
            display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none;
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            padding: 0.55rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
        }
        .back:hover { filter: brightness(1.05); color: #fff; }
        .wrap { max-width: 1200px; margin: 0 auto; padding: 2rem 1.25rem; }
        h1 { font-size: 1.5rem; margin: 0 0 0.25rem; color: var(--primary-dark); }
        .sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.5rem; }
        .card { background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; overflow: hidden; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
        th { background: var(--soft); color: #065f46; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
        tr:last-child td { border-bottom: none; }
        .name { font-weight: 600; }
        .slug { font-size: 0.8rem; color: var(--muted); font-family: ui-monospace, monospace; }
        .url a { color: #2563eb; font-size: 0.8rem; word-break: break-all; }
        .badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
        .b-active { background: #d1fae5; color: #065f46; }
        .b-trial { background: #fef3c7; color: #92400e; }
        .b-suspended { background: #fee2e2; color: #991b1b; }
        .b-other { background: #f3f4f6; color: #4b5563; }
        select { width: 100%; max-width: 280px; padding: 0.45rem 0.5rem; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; }
        .row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
        .btn-save {
            background: var(--primary); color: #fff; border: none; padding: 0.45rem 0.9rem; border-radius: 8px;
            font: inherit; font-weight: 600; cursor: pointer; font-size: 0.85rem;
        }
        .btn-save:hover { background: var(--primary-dark); }
        .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
        .msg { font-size: 0.8rem; margin-top: 0.35rem; }
        .msg.ok { color: #059669; }
        .msg.err { color: #dc2626; }
        .paginate { margin-top: 1.25rem; display: flex; justify-content: center; }
    </style>
    <link rel="stylesheet" href="{{ asset('css/admin-elegant-theme.css') }}">
</head>
<body>
    <nav class="top-nav">
        <a href="{{ route('super.admin.dashboard') }}" class="back">
            <i class="fas fa-arrow-left"></i> Dashboard
        </a>
        <a href="{{ route('super.admin.hotels.index') }}" style="color: var(--primary); font-weight: 600; text-decoration: none; font-size: 0.9rem;">
            <i class="fas fa-hotel"></i> All hotels
        </a>
    </nav>

    <div class="wrap">
        <h1><i class="fas fa-globe" style="color: var(--primary);"></i> Guest website assignments</h1>
        <p class="sub">
            Each hotel is linked to one of four <strong>public guest site</strong> designs. The live URL is
            <code style="background:#e5e7eb;padding:0.1rem 0.35rem;border-radius:4px;">/book/&#123;hotel-slug&#125;</code>
            on your app domain.
        </p>

        <div class="card">
            <table>
                <thead>
                    <tr>
                        <th>Hotel</th>
                        <th>Account</th>
                        <th>Guest site</th>
                        <th>Template &amp; actions</th>
                        <th>Public link</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($hotels as $hotel)
                        @php
                            $t = (string) ($hotel->public_booking_template ?? '1');
                            $webOn = \Illuminate\Support\Facades\Schema::hasColumn('hotels', 'public_booking_enabled')
                                ? (bool) ($hotel->public_booking_enabled ?? true)
                                : true;
                        @endphp
                        <tr>
                            <td>
                                <div class="name">{{ $hotel->name }}</div>
                                <div class="slug">slug: {{ $hotel->slug }}</div>
                            </td>
                            <td>
                                @if($hotel->status === 'active')
                                    <span class="badge b-active">Active</span>
                                @elseif($hotel->status === 'trial')
                                    <span class="badge b-trial">Trial</span>
                                @elseif($hotel->status === 'suspended')
                                    <span class="badge b-suspended">Suspended</span>
                                @else
                                    <span class="badge b-other">{{ $hotel->status }}</span>
                                @endif
                            </td>
                            <td>
                                @if(\Illuminate\Support\Facades\Schema::hasColumn('hotels', 'public_booking_enabled'))
                                    <span class="badge" id="wstat-{{ $hotel->id }}" style="background: {{ $webOn ? '#d1fae5' : '#f3f4f6' }}; color: {{ $webOn ? '#065f46' : '#6b7280' }};">
                                        {{ $webOn ? 'Public ON' : 'Public OFF' }}
                                    </span>
                                    <div class="row-actions" style="margin-top:0.4rem;">
                                        <button type="button" class="btn-save" style="background:{{ $webOn ? '#6b7280' : '#059669' }};font-size:0.8rem;padding:0.35rem 0.6rem;" onclick="setEnabled({{ $hotel->id }}, {{ $webOn ? 'false' : 'true' }})">
                                            {{ $webOn ? 'Deactivate' : 'Activate' }}
                                        </button>
                                    </div>
                                @else
                                    <span class="help" style="font-size:0.8rem; color: var(--muted);">Run migrate</span>
                                @endif
                            </td>
                            <td>
                                <div class="row-actions">
                                    <a href="{{ route('super.admin.website-assignments.edit', $hotel->id) }}" class="btn-save" style="background:#0369a1; text-decoration:none; display:inline-block;">Edit page</a>
                                </div>
                                <div class="row-actions" style="margin-top:0.5rem;">
                                    <label class="visually-hidden" for="template-{{ $hotel->id }}">Template</label>
                                    <select id="template-{{ $hotel->id }}">
                                        <option value="1" @selected($t === '1')>1 — Classic</option>
                                        <option value="2" @selected($t === '2')>2 — Modern</option>
                                        <option value="3" @selected($t === '3')>3 — Resort</option>
                                        <option value="4" @selected($t === '4')>4 — Boutique</option>
                                        <option value="5" @selected($t === '5')>5 — Lifestyle</option>
                                        <option value="6" @selected($t === '6')>6 — Diamond</option>
                                    </select>
                                    <button type="button" class="btn-save" onclick="saveTemplate({{ $hotel->id }})">Save</button>
                                </div>
                                <div class="msg" id="feedback-{{ $hotel->id }}"></div>
                            </td>
                            <td class="url">
                                <a href="{{ route('public.booking.show', $hotel->slug) }}" target="_blank" rel="noopener" id="pl-{{ $hotel->id }}">
                                    {{ url('/book/' . $hotel->slug) }}
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="text-align:center; color: var(--muted); padding: 2rem;">No hotels in the system yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($hotels->hasPages())
            <div class="paginate">{{ $hotels->links() }}</div>
        @endif
    </div>

    <script>
        async function saveTemplate(hotelId) {
            const select = document.getElementById('template-' + hotelId);
            const fb = document.getElementById('feedback-' + hotelId);
            const btn = select.nextElementSibling;
            const val = select.value;
            fb.textContent = '';
            if (btn) btn.disabled = true;

            try {
                const res = await fetch('{{ url('/super-admin/website-assignments') }}/' + hotelId, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ public_booking_template: val }),
                });
                const data = await res.json();
                if (res.ok && data.success) {
                    fb.textContent = data.message || 'Saved.';
                    fb.className = 'msg ok';
                } else {
                    fb.textContent = data.message || (data.errors ? Object.values(data.errors).flat().join(' ') : 'Save failed');
                    fb.className = 'msg err';
                }
            } catch (e) {
                fb.textContent = 'Network error. Try again.';
                fb.className = 'msg err';
            } finally {
                if (btn) btn.disabled = false;
            }
        }

        async function setEnabled(hotelId, on) {
            const fb = document.getElementById('feedback-' + hotelId);
            const st = document.getElementById('wstat-' + hotelId);
            if (fb) { fb.textContent = ''; }
            try {
                const res = await fetch('{{ url('/super-admin/website-assignments') }}/' + hotelId, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ public_booking_enabled: !!on }),
                });
                const data = await res.json();
                if (res.ok && data.success) {
                    if (fb) {
                        fb.textContent = data.message || 'Updated.';
                        fb.className = 'msg ok';
                    }
                    if (st) {
                        st.textContent = on ? 'Public ON' : 'Public OFF';
                        st.style.background = on ? '#d1fae5' : '#f3f4f6';
                        st.style.color = on ? '#065f46' : '#6b7280';
                    }
                    const tr = st ? st.closest('tr') : null;
                    if (tr) {
                        const b = tr.querySelector('button[onclick^="setEnabled"]');
                        if (b) {
                            b.textContent = on ? 'Deactivate' : 'Activate';
                            b.style.background = on ? '#6b7280' : '#059669';
                            b.setAttribute('onclick', 'setEnabled(' + hotelId + ', ' + (on ? 'false' : 'true') + ')');
                        }
                    }
                } else {
                    if (fb) {
                        fb.textContent = data.message || 'Update failed';
                        fb.className = 'msg err';
                    }
                }
            } catch (e) {
                if (fb) {
                    fb.textContent = 'Network error';
                    fb.className = 'msg err';
                }
            }
        }
    </script>
    <style>
        .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
    </style>
</body>
</html>
