@extends('admin.layout')

@section('title', 'Kelola Hotel')
@section('page-title', 'Kelola Hotel')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-building"></i> Daftar Hotel
                </h5>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addHotelModal">
                    <i class="fas fa-plus"></i> Tambah Hotel
                </button>
            </div>
            <div class="card-body">
                @if($hotels->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Nama Hotel</th>
                                    <th>Lokasi</th>
                                    <th>Rating</th>
                                    <th>Jumlah Kamar</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($hotels as $hotel)
                                <tr>
                                    <td>#{{ $hotel->id }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($hotel->image_url)
                                                <img src="{{ $hotel->image_url }}" alt="{{ $hotel->name }}" 
                                                     class="rounded me-2" width="40" height="40" style="object-fit: cover;">
                                            @else
                                                <div class="bg-secondary rounded me-2 d-flex align-items-center justify-content-center" 
                                                     style="width: 40px; height: 40px;">
                                                    <i class="fas fa-building text-white"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <strong>{{ $hotel->name }}</strong>
                                                @if($hotel->description)
                                                    <br><small class="text-muted">{{ Str::limit($hotel->description, 50) }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <i class="fas fa-map-marker-alt text-danger"></i>
                                        {{ $hotel->city }}, {{ $hotel->country }}
                                        @if($hotel->address)
                                            <br><small class="text-muted">{{ Str::limit($hotel->address, 30) }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($hotel->rating)
                                            <div class="d-flex align-items-center">
                                                @for($i = 1; $i <= 5; $i++)
                                                    @if($i <= $hotel->rating)
                                                        <i class="fas fa-star text-warning"></i>
                                                    @else
                                                        <i class="far fa-star text-muted"></i>
                                                    @endif
                                                @endfor
                                                <span class="ms-1">{{ $hotel->rating }}</span>
                                            </div>
                                        @else
                                            <span class="text-muted">Belum ada rating</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ $hotel->rooms_count }} kamar</span>
                                    </td>
                                    <td>
                                        @if($hotel->is_active)
                                            <span class="badge bg-success">Aktif</span>
                                        @else
                                            <span class="badge bg-danger">Tidak Aktif</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary" 
                                                    onclick="viewHotel({{ $hotel->id }})" 
                                                    data-bs-toggle="tooltip" title="Lihat Detail">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-warning" 
                                                    onclick="editHotel({{ $hotel->id }})" 
                                                    data-bs-toggle="tooltip" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" 
                                                    onclick="deleteHotel({{ $hotel->id }})" 
                                                    data-bs-toggle="tooltip" title="Hapus">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Custom Pagination -->
                    <div class="d-flex justify-content-center mt-4">
                        @include('admin.custom-pagination', ['paginator' => $hotels])
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-building fa-4x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada hotel</h5>
                        <p class="text-muted">Klik tombol "Tambah Hotel" untuk menambah hotel pertama</p>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addHotelModal">
                            <i class="fas fa-plus"></i> Tambah Hotel
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Add Hotel Modal -->
<div class="modal fade" id="addHotelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus"></i> Tambah Hotel Baru
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="addHotelForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Nama Hotel *</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="rating" class="form-label">Rating</label>
                                <select class="form-control" id="rating" name="rating">
                                    <option value="">Pilih Rating</option>
                                    <option value="1">1 Bintang</option>
                                    <option value="2">2 Bintang</option>
                                    <option value="3">3 Bintang</option>
                                    <option value="4">4 Bintang</option>
                                    <option value="5">5 Bintang</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Deskripsi</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="city" class="form-label">Kota *</label>
                                <input type="text" class="form-control" id="city" name="city" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="country" class="form-label">Negara *</label>
                                <input type="text" class="form-control" id="country" name="country" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="address" class="form-label">Alamat *</label>
                        <textarea class="form-control" id="address" name="address" rows="2" required></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="phone" class="form-label">Telepon</label>
                                <input type="text" class="form-control" id="phone" name="phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image_url" class="form-label">URL Gambar</label>
                        <input type="url" class="form-control" id="image_url" name="image_url">
                    </div>
                    
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                        <label class="form-check-label" for="is_active">
                            Hotel Aktif
                        </label>
                    </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"></i> Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    // Add Hotel Form Submit
    document.getElementById('addHotelForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Here you would typically send an AJAX request to save the hotel
        alert('Fitur ini akan diintegrasikan dengan API untuk menyimpan data hotel');
        
        // Close modal
        var modal = bootstrap.Modal.getInstance(document.getElementById('addHotelModal'));
        modal.hide();
        
        // Reset form
        this.reset();
    });

    function viewHotel(id) {
        alert('Lihat detail hotel ID: ' + id);
        // Implement view hotel functionality
    }

    function editHotel(id) {
        alert('Edit hotel ID: ' + id);
        // Implement edit hotel functionality
    }

    function deleteHotel(id) {
        showConfirmModal('Apakah Anda yakin ingin menghapus hotel ini?', function() {
            alert('Hapus hotel ID: ' + id);
            // Implement delete hotel functionality
        }, 'Hapus Hotel');
    }
</script>
@endsection