@extends('layout.admin') @section('add_property') <main class="col-md-9 ms-sm-auto col-lg-10 px-3 px-md-4 py-4"> <!-- Header --> <div class="d-flex align-items-center justify-content-between mb-4"> <div> <h1 class="h4 fw-bold mb-0"><i class="bi bi-house-add text-primary me-2"></i>Add New Property</h1> <p class="text-secondary small mb-0">Fill out the form below to create a new listing.</p> </div> <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-sm"> <i class="bi bi-arrow-left me-1"></i> Back to Dashboard </a> </div> <!-- Success message --> @if(session('success')) <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert"> <i class="bi bi-check-circle me-2"></i>{{ session('success') }} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> @endif <!-- Add Property Form --> <div class="bg-white border rounded-4 shadow-sm p-4"> <form id="propertyForm" action="{{ route('admin.store-property') }}" method="POST" enctype="multipart/form-data"> @csrf <!-- Section: Basic Info --> <div class="mb-4 border-bottom pb-3"> <h6 class="fw-bold text-primary mb-3"><i class="bi bi-info-circle me-1"></i> Basic Information</h6> <div class="mb-3"> <label class="form-label fw-semibold">Property Name</label> <input type="text" name="property_name" class="form-control" placeholder="Enter property name" required> </div> <div class="row"> <div class="col-md-6 mb-3"> <label class="form-label fw-semibold">Property Type</label> <select name="property_type" class="form-select" required> <option selected disabled>Select type</option> <option>Hotel</option> <option>Apartment</option> <option>Hostel</option> <option>Villa</option> <option>Resort</option> </select> </div> <div class="col-md-6 mb-3"> <label class="form-label fw-semibold">City / Location</label> <input type="text" name="city_location" class="form-control" placeholder="e.g. Tbilisi, Georgia" required> </div> </div> </div> <!-- Section: Pricing --> <div class="mb-4 border-bottom pb-3"> <h6 class="fw-bold text-primary mb-3"><i class="bi bi-currency-dollar me-1"></i> Pricing</h6> <div class="row"> <div class="col-md-6 mb-3"> <label class="form-label fw-semibold">Price per Night ($)</label> <input type="number" name="price" class="form-control" placeholder="e.g. 150"> </div> <div class="col-md-6 mb-3"> <label class="form-label fw-semibold">Discount (%)</label> <input type="number" name="discount" class="form-control" placeholder="e.g. 15"> <small class="text-secondary">Leave empty if no discount applies</small> </div> </div> </div> <!-- Section: Services --> <div class="mb-4 border-bottom pb-3"> <h6 class="fw-bold text-primary mb-3"><i class="bi bi-gear me-1"></i> Available Services</h6> <div class="row g-2"> @foreach (['Free Wi-Fi', 'Parking', 'Swimming Pool', 'Breakfast Included', 'Air Conditioning', 'Pet Friendly', 'Gym', 'Spa'] as $service) <div class="col-md-4"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="services[]" value="{{ $service }}" id="service-{{ Str::slug($service) }}"> <label class="form-check-label" for="service-{{ Str::slug($service) }}">{{ $service }}</label> </div> </div> @endforeach </div> <small class="text-secondary d-block mt-2">Select all that apply.</small> </div> <!-- Section: Policies --> <div class="mb-4 border-bottom pb-3"> <h6 class="fw-bold text-primary mb-3"> <i class="bi bi-file-earmark-text me-1"></i> Policies </h6> <div id="policiesEditor" style="height: 180px; background: #fff;" class="border rounded-3 shadow-sm"></div> <input type="hidden" name="policies" id="policiesInput"> <small class="text-secondary d-block mt-2"> Use lists for rules — e.g. check-in time, meals, or cancellation details. </small> </div> <!-- Section: Description --> <div class="mb-4 border-bottom pb-3"> <h6 class="fw-bold text-primary mb-3"><i class="bi bi-card-text me-1"></i> Description</h6> <textarea name="description" class="form-control" rows="4" placeholder="Write property details, amenities, and nearby attractions..."></textarea> </div> <!-- Section: Multiple Image Upload --> <div class="mb-4"> <h6 class="fw-bold text-primary mb-3"><i class="bi bi-images me-1"></i> Property Images</h6> <input type="file" name="images[]" id="imagesInput" class="form-control" accept="image/*" multiple> <small class="text-secondary d-block mt-1">Upload multiple images (JPG, PNG up to 5MB each)</small> <div id="imagePreview" class="row g-3 mt-3"></div> </div> <!-- Actions --> <div class="d-flex align-items-center mt-4"> <button type="submit" class="btn btn-primary px-4 me-2"> <i class="bi bi-save me-1"></i> Save Property </button> <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary"> <i class="bi bi-x-circle me-1"></i> Cancel </a> </div> </form> </div> </main> <!-- Quill.js Free CDN --> <link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { const quill = new Quill('#policiesEditor', { theme: 'snow', placeholder: 'Write your property policies here...', modules: { toolbar: [ [{ 'size': ['small', false, 'large', 'huge'] }], [{ list: 'ordered' }, { list: 'bullet' }] ] } }); const hiddenInput = document.getElementById('policiesInput'); const form = document.getElementById('propertyForm'); // Keep hidden input updated in real time quill.on('text-change', function() { hiddenInput.value = quill.root.innerHTML.trim(); }); // Ensure it’s synced before submit form.addEventListener('submit', function(e) { hiddenInput.value = quill.root.innerHTML.trim(); if (hiddenInput.value === '' || quill.getText().trim().length === 0) { e.preventDefault(); alert('Please write at least one policy before submitting.'); } }); }); </script> <style> #policiesEditor { height: 180px; background: #fff; border-radius: 10px; border: 1px solid #dee2e6; } .ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; } .ql-container.ql-snow { border-radius: 0 0 10px 10px; } #imagePreview img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; transition: all 0.3s ease; cursor: pointer; } #imagePreview .preview-wrapper { position: relative; } #imagePreview .remove-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; } #imagePreview .preview-wrapper:hover .remove-btn { opacity: 1; } #imagePreview img:hover { transform: scale(1.03); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } </style> @endsection