@extends('admin.layout')

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

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-home me-2"></i>Tambah Properti Baru
        </h1>
        <a href="{{ route('admin.properties.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Kembali
        </a>
    </div>

    <div class="card shadow">
        <div class="card-body">
            <form action="{{ route('admin.properties.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <div class="col-lg-8">
                        <h5 class="mb-3">Informasi Dasar</h5>

                        <div class="mb-3">
                            <label for="hotel_id" class="form-label">Hotel <span class="text-danger">*</span></label>
                            <select class="form-control @error('hotel_id') is-invalid @enderror" id="hotel_id" name="hotel_id" required>
                                <option value="">Pilih Hotel</option>
                                @foreach($hotels as $hotel)
                                    <option value="{{ $hotel->id }}" {{ old('hotel_id') == $hotel->id ? 'selected' : '' }}>{{ $hotel->name }}</option>
                                @endforeach
                            </select>
                            @error('hotel_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="title" class="form-label">Judul Properti <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Deskripsi</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="4">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="property_type" class="form-label">Tipe Properti <span class="text-danger">*</span></label>
                                <select class="form-control @error('property_type') is-invalid @enderror" id="property_type" name="property_type" required>
                                    <option value="">Pilih Tipe</option>
                                    <option value="villa" {{ old('property_type') == 'villa' ? 'selected' : '' }}>Villa</option>
                                    <option value="apartment" {{ old('property_type') == 'apartment' ? 'selected' : '' }}>Apartemen</option>
                                    <option value="house" {{ old('property_type') == 'house' ? 'selected' : '' }}>Rumah</option>
                                    <option value="condo" {{ old('property_type') == 'condo' ? 'selected' : '' }}>Kondominium</option>
                                </select>
                                @error('property_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="address" class="form-label">Alamat <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('address') is-invalid @enderror" id="address" name="address" value="{{ old('address') }}" required>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="city" class="form-label">Kota <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('city') is-invalid @enderror" id="city" name="city" value="{{ old('city') }}" required>
                                @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="country" class="form-label">Negara <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('country') is-invalid @enderror" id="country" name="country" value="{{ old('country') }}" required>
                                @error('country')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="bedrooms" class="form-label">Kamar Tidur</label>
                                <input type="number" class="form-control @error('bedrooms') is-invalid @enderror" id="bedrooms" name="bedrooms" value="{{ old('bedrooms') }}">
                                @error('bedrooms')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="land_area_sqm" class="form-label">Luas Tanah (m²) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control @error('land_area_sqm') is-invalid @enderror" id="land_area_sqm" name="land_area_sqm" value="{{ old('land_area_sqm') }}" required>
                                @error('land_area_sqm')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="building_area_sqm" class="form-label">Luas Bangunan (m²) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control @error('building_area_sqm') is-invalid @enderror" id="building_area_sqm" name="building_area_sqm" value="{{ old('building_area_sqm') }}" required>
                                @error('building_area_sqm')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="floors" class="form-label">Jumlah Lantai</label>
                                <input type="number" class="form-control @error('floors') is-invalid @enderror" id="floors" name="floors" value="{{ old('floors') }}">
                                @error('floors')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="garage_spaces" class="form-label">Ruang Garasi</label>
                                <input type="number" class="form-control @error('garage_spaces') is-invalid @enderror" id="garage_spaces" name="garage_spaces" value="{{ old('garage_spaces') }}">
                                @error('garage_spaces')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="furnishing_status" class="form-label">Status Furnitur <span class="text-danger">*</span></label>
                                <select class="form-control @error('furnishing_status') is-invalid @enderror" id="furnishing_status" name="furnishing_status" required>
                                    <option value="">Pilih Status</option>
                                    <option value="unfurnished" {{ old('furnishing_status') == 'unfurnished' ? 'selected' : '' }}>Tanpa Furnitur</option>
                                    <option value="semi_furnished" {{ old('furnishing_status') == 'semi_furnished' ? 'selected' : '' }}>Semi Furnished</option>
                                    <option value="fully_furnished" {{ old('furnishing_status') == 'fully_furnished' ? 'selected' : '' }}>Fully Furnished</option>
                                </select>
                                @error('furnishing_status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="year_built" class="form-label">Tahun Dibangun</label>
                                <input type="number" class="form-control @error('year_built') is-invalid @enderror" id="year_built" name="year_built" value="{{ old('year_built') }}">
                                @error('year_built')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="base_price_per_month" class="form-label">Harga/Bulan <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control @error('base_price_per_month') is-invalid @enderror" id="base_price_per_month" name="base_price_per_month" value="{{ old('base_price_per_month') }}" required>
                                @error('base_price_per_month')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="base_price_per_year" class="form-label">Harga/Tahun <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control @error('base_price_per_year') is-invalid @enderror" id="base_price_per_year" name="base_price_per_year" value="{{ old('base_price_per_year') }}" required>
                                @error('base_price_per_year')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="minimum_rental_period" class="form-label">Minimal Sewa (bulan) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('minimum_rental_period') is-invalid @enderror" id="minimum_rental_period" name="minimum_rental_period" value="{{ old('minimum_rental_period') }}" required>
                                @error('minimum_rental_period')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="maximum_rental_period" class="form-label">Maksimal Sewa (bulan)</label>
                                <input type="number" class="form-control @error('maximum_rental_period') is-invalid @enderror" id="maximum_rental_period" name="maximum_rental_period" value="{{ old('maximum_rental_period') }}">
                                @error('maximum_rental_period')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <h5 class="mb-3">Pengaturan</h5>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Aktif</label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="is_available" name="is_available" value="1" {{ old('is_available', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_available">Tersedia</label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="images" class="form-label">Gambar</label>
                            <input type="file" class="form-control @error('images') is-invalid @enderror" id="images" name="images[]" multiple accept="image/*">
                            <small class="form-text text-muted">Pilih beberapa gambar properti</small>
                            @error('images')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <h5 class="mb-3">Fasilitas Properti</h5>
                        <div id="facilities-container">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" name="facilities[]" placeholder="Nama fasilitas">
                                <button type="button" class="btn btn-outline-danger remove-facility" style="display: none;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" id="add-facility" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-plus me-1"></i>Tambah Fasilitas Properti
                        </button>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-12">
                        <h5 class="mb-3">Amenities</h5>
                        <div id="amenities-container">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" name="amenities[]" placeholder="Nama amenity">
                                <button type="button" class="btn btn-outline-danger remove-amenity" style="display: none;">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" id="add-amenity" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-plus me-1"></i>Tambah Amenity
                        </button>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Simpan Properti
                        </button>
                        <a href="{{ route('admin.properties.index') }}" class="btn btn-outline-secondary">Batal</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    $('#add-facility').click(function() {
        const html = `\n            <div class=\"input-group mb-2\">\n                <input type=\"text\" class=\"form-control\" name=\"facilities[]\" placeholder=\"Nama fasilitas\">\n                <button type=\"button\" class=\"btn btn-outline-danger remove-facility\">\n                    <i class=\"fas fa-trash\"></i>\n                </button>\n            </div>\n        `;
        $('#facilities-container').append(html);
        updateFacilityRemoveButtons();
    });

    $(document).on('click', '.remove-facility', function() {
        $(this).closest('.input-group').remove();
        updateFacilityRemoveButtons();
    });

    function updateFacilityRemoveButtons() {
        const cnt = $('#facilities-container .input-group').length;
        $('.remove-facility').toggle(cnt > 1);
    }

    updateFacilityRemoveButtons();

    $('#add-amenity').click(function() {
        const html = `\n            <div class=\"input-group mb-2\">\n                <input type=\"text\" class=\"form-control\" name=\"amenities[]\" placeholder=\"Nama amenity\">\n                <button type=\"button\" class=\"btn btn-outline-danger remove-amenity\">\n                    <i class=\"fas fa-trash\"></i>\n                </button>\n            </div>\n        `;
        $('#amenities-container').append(html);
        updateAmenityRemoveButtons();
    });

    $(document).on('click', '.remove-amenity', function() {
        $(this).closest('.input-group').remove();
        updateAmenityRemoveButtons();
    });

    function updateAmenityRemoveButtons() {
        const cnt = $('#amenities-container .input-group').length;
        $('.remove-amenity').toggle(cnt > 1);
    }

    updateAmenityRemoveButtons();
});
</script>
@endpush
@endsection