@extends('layouts.admin')

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

        <div class="card-body">
            <form id="editRoomForm" action="{{ route('admin.rooms.update', $room->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <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" value="{{ $room->name }}" 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" value="{{ $room->capacity }}" 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" {{ $room->status == 'available' ? 'selected' : '' }}>Tersedia</option>
                                <option value="unavailable" {{ $room->status == 'unavailable' ? 'selected' : '' }}>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>
                        <div class="mb-3 text-center">
                            <img id="imagePreview" src="{{ asset('storage/' . $room->image) }}" class="img-fluid rounded shadow-sm" style="max-height: 200px;">
                        </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-warning text-white"><i class="fas fa-save"></i> Simpan Perubahan</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;
        };
        reader.readAsDataURL(event.target.files[0]);
    }

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

        Swal.fire({
            title: "Konfirmasi",
            text: "Apakah Anda yakin ingin menyimpan perubahan ruangan ini?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#ffc107",
            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