@extends('layouts.admin')

@section('title', 'Tambah Booking')

@section('content')
<div class="container mt-4">
    <div class="card shadow-lg border-0">
        <div class="card-header bg-primary text-white text-center">
            <h4 class="mb-0">📝 Tambah Booking</h4>
        </div>

        <div class="card-body">
            @if(session('success'))
                <script>
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: '{{ session("success") }}',
                        confirmButtonColor: '#3085d6',
                    });
                </script>
            @endif

            <form id="createBookingForm" action="{{ route('admin.bookings.store') }}" method="POST">
                @csrf

                <div class="row">
                    <!-- Kolom Kiri -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="user_id" class="form-label"><i class="fas fa-user"></i> Peminjam</label>
                            <select name="user_id" class="form-control" required>
                                <option value="">Pilih User</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->email }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="room_id" class="form-label"><i class="fas fa-door-closed"></i> Ruang</label>
                            <select name="room_id" id="room_id" class="form-control" required>
                                <option value="">-- Pilih Ruang --</option>
                                @foreach($rooms as $room)
                                    <option value="{{ $room->id }}">{{ $room->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="start_date" class="form-label"><i class="fas fa-calendar-alt"></i> Tanggal Mulai</label>
                            <input type="date" name="start_date" id="start_date" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="end_date" class="form-label"><i class="fas fa-calendar-alt"></i> Tanggal Selesai</label>
                            <input type="date" name="end_date" id="end_date" class="form-control" required>
                        </div>
                    </div>

                    <!-- Kolom Kanan -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="start_time" class="form-label"><i class="fas fa-clock"></i> Waktu Mulai</label>
                            <input type="time" name="start_time" id="start_time" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="end_time" class="form-label"><i class="fas fa-clock"></i> Waktu Selesai</label>
                            <input type="time" name="end_time" id="end_time" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label for="reason" class="form-label"><i class="fas fa-edit"></i> Acara</label>
                            <input type="text" name="reason" id="reason" class="form-control" placeholder="Misal: Rapat Tim" required>
                        </div>
                    </div>
                </div>

                <input type="hidden" name="status" value="pending">

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save"></i> Simpan
                    </button>
                    <a href="{{ route('admin.bookings.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Batal
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.getElementById('createBookingForm').addEventListener('submit', function (e) {
        e.preventDefault();
        Swal.fire({
            title: "Yakin ingin menyimpan?",
            text: "Pastikan data sudah benar sebelum menyimpan.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ya, Simpan!"
        }).then((result) => {
            if (result.isConfirmed) {
                e.target.submit();
            }
        });
    });
</script>
@endsection