@extends('layouts.app-tenant')

@section('content')
<div class="container my-5">

    <!-- Card Pesan Umum -->
    <div class="card border-0 rounded-3 mb-4">
        <div class="card-header text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Pesan Umum</h4>
        </div>
        <div class="card-body p-4">
            <form method="POST" action="{{ route('tenant.tamu.message') }}">
                @csrf
                <div class="mb-3">
                    <textarea name="message" class="form-control" rows="4">{{ $commonMessage ?? '' }}</textarea>
                </div>
                <div class="text-end">
                    <button class="btn btn-primary px-4">Simpan Pesan</button>
                </div>
            </form>
        </div>
    </div>  

    <!-- Card Daftar Tamu -->
    <div class="card border-0 rounded-3">
        <div class="card-header text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Daftar Tamu</h4>
        </div>
        <div class="card-body p-4">

            <!-- Form tambah tamu -->
            <form method="POST" action="{{ route('tenant.tamu.store') }}" class="mb-4">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">Nama Tamu</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">No. WhatsApp</label>
                        <input type="text" name="whatsapp" class="form-control" placeholder="+62" required>
                    </div>
                    <div class="col-md-12 text-end">
                        <button class="btn btn-success px-4">Tambah Tamu</button>
                    </div>
                </div>
            </form>

            <!-- Tabel daftar tamu -->
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Nama</th>
                        <th>WhatsApp</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($guests as $guestId => $guest)
                        <tr>
                            <td>{{ $guest['name'] ?? '-' }}</td>
                            <td>{{ $guest['whatsapp'] ?? '-' }}</td>
                            <td class="text-center">
                                <!-- Edit -->
                                <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editGuestModal{{ $guestId }}">
                                    ✏️
                                </button>

                                <!-- Delete -->
                                <form method="POST" action="{{ route('tenant.tamu.destroy', $guestId) }}" class="d-inline" onsubmit="return confirm('Yakin hapus tamu ini?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger">🗑️</button>
                                </form>
                            </td>
                        </tr>

                        <!-- Modal Edit Guest -->
                        <div class="modal fade" id="editGuestModal{{ $guestId }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog">
                                <form method="POST" action="{{ route('tenant.tamu.update', $guestId) }}">
                                    @csrf
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Edit Tamu</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label>Nama</label>
                                                <input type="text" name="name" class="form-control" value="{{ $guest['name'] ?? '' }}">
                                            </div>
                                            <div class="mb-3">
                                                <label>WhatsApp</label>
                                                <input type="text" name="whatsapp" class="form-control" value="{{ $guest['whatsapp'] ?? '' }}">
                                            </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">Simpan Perubahan</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </tbody>
            </table>

            <!-- Tombol bagikan undangan ke semua tamu -->
            <div class="mt-3 text-end">
                <button class="btn btn-success" onclick="shareToGuests()">Bagikan Undangan</button>
            </div>

        </div>
    </div>
</div>

<script>
  
  function shareToGuests() {
    const guestsObj = @json($guests);
    const guests = Object.values(guestsObj);

    const invitationLink = "{{ route('invitation.show', ['tenantId' => $tenantId, 'themaName' => $order['themaName'] ?? 'default']) }}";
    const commonMessage = "{{ $commonMessage ?? '' }} " + invitationLink;

    guests.forEach((guest, index) => {
        setTimeout(() => {
            const url = `https://wa.me/${guest.whatsapp}?text=${encodeURIComponent(commonMessage)}`;
            window.open(url, '_blank');
        }, index * 2000); // jeda 2 detik antar tamu
    });
}


</script>

@endsection