@extends('layouts.admin')

@section('content')
<div class="container mt-4">
    <div class="card shadow-lg border-0 rounded">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0"><i class="fas fa-plus-circle"></i> Tambah Ruangan</h4>
        </div>

        <div class="card-body">
            <form id="roomForm" action="{{ route('admin.rooms.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <!-- Kolom Kiri -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label fw-bold"><i class="fas fa-door-open"></i> Nama Ruangan</label>
                            <input type="text" class="form-control shadow-sm" id="name" name="name" placeholder="Masukkan Nama Ruangan" required>
                        </div>
                        <div class="mb-3">
                            <label for="capacity" class="form-label fw-bold"><i class="fas fa-users"></i> Kapasitas</label>
                            <input type="number" class="form-control shadow-sm" id="capacity" name="capacity" placeholder="Jumlah Kapasitas" required>
                        </div>
                        <div class="mb-3">
                            <label for="status" class="form-label fw-bold"><i class="fas fa-toggle-on"></i> Status</label>
                            <select class="form-select shadow-sm" id="status" name="status">
                                <option value="available" selected>Tersedia</option>
                                <option value="unavailable">Tidak Tersedia</option>
                            </select>
                        </div>
                    </div>

                    <!-- Kolom Kanan -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="image" class="form-label fw-bold"><i class="fas fa-image"></i> Upload Gambar</label>
                            <input type="file" class="form-control shadow-sm" id="image" name="image" onchange="previewImage(event)">
                            <div class="mt-3 text-center">
                                <img id="imagePreview" src="#" class="img-fluid rounded shadow-sm d-none" style="max-height: 200px;">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-end">
                    <a href="{{ route('admin.rooms.index') }}" class="btn btn-secondary me-2"><i class="fas fa-arrow-left"></i> Kembali</a>
                    <button type="submit" class="btn btn-success"><i class="fas fa-save"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('imagePreview');
            output.src = reader.result;
            output.classList.remove('d-none');
        };
        reader.readAsDataURL(event.target.files[0]);
    }

    document.getElementById('roomForm').addEventListener('submit', function(event) {
        event.preventDefault(); // Mencegah form langsung submit

        Swal.fire({
            title: "Konfirmasi",
            text: "Apakah Anda yakin ingin menambahkan ruangan ini?",
            icon: "question",
            showCancelButton: true,
            confirmButtonColor: "#28a745",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ya, Simpan!",
            cancelButtonText: "Batal"
        }).then((result) => {
            if (result.isConfirmed) {
                this.submit(); // Submit form setelah konfirmasi
            }
        });
    });

    @if(session('success'))
        Swal.fire({
            title: "Berhasil!",
            text: "{{ session('success') }}",
            icon: "success",
            confirmButtonColor: "#3085d6"
        });
    @endif

    @if(session('error'))
        Swal.fire({
            title: "Gagal!",
            text: "{{ session('error') }}",
            icon: "error",
            confirmButtonColor: "#d33"
        });
    @endif
</script>
@endsection