@extends('admin.layout')

@section('title', 'Manajemen Tamu')
@section('page-title', 'Manajemen Tamu')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-1 text-primary fw-bold">
                        <i class="fas fa-users me-2"></i>Manajemen Tamu
                    </h1>
                    <p class="text-muted mb-0">Kelola data tamu dan riwayat booking mereka</p>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-primary" onclick="exportGuests()">
                        <i class="fas fa-download me-1"></i> Export
                    </button>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGuestModal">
                        <i class="fas fa-plus me-1"></i> Tambah Tamu
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-bar"></i> Statistik Tamu
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-users text-primary"></i><br>
                                        <small class="text-muted">Total Tamu</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-calendar-check text-success"></i><br>
                                        <small class="text-muted">Bulan Ini</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-user-check text-info"></i><br>
                                        <small class="text-muted">Ada Booking</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-redo text-warning"></i><br>
                                        <small class="text-muted">Tamu Berulang</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-user-times text-secondary"></i><br>
                                        <small class="text-muted">Tanpa Booking</small>
                                    </th>
                                    <th class="text-center" style="width: 16.66%;">
                                        <i class="fas fa-calendar-day text-dark"></i><br>
                                        <small class="text-muted">Hari Ini</small>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-center">
                                        <h3 class="text-primary font-weight-bold mb-0">{{ number_format($stats['total_guests']) }}</h3>
                                        <small class="text-muted">Tamu</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-success font-weight-bold mb-0">{{ number_format($stats['guests_this_month']) }}</h3>
                                        <small class="text-muted">
                                            @if($stats['growth_percentage'] > 0)
                                                <span class="text-success">+{{ $stats['growth_percentage'] }}%</span>
                                            @elseif($stats['growth_percentage'] < 0)
                                                <span class="text-danger">{{ $stats['growth_percentage'] }}%</span>
                                            @else
                                                <span class="text-muted">0%</span>
                                            @endif
                                        </small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-info font-weight-bold mb-0">{{ number_format($stats['guests_with_bookings']) }}</h3>
                                        <small class="text-muted">Tamu</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-warning font-weight-bold mb-0">{{ number_format($stats['repeat_guests']) }}</h3>
                                        <small class="text-muted">Tamu</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-secondary font-weight-bold mb-0">{{ number_format($stats['guests_without_bookings']) }}</h3>
                                        <small class="text-muted">Tamu</small>
                                    </td>
                                    <td class="text-center">
                                        <h3 class="text-dark font-weight-bold mb-0">{{ number_format($stats['guests_today']) }}</h3>
                                        <small class="text-muted">Tamu</small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    @if($stats['top_nationalities']->count() > 0)
                    <div class="mt-4 pt-4 border-top">
                        <h6 class="fw-bold mb-3">
                            <i class="fas fa-globe text-primary me-2"></i>Top 5 Kewarganegaraan
                        </h6>
                        <div class="row">
                            @foreach($stats['top_nationalities'] as $nationality)
                            <div class="col-md-6 col-lg-4 mb-2">
                                <div class="d-flex justify-content-between align-items-center p-2 bg-light rounded">
                                    <span class="fw-medium">{{ $nationality->nationality }}</span>
                                    <span class="badge bg-primary">{{ $nationality->total }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- Main Content Card -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div class="d-flex align-items-center mb-2 mb-md-0">
                            <div class="bg-primary bg-opacity-10 rounded-2 p-2 me-3">
                                <i class="fas fa-users text-primary"></i>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-bold text-dark">Daftar Tamu</h5>
                                <small class="text-muted">Menampilkan {{ $guests->firstItem() }} - {{ $guests->lastItem() }} dari {{ $guests->total() }} tamu</small>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <div class="input-group" style="width: 300px;">
                                <input type="text" class="form-control" placeholder="Cari nama, email, atau telepon..." id="searchGuest">
                                <button class="btn btn-outline-primary" type="button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-filter me-1"></i> Filter
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#" onclick="filterGuests('all')">Semua Tamu</a></li>
                                    <li><a class="dropdown-item" href="#" onclick="filterGuests('active')">Tamu Aktif</a></li>
                                    <li><a class="dropdown-item" href="#" onclick="filterGuests('new')">Tamu Baru</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if($guests->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="bg-light">
                                    <tr>
                                        <th class="border-0 fw-semibold text-dark py-3" style="width: 5%;">#</th>
                                        <th class="border-0 fw-semibold text-dark py-3" style="width: 25%;">Tamu</th>
                                        <th class="border-0 fw-semibold text-dark py-3" style="width: 20%;">Kontak</th>
                                        <th class="border-0 fw-semibold text-dark py-3" style="width: 12%;">Total Booking</th>
                                        <th class="border-0 fw-semibold text-dark py-3" style="width: 18%;">Booking Terakhir</th>
                                        <th class="border-0 fw-semibold text-dark py-3" style="width: 12%;">Status</th>
                                        <th class="border-0 fw-semibold text-dark py-3 text-center" style="width: 8%;">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($guests as $index => $guest)
                                        @php
                                            $lastBooking = $guest->bookings->first();
                                        @endphp
                                        <tr class="guest-row" data-guest-id="{{ $guest->id }}">
                                            <td class="py-4">
                                                <span class="fw-medium text-muted">{{ $guests->firstItem() + $index }}</span>
                                            </td>
                                            <td class="py-4">
                                                <div class="d-flex align-items-center">
                                                    <div class="guest-avatar-sm me-3">
                                                        <div class="avatar-circle-sm bg-gradient-primary">
                                                            <i class="fas fa-user text-white"></i>
                                                        </div>
                                                    </div>
                                                    <div class="guest-info">
                                                        <h6 class="mb-1 fw-bold text-dark">{{ $guest->name }}</h6>
                                                        <small class="text-muted d-none d-md-block">
                                                            <i class="fas fa-calendar-plus me-1"></i>
                                                            Bergabung: {{ $guest->created_at->format('d M Y') }}
                                                        </small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="py-4 contact-info">
                                                <div>
                                                    <div class="mb-1">
                                                        <i class="fas fa-envelope text-muted me-1 d-none d-sm-inline"></i>
                                                        <span class="text-dark">{{ Str::limit($guest->email, 20) }}</span>
                                                    </div>
                                                    @if($guest->phone)
                                                        <div class="d-none d-md-block">
                                                            <i class="fas fa-phone text-muted me-1"></i>
                                                            <span class="text-muted small">{{ $guest->phone }}</span>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                            <td class="py-4">
                                                <span class="badge bg-primary rounded-pill px-3 py-2">
                                                    <i class="fas fa-calendar-check me-1"></i>
                                                    {{ $guest->bookings_count }} booking
                                                </span>
                                            </td>
                                            <td class="py-4">
                                                @if($lastBooking)
                                                    <div class="d-flex align-items-center">
                                                        <div class="me-2 d-none d-lg-block">
                                                            <i class="fas fa-hotel text-primary"></i>
                                                        </div>
                                                        <div>
                                                            <div class="fw-medium text-dark d-none d-lg-block">{{ Str::limit($settings['hotel_name'], 15) }}</div>
                                                            <small class="text-muted">
                                                                <i class="fas fa-clock me-1 d-lg-none"></i>
                                                                {{ $lastBooking->created_at->format('d/m/Y') }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="text-center">
                                                        <i class="fas fa-minus-circle text-muted d-none d-lg-inline"></i>
                                                        <div class="text-muted small">Belum ada</div>
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="py-4">
                                                @if($lastBooking)
                                                    @if($lastBooking->status == 'confirmed')
                                                        <span class="badge bg-success rounded-pill px-3 py-2">
                                                            <i class="fas fa-check-circle me-1"></i>Aktif
                                                        </span>
                                                    @elseif($lastBooking->status == 'pending')
                                                        <span class="badge bg-warning rounded-pill px-3 py-2">
                                                            <i class="fas fa-clock me-1"></i>Pending
                                                        </span>
                                                    @elseif($lastBooking->status == 'cancelled')
                                                        <span class="badge bg-danger rounded-pill px-3 py-2">
                                                            <i class="fas fa-times-circle me-1"></i>Dibatalkan
                                                        </span>
                                                    @else
                                                        <span class="badge bg-secondary rounded-pill px-3 py-2">
                                                            {{ ucfirst($lastBooking->status) }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <span class="badge bg-light text-dark rounded-pill px-3 py-2">
                                                        <i class="fas fa-user-clock me-1"></i>Belum Booking
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="py-4 text-center">
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" 
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="fas fa-ellipsis-v"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a class="dropdown-item" href="#" onclick="viewGuestDetails({{ $guest->id }})">
                                                                <i class="fas fa-eye me-2"></i>Lihat Detail
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item" href="#" onclick="viewGuestBookings({{ $guest->id }})">
                                                                <i class="fas fa-history me-2"></i>Riwayat Booking
                                                            </a>
                                                        </li>
                                                        <li><hr class="dropdown-divider"></li>
                                                        <li>
                                                            <a class="dropdown-item" href="#" onclick="editGuest({{ $guest->id }})">
                                                                <i class="fas fa-edit me-2"></i>Edit Tamu
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item text-danger" href="#" onclick="deleteGuest({{ $guest->id }}, '{{ $guest->name }}')">
                                                                <i class="fas fa-trash me-2"></i>Hapus Tamu
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Custom Pagination -->
                        <div class="card-footer bg-white border-top">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <small class="text-muted fw-medium">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Menampilkan {{ $guests->firstItem() }} - {{ $guests->lastItem() }} dari {{ $guests->total() }} tamu
                                    </small>
                                </div>
                                <div>
                                    @include('admin.custom-pagination', ['paginator' => $guests])
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Belum Ada Tamu Terdaftar</h5>
                            <p class="text-muted">Tamu akan muncul di sini setelah melakukan booking.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Guest Modal -->
<div class="modal fade" id="addGuestModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-user-plus me-2"></i>Tambah Tamu Baru
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addGuestForm">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestName" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="guestName" name="name" required>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestEmail" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="guestEmail" name="email" required>
                                <div class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestPhone" class="form-label">Nomor Telepon</label>
                                <input type="tel" class="form-control" id="guestPhone" name="phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestIdNumber" class="form-label">Nomor Identitas</label>
                                <input type="text" class="form-control" id="guestIdNumber" name="id_number">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestDateOfBirth" class="form-label">Tanggal Lahir</label>
                                <input type="date" class="form-control" id="guestDateOfBirth" name="date_of_birth">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestGender" class="form-label">Jenis Kelamin</label>
                                <select class="form-select" id="guestGender" name="gender">
                                    <option value="">Pilih Jenis Kelamin</option>
                                    <option value="male">Laki-laki</option>
                                    <option value="female">Perempuan</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestNationality" class="form-label">Kewarganegaraan</label>
                                <select class="form-select" id="guestNationality" name="nationality">
                                    <option value="">Pilih Kewarganegaraan</option>
                                    <option value="WNI" selected>WNI</option>
                                    <option value="WNA">WNA</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guestAddress" class="form-label">Alamat</label>
                                <textarea class="form-control" id="guestAddress" name="address" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="guestNotes" class="form-label">Catatan</label>
                        <textarea class="form-control" id="guestNotes" name="notes" rows="2" placeholder="Catatan tambahan tentang tamu (opsional)"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Simpan Tamu
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Guest Modal -->
<div class="modal fade" id="editGuestModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-user-edit me-2"></i>Edit Tamu
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="editGuestForm">
                @csrf
                @method('PUT')
                <input type="hidden" id="editGuestId" name="guest_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editGuestName" class="form-label">Nama Lengkap</label>
                        <input type="text" class="form-control" id="editGuestName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editGuestEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="editGuestEmail" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="editGuestPhone" class="form-label">Nomor Telepon</label>
                        <input type="tel" class="form-control" id="editGuestPhone" name="phone">
                    </div>
                    <div class="mb-3">
                        <label for="editGuestAddress" class="form-label">Alamat</label>
                        <textarea class="form-control" id="editGuestAddress" name="address" rows="2"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editGuestIdNumber" class="form-label">Nomor Identitas</label>
                                <input type="text" class="form-control" id="editGuestIdNumber" name="id_number">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editGuestDateOfBirth" class="form-label">Tanggal Lahir</label>
                                <input type="date" class="form-control" id="editGuestDateOfBirth" name="date_of_birth">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editGuestGender" class="form-label">Jenis Kelamin</label>
                                <select class="form-select" id="editGuestGender" name="gender">
                                    <option value="">Pilih Jenis Kelamin</option>
                                    <option value="male">Laki-laki</option>
                                    <option value="female">Perempuan</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editGuestNationality" class="form-label">Kewarganegaraan</label>
                                <input type="text" class="form-control" id="editGuestNationality" name="nationality" placeholder="Indonesia">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="editGuestNotes" class="form-label">Catatan</label>
                        <textarea class="form-control" id="editGuestNotes" name="notes" rows="2" placeholder="Catatan tambahan tentang tamu (opsional)"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Update Tamu
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteGuestModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>Konfirmasi Hapus
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus tamu <strong id="deleteGuestName"></strong>?</p>
                <p class="text-muted small">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteGuest">
                    <i class="fas fa-trash me-1"></i>Hapus Tamu
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Guest Details Modal -->
<div class="modal fade" id="guestDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-user me-2"></i>Detail Tamu
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="guestDetailsContent">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Guest Bookings Modal -->
<div class="modal fade" id="guestBookingsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-history me-2"></i>Riwayat Booking
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="guestBookingsContent">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<style>
.avatar-circle {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.table th {
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.table td {
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.btn-group .btn {
    border-radius: 0.375rem;
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

.badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.card-header {
    background: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
}

.input-group .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}
</style>

<script>
// CSRF Token for AJAX requests
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

// Add Guest Function
function addGuest() {
    const form = document.getElementById('addGuestForm');
    
    // Clear previous validation states
    clearValidationErrors(form);
    
    // Validate required fields
    const requiredFields = [
        { id: 'guestName', name: 'Nama Lengkap' },
        { id: 'guestEmail', name: 'Email' }
    ];
    
    let hasErrors = false;
    
    requiredFields.forEach(field => {
        const input = document.getElementById(field.id);
        const value = input.value.trim();
        
        if (!value) {
            showFieldError(input, `${field.name} wajib diisi`);
            hasErrors = true;
        } else if (field.id === 'guestEmail' && !isValidEmail(value)) {
            showFieldError(input, 'Format email tidak valid');
            hasErrors = true;
        }
    });
    
    if (hasErrors) {
        showAlert('danger', 'Mohon lengkapi semua field yang wajib diisi dengan benar');
        return;
    }
    
    const formData = new FormData(form);
    
    // Convert FormData to JSON
    const data = {};
    formData.forEach((value, key) => {
        data[key] = value;
    });
    
    // Show loading state
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...';
    submitBtn.disabled = true;
    
    fetch('{{ route("admin.guests.store") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify(data)
    })
    .then(async response => {
        const ct = response.headers.get('content-type') || '';
        const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
        return { ok: response.ok, data };
    })
    .then(({ ok, data }) => {
        if (data.success) {
            showAlert('success', data.message || 'Tamu berhasil ditambahkan!');
            bootstrap.Modal.getInstance(document.getElementById('addGuestModal')).hide();
            form.reset();
            clearValidationErrors(form);
            location.reload();
        } else {
            // Handle validation errors from server
            if (data.errors) {
                handleServerValidationErrors(form, data.errors);
                showAlert('danger', 'Mohon perbaiki kesalahan pada form');
            } else {
                showAlert('danger', (ok ? '' : 'HTTP error. ') + (data.message || 'Gagal menambahkan tamu. Silakan coba lagi.'));
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan koneksi. Silakan periksa koneksi internet Anda dan coba lagi.');
    })
    .finally(() => {
        // Restore button state
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

// Helper functions for validation
function clearValidationErrors(form) {
    const inputs = form.querySelectorAll('.form-control, .form-select');
    inputs.forEach(input => {
        input.classList.remove('is-invalid');
        const feedback = input.parentNode.querySelector('.invalid-feedback');
        if (feedback) {
            feedback.textContent = '';
        }
    });
}

function showFieldError(input, message) {
    input.classList.add('is-invalid');
    const feedback = input.parentNode.querySelector('.invalid-feedback');
    if (feedback) {
        feedback.textContent = message;
    }
}

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function handleServerValidationErrors(form, errors) {
    Object.keys(errors).forEach(fieldName => {
        const input = form.querySelector(`[name="${fieldName}"]`);
        if (input) {
            showFieldError(input, errors[fieldName][0]);
        }
    });
}

function validateField(input) {
    const value = input.value.trim();
    const fieldName = input.getAttribute('name');
    
    // Clear previous error
    input.classList.remove('is-invalid');
    const feedback = input.parentNode.querySelector('.invalid-feedback');
    if (feedback) {
        feedback.textContent = '';
    }
    
    // Validate based on field type
    if (fieldName === 'name' && !value) {
        showFieldError(input, 'Nama Lengkap wajib diisi');
        return false;
    }
    
    if (fieldName === 'email') {
        if (!value) {
            showFieldError(input, 'Email wajib diisi');
            return false;
        } else if (!isValidEmail(value)) {
            showFieldError(input, 'Format email tidak valid');
            return false;
        }
    }
    
    return true;
}

// Edit Guest Function
function editGuest(guestId) {
    fetch(`{{ url('admin/guests') }}/${guestId}`, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        }
    })
    .then(async response => {
        const ct = response.headers.get('content-type') || '';
        const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
        return { ok: response.ok, data };
    })
    .then(({ ok, data }) => {
        if (data.success) {
            const guest = data.guest;
            document.getElementById('editGuestId').value = guest.id;
            document.getElementById('editGuestName').value = guest.name;
            document.getElementById('editGuestEmail').value = guest.email;
            document.getElementById('editGuestPhone').value = guest.phone || '';
            document.getElementById('editGuestAddress').value = guest.address || '';
            document.getElementById('editGuestIdNumber').value = guest.id_number || '';
            document.getElementById('editGuestDateOfBirth').value = guest.date_of_birth || '';
            document.getElementById('editGuestGender').value = guest.gender || '';
            document.getElementById('editGuestNationality').value = guest.nationality || '';
            document.getElementById('editGuestNotes').value = guest.notes || '';
            
            new bootstrap.Modal(document.getElementById('editGuestModal')).show();
        } else {
            showAlert('danger', 'Error: ' + (data.message || 'Terjadi kesalahan'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat mengambil data tamu');
    });
}

// Update Guest Function
function updateGuest() {
    const form = document.getElementById('editGuestForm');
    const formData = new FormData(form);
    const guestId = document.getElementById('editGuestId').value;
    
    // Convert FormData to JSON
    const data = {};
    formData.forEach((value, key) => {
        if (key !== 'guest_id') {
            data[key] = value;
        }
    });
    
    fetch(`{{ url('admin/guests') }}/${guestId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        },
        body: JSON.stringify(data)
    })
    .then(async response => {
        const ct = response.headers.get('content-type') || '';
        const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
        return { ok: response.ok, data };
    })
    .then(({ ok, data }) => {
        if (data.success) {
            showAlert('success', data.message);
            bootstrap.Modal.getInstance(document.getElementById('editGuestModal')).hide();
            location.reload();
        } else {
            showAlert('danger', (ok ? '' : 'HTTP error. ') + ('Error: ' + (data.message || 'Terjadi kesalahan')));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat memperbarui data tamu');
    });
}

// Delete Guest Function
function deleteGuest(guestId, guestName) {
    document.getElementById('deleteGuestName').textContent = guestName;
    document.getElementById('confirmDeleteGuest').setAttribute('data-guest-id', guestId);
    new bootstrap.Modal(document.getElementById('deleteGuestModal')).show();
}

// Confirm Delete Function
function confirmDeleteGuest(guestId) {
    fetch(`{{ url('admin/guests') }}/${guestId}`, {
        method: 'DELETE',
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        }
    })
    .then(async response => {
        const ct = response.headers.get('content-type') || '';
        const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
        return { ok: response.ok, data };
    })
    .then(({ ok, data }) => {
        if (data.success) {
            showAlert('success', data.message);
            bootstrap.Modal.getInstance(document.getElementById('deleteGuestModal')).hide();
            location.reload();
        } else {
            showAlert('danger', (ok ? '' : 'HTTP error. ') + ('Error: ' + (data.message || 'Terjadi kesalahan')));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat menghapus tamu');
    });
}

function viewGuestDetails(guestId) {
    // Show loading
    document.getElementById('guestDetailsContent').innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2 text-muted">Memuat detail tamu...</p>
        </div>
    `;
    
    // Show modal
    new bootstrap.Modal(document.getElementById('guestDetailsModal')).show();
    
    // Fetch guest details
    fetch(`{{ url('admin/guests') }}/${guestId}`, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const guest = data.guest;
            const joinDate = new Date(guest.created_at).toLocaleDateString('id-ID', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
            
            document.getElementById('guestDetailsContent').innerHTML = `
                <div class="row">
                    <div class="col-md-4 text-center mb-4">
                        <div class="avatar-circle mx-auto mb-3" style="width: 80px; height: 80px; font-size: 32px;">
                            ${guest.name.charAt(0).toUpperCase()}
                        </div>
                        <h5 class="mb-1">${guest.name}</h5>
                        <p class="text-muted mb-0">Tamu Hotel</p>
                    </div>
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-bold">Email:</label>
                                <p class="mb-0">${guest.email}</p>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-bold">Telepon:</label>
                                <p class="mb-0">${guest.phone || 'Tidak tersedia'}</p>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-bold">Bergabung:</label>
                                <p class="mb-0">${joinDate}</p>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-bold">Total Booking:</label>
                                <p class="mb-0">
                                    <span class="badge bg-primary">${guest.bookings_count || 0} booking</span>
                                </p>
                            </div>
                        </div>
                        ${guest.bookings && guest.bookings.length > 0 ? `
                            <div class="mt-3">
                                <label class="form-label fw-bold">Booking Terakhir:</label>
                                <div class="card border-0 bg-light">
                                    <div class="card-body py-2">
                                        <small class="text-muted">
                                            <i class="fas fa-hotel me-1"></i>
                                            {{ $settings['hotel_name'] }} - 
                                            ${guest.bookings[0].room?.name || 'Kamar'}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        ` : ''}
                        <div class="mt-4 pt-3 border-top">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">Email Welcome</h6>
                                    <small class="text-muted">Kirim ulang email selamat datang ke tamu</small>
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm" 
                                        onclick="resendWelcomeEmail(${guest.id}, '${guest.email}', '${guest.name}')">
                                    <i class="fas fa-envelope me-1"></i>Kirim Ulang Email
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        } else {
            document.getElementById('guestDetailsContent').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Gagal memuat detail tamu: ${data.message || 'Terjadi kesalahan'}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('guestDetailsContent').innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Terjadi kesalahan saat memuat detail tamu.
            </div>
        `;
    });
}

// Resend Welcome Email Function
function resendWelcomeEmail(guestId, guestEmail, guestName) {
    // Show confirmation modal
    showConfirmModal(
        `Apakah Anda yakin ingin mengirim ulang email welcome ke ${guestName} (${guestEmail})?`,
        function() {
            // Show loading state
            const button = event.target.closest('button');
            const originalContent = button.innerHTML;
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Mengirim...';
            
            // Send request
            fetch(`{{ url('admin/guests') }}/${guestId}/resend-welcome-email`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(async response => {
                const ct = response.headers.get('content-type') || '';
                const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
                return { ok: response.ok, data };
            })
            .then(({ ok, data }) => {
                if (data.success) {
                    showAlert('success', `Email welcome berhasil dikirim ke ${guestEmail}`);
                } else {
                    showAlert('error', (ok ? '' : 'HTTP error. ') + (data.message || 'Gagal mengirim email welcome'));
                }
            })
            .finally(() => {
                // Restore button state
                button.disabled = false;
                button.innerHTML = originalContent;
            });
        },
        'Konfirmasi Kirim Email'
    );
}

// Show Alert Function
function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
    
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="fas ${iconClass} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // Insert alert at the top of the modal body
    const modalBody = document.getElementById('guestDetailsContent');
    modalBody.insertAdjacentHTML('afterbegin', alertHtml);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        const alert = modalBody.querySelector('.alert');
        if (alert) {
            alert.remove();
        }
    }, 5000);
}

// Toggle Password Visibility
function togglePassword(inputId, button) {
    const input = document.getElementById(inputId);
    const icon = button.querySelector('i');
    
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function viewGuestBookings(guestId) {
    // Show loading
    document.getElementById('guestBookingsContent').innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2 text-muted">Memuat riwayat booking...</p>
        </div>
    `;
    
    // Show modal
    new bootstrap.Modal(document.getElementById('guestBookingsModal')).show();
    
    // Fetch guest bookings
    fetch(`{{ url('admin/guests') }}/${guestId}/bookings`, {
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Accept': 'application/json'
        }
    })
    .then(async response => {
        const ct = response.headers.get('content-type') || '';
        const data = ct.includes('application/json') ? await response.json() : { success: false, message: await response.text() };
        return { ok: response.ok, data };
    })
    .then(({ ok, data }) => {
        if (data.success && data.bookings) {
            const bookings = data.bookings;
            
            if (bookings.length === 0) {
                document.getElementById('guestBookingsContent').innerHTML = `
                    <div class="text-center py-5">
                        <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum Ada Riwayat Booking</h5>
                        <p class="text-muted">Tamu ini belum pernah melakukan booking.</p>
                    </div>
                `;
                return;
            }
            
            let bookingsHtml = `
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Hotel & Kamar</th>
                                <th>Tanggal</th>
                                <th>Status</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            bookings.forEach(booking => {
                const checkIn = new Date(booking.check_in_date).toLocaleDateString('id-ID');
                const checkOut = new Date(booking.check_out_date).toLocaleDateString('id-ID');
                const bookingDate = new Date(booking.created_at).toLocaleDateString('id-ID');
                
                let statusBadge = '';
                switch(booking.status) {
                    case 'confirmed':
                        statusBadge = '<span class="badge bg-success">Dikonfirmasi</span>';
                        break;
                    case 'pending':
                        statusBadge = '<span class="badge bg-warning">Menunggu</span>';
                        break;
                    case 'cancelled':
                        statusBadge = '<span class="badge bg-danger">Dibatalkan</span>';
                        break;
                    case 'completed':
                        statusBadge = '<span class="badge bg-info">Selesai</span>';
                        break;
                    case 'checked_in':
                        statusBadge = '<span class="badge bg-primary">Check-in</span>';
                        break;
                    case 'checked_out':
                        statusBadge = '<span class="badge bg-dark">Check-out</span>';
                        break;
                    default:
                        statusBadge = '<span class="badge bg-secondary">Unknown (' + booking.status + ')</span>';
                }
                
                bookingsHtml += `
                    <tr>
                        <td>
                            <div>
                                <strong>{{ $settings['hotel_name'] }}</strong>
                                <br>
                                <small class="text-muted">
                                    <i class="fas fa-bed me-1"></i>
                                    ${booking.room?.name || 'Kamar'}
                                </small>
                            </div>
                        </td>
                        <td>
                            <div>
                                <small class="text-muted">Check-in:</small><br>
                                ${checkIn}<br>
                                <small class="text-muted">Check-out:</small><br>
                                ${checkOut}
                            </div>
                        </td>
                        <td>${statusBadge}</td>
                        <td>
                            <strong>Rp ${booking.total_price ? parseInt(booking.total_price).toLocaleString('id-ID') : '0'}</strong>
                            <br>
                            <small class="text-muted">Booking: ${bookingDate}</small>
                        </td>
                    </tr>
                `;
            });
            
            bookingsHtml += `
                        </tbody>
                    </table>
                </div>
            `;
            
            document.getElementById('guestBookingsContent').innerHTML = bookingsHtml;
        } else {
            document.getElementById('guestBookingsContent').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Gagal memuat riwayat booking: ${(ok ? '' : 'HTTP error. ') + (data.message || 'Terjadi kesalahan')}
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('guestBookingsContent').innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                Terjadi kesalahan saat memuat riwayat booking.
            </div>
        `;
    });
}

// Search functionality
document.getElementById('searchGuest').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        if (text.includes(searchTerm)) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
});

// Initialize tooltips and form handlers
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Add Guest Form Handler
    document.getElementById('addGuestForm').addEventListener('submit', function(e) {
        e.preventDefault();
        addGuest();
    });
    
    // Add real-time validation for required fields
    const requiredInputs = ['guestName', 'guestEmail'];
    requiredInputs.forEach(inputId => {
        const input = document.getElementById(inputId);
        if (input) {
            input.addEventListener('blur', function() {
                validateField(this);
            });
            
            input.addEventListener('input', function() {
                if (this.classList.contains('is-invalid')) {
                    validateField(this);
                }
            });
        }
    });
    
    // Clear validation errors when modal is opened
    document.getElementById('addGuestModal').addEventListener('show.bs.modal', function() {
        const form = document.getElementById('addGuestForm');
        clearValidationErrors(form);
        form.reset();
    });
    
    // Edit Guest Form Handler
    document.getElementById('editGuestForm').addEventListener('submit', function(e) {
        e.preventDefault();
        updateGuest();
    });
    
    // Delete Confirmation Handler
    document.getElementById('confirmDeleteGuest').addEventListener('click', function() {
        const guestId = this.getAttribute('data-guest-id');
        confirmDeleteGuest(guestId);
    });
});

// Filter Functions
function filterGuests(type) {
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        switch(type) {
            case 'all':
                row.style.display = '';
                break;
            case 'active':
                // Show only guests with bookings
                const bookingBadge = row.querySelector('.badge');
                if (bookingBadge && !bookingBadge.textContent.includes('0 booking')) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
                break;
            case 'new':
                // Show only guests from this month (simplified check)
                const dateText = row.querySelector('.text-muted small');
                if (dateText && dateText.textContent.includes(new Date().getFullYear())) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
                break;
        }
    });
}

// Show alert function
function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // Insert alert at the top of content
    const contentDiv = document.querySelector('.row');
    contentDiv.insertAdjacentHTML('afterbegin', alertHtml);
    
    // Auto dismiss after 5 seconds
    setTimeout(() => {
        const alert = document.querySelector('.alert');
        if (alert) {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }
    }, 5000);
}

// Export Function
function exportGuests() {
    showAlert('info', 'Fitur export akan segera tersedia!');
}
</script>
@endsection

@push('styles')
<style>
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        margin-bottom: 2rem;
    }
    
    .stats-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        position: relative;
    }
    
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    }
    
    .stats-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
    }
    
    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        margin-bottom: 1rem;
    }
    
    .main-content-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    
    .search-input {
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 12px 20px;
        transition: all 0.3s ease;
    }
    
    .search-input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .filter-select {
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 12px 15px;
        transition: all 0.3s ease;
    }
    
    .filter-select:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .guest-row {
        transition: all 0.3s ease;
        border-bottom: 1px solid #f8f9fa;
    }
    
    .guest-row:hover {
        background-color: #f8f9fa;
        transform: translateX(5px);
    }
    
    .guest-avatar {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-weight: 600;
        font-size: 16px;
        margin-right: 12px;
    }
    
    .guest-name {
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 2px;
    }
    
    .guest-date {
        font-size: 12px;
        color: #718096;
    }
    
    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .contact-item {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #4a5568;
    }
    
    .contact-item i {
        width: 16px;
        margin-right: 8px;
        color: #718096;
    }
    
    .booking-badge {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    
    .status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    
    .status-active {
        background-color: #c6f6d5;
        color: #22543d;
    }
    
    .status-inactive {
        background-color: #fed7d7;
        color: #742a2a;
    }
    
    .action-btn {
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        margin: 0 2px;
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .btn-view {
        background-color: #4299e1;
        color: white;
    }
    
    .btn-edit {
        background-color: #ed8936;
        color: white;
    }
    
    .btn-delete {
        background-color: #f56565;
        color: white;
    }
    
    .card-footer {
        border-radius: 0 0 15px 15px;
    }
    
    @media (max-width: 768px) {
        .stats-card {
            margin-bottom: 1rem;
        }
        
        .guest-row:hover {
            transform: none;
        }
        
        .contact-info {
            font-size: 12px;
        }
        
        .action-btn {
            padding: 6px 8px;
            font-size: 11px;
        }
        
        /* Hide less important columns on mobile */
        .table th:nth-child(4),
        .table td:nth-child(4),
        .table th:nth-child(5),
        .table td:nth-child(5) {
            display: none;
        }
        
        /* Adjust remaining column widths for mobile */
        .table th:nth-child(1),
        .table td:nth-child(1) {
            width: 8% !important;
        }
        
        .table th:nth-child(2),
        .table td:nth-child(2) {
            width: 45% !important;
        }
        
        .table th:nth-child(3),
        .table td:nth-child(3) {
            width: 25% !important;
        }
        
        .table th:nth-child(6),
        .table td:nth-child(6) {
            width: 15% !important;
        }
        
        .table th:nth-child(7),
        .table td:nth-child(7) {
            width: 7% !important;
        }
        
        /* Compact guest info on mobile */
        .guest-avatar-sm {
            display: none;
        }
        
        /* Smaller badges on mobile */
        .badge {
            font-size: 10px !important;
            padding: 4px 8px !important;
        }
        
        /* Compact contact info */
        .contact-info div {
            margin-bottom: 2px !important;
        }
        
        .contact-info .small {
            font-size: 10px !important;
        }
    }
    
    @media (max-width: 576px) {
        /* Even more compact for very small screens */
        .table th:nth-child(3),
        .table td:nth-child(3) {
            display: none;
        }
        
        .table th:nth-child(2),
        .table td:nth-child(2) {
            width: 60% !important;
        }
        
        .table th:nth-child(6),
        .table td:nth-child(6) {
            width: 25% !important;
        }
        
        .table th:nth-child(7),
        .table td:nth-child(7) {
            width: 15% !important;
        }
        
        /* Stack guest info vertically */
        .guest-info h6 {
            font-size: 14px !important;
            margin-bottom: 2px !important;
        }
        
        .guest-info small {
            font-size: 10px !important;
        }
    }
    
    /* Tablet optimizations */
    @media (min-width: 769px) and (max-width: 1024px) {
        .table th:nth-child(1),
        .table td:nth-child(1) {
            width: 6% !important;
        }
        
        .table th:nth-child(2),
        .table td:nth-child(2) {
            width: 28% !important;
        }
        
        .table th:nth-child(3),
        .table td:nth-child(3) {
            width: 22% !important;
        }
        
        .table th:nth-child(4),
        .table td:nth-child(4) {
            width: 14% !important;
        }
        
        .table th:nth-child(5),
        .table td:nth-child(5) {
            width: 16% !important;
        }
        
        .table th:nth-child(6),
        .table td:nth-child(6) {
            width: 10% !important;
        }
        
        .table th:nth-child(7),
        .table td:nth-child(7) {
            width: 4% !important;
        }
    }
</style>
@endpush