@extends('layouts.app')

@section('content')

<section class="inner_page_breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="breadcrumb_content style2">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active text-thm" aria-current="page">Post Your Property</li>
                    </ol>
                    <h2 class="breadcrumb_title">Post Your Property</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="our-contact pt40 pb40 bgc-f7">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-xl-10 mx-auto">
                <div class="form_grid">
                    <h4 class="mb5">Submit Your Property</h4>
                    <p>Fill in the form below to submit your property for review. Our team will get back to you shortly.</p>

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <form action="{{ route('post-property.store') }}" method="post" enctype="multipart/form-data" id="post_property_form">
                        @csrf

                        {{-- 1. Owner / Contact Information --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Owner / Contact Information</h5>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="owner_name">Full Name <span class="text-danger">*</span></label>
                                    <input id="owner_name" name="owner_name" class="form-control @error('owner_name') is-invalid @enderror" required type="text" value="{{ old('owner_name') }}">
                                    @error('owner_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="owner_email">Email Address <span class="text-danger">*</span></label>
                                    <input id="owner_email" name="owner_email" class="form-control @error('owner_email') is-invalid @enderror" required type="email" value="{{ old('owner_email') }}">
                                    @error('owner_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="owner_phone">Phone Number <span class="text-danger">*</span></label>
                                    <input id="owner_phone" name="owner_phone" class="form-control @error('owner_phone') is-invalid @enderror" required type="tel" value="{{ old('owner_phone') }}">
                                    @error('owner_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="contact_method">Preferred Contact Method</label>
                                    <select id="contact_method" name="contact_method" class="form-control @error('contact_method') is-invalid @enderror">
                                        <option value="email" {{ old('contact_method', 'email') === 'email' ? 'selected' : '' }}>Email</option>
                                        <option value="phone" {{ old('contact_method') === 'phone' ? 'selected' : '' }}>Phone</option>
                                        <option value="whatsapp" {{ old('contact_method') === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                                    </select>
                                    @error('contact_method')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- 2. Property Basic Information --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Property Basic Information</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">Property Title <span class="text-danger">*</span></label>
                                    <input id="title" name="title" class="form-control @error('title') is-invalid @enderror" required type="text" value="{{ old('title') }}">
                                    @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="property_type">Property Type</label>
                                    <select id="property_type" name="property_type" class="form-control @error('property_type') is-invalid @enderror">
                                        <option value="">Select type</option>
                                        <option value="apartment" {{ old('property_type') === 'apartment' ? 'selected' : '' }}>Apartment</option>
                                        <option value="villa" {{ old('property_type') === 'villa' ? 'selected' : '' }}>Villa</option>
                                        <option value="townhouse" {{ old('property_type') === 'townhouse' ? 'selected' : '' }}>Townhouse</option>
                                        <option value="plot" {{ old('property_type') === 'plot' ? 'selected' : '' }}>Plot</option>
                                        <option value="commercial" {{ old('property_type') === 'commercial' ? 'selected' : '' }}>Commercial</option>
                                    </select>
                                    @error('property_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="purpose">Purpose</label>
                                    <select id="purpose" name="purpose" class="form-control @error('purpose') is-invalid @enderror">
                                        <option value="sale" {{ old('purpose', 'sale') === 'sale' ? 'selected' : '' }}>Sale</option>
                                        <option value="rent" {{ old('purpose') === 'rent' ? 'selected' : '' }}>Rent</option>
                                    </select>
                                    @error('purpose')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="expected_price">Expected Price</label>
                                    <input id="expected_price" name="expected_price" class="form-control @error('expected_price') is-invalid @enderror" type="number" step="0.01" min="0" value="{{ old('expected_price') }}">
                                    @error('expected_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="currency">Currency</label>
                                    <select id="currency" name="currency" class="form-control @error('currency') is-invalid @enderror">
                                        <option value="USD" {{ old('currency', 'USD') === 'USD' ? 'selected' : '' }}>USD</option>
                                        <option value="EUR" {{ old('currency') === 'EUR' ? 'selected' : '' }}>EUR</option>
                                        <option value="GBP" {{ old('currency') === 'GBP' ? 'selected' : '' }}>GBP</option>
                                    </select>
                                    @error('currency')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="year_built">Year Built</label>
                                    <input id="year_built" name="year_built" class="form-control @error('year_built') is-invalid @enderror" type="number" min="1800" max="{{ date('Y') + 1 }}" value="{{ old('year_built') }}" placeholder="e.g. 2020">
                                    @error('year_built')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="bedrooms">Bedrooms</label>
                                    <input id="bedrooms" name="bedrooms" class="form-control @error('bedrooms') is-invalid @enderror" type="number" min="0" value="{{ old('bedrooms') }}">
                                    @error('bedrooms')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="bathrooms">Bathrooms</label>
                                    <input id="bathrooms" name="bathrooms" class="form-control @error('bathrooms') is-invalid @enderror" type="number" min="0" value="{{ old('bathrooms') }}">
                                    @error('bathrooms')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="area_built">Built Area (m²)</label>
                                    <input id="area_built" name="area_built" class="form-control @error('area_built') is-invalid @enderror" type="number" step="0.01" min="0" value="{{ old('area_built') }}">
                                    @error('area_built')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="area_plot">Plot Area (m²)</label>
                                    <input id="area_plot" name="area_plot" class="form-control @error('area_plot') is-invalid @enderror" type="number" step="0.01" min="0" value="{{ old('area_plot') }}">
                                    @error('area_plot')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- 3. Address & Location --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Address & Location Details</h5>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="country">Country</label>
                                    <input id="country" name="country" class="form-control @error('country') is-invalid @enderror" type="text" value="{{ old('country') }}">
                                    @error('country')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="state">State / Region</label>
                                    <input id="state" name="state" class="form-control @error('state') is-invalid @enderror" type="text" value="{{ old('state') }}">
                                    @error('state')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="city">City</label>
                                    <input id="city" name="city" class="form-control @error('city') is-invalid @enderror" type="text" value="{{ old('city') }}">
                                    @error('city')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="area">Area / Community</label>
                                    <input id="area" name="area" class="form-control @error('area') is-invalid @enderror" type="text" value="{{ old('area') }}">
                                    @error('area')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="address">Street Address</label>
                                    <textarea id="address" name="address" class="form-control @error('address') is-invalid @enderror" rows="2">{{ old('address') }}</textarea>
                                    @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="postal_code">Postal Code</label>
                                    <input id="postal_code" name="postal_code" class="form-control @error('postal_code') is-invalid @enderror" type="text" value="{{ old('postal_code') }}">
                                    @error('postal_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="map_link">Google Map Link</label>
                                    <input id="map_link" name="map_link" class="form-control @error('map_link') is-invalid @enderror" type="url" placeholder="https://..." value="{{ old('map_link') }}">
                                    @error('map_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- 4. Property Description --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Property Description</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="short_description">Short Description (max 500 chars)</label>
                                    <textarea id="short_description" name="short_description" class="form-control @error('short_description') is-invalid @enderror" rows="2" maxlength="500">{{ old('short_description') }}</textarea>
                                    @error('short_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="description">Full Description</label>
                                    <textarea id="description" name="description" class="form-control @error('description') is-invalid @enderror" rows="6">{{ old('description') }}</textarea>
                                    @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="notes">Additional Notes</label>
                                    <textarea id="notes" name="notes" class="form-control @error('notes') is-invalid @enderror" rows="3">{{ old('notes') }}</textarea>
                                    @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- 5. Amenities & Features --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Amenities & Features</h5>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="parking" name="parking" value="1" {{ old('parking') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="parking">Parking Available</label>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="furnished" name="furnished" value="1" {{ old('furnished') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="furnished">Furnished</label>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="garden" name="garden" value="1" {{ old('garden') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="garden">Garden</label>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="pool" name="pool" value="1" {{ old('pool') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="pool">Swimming Pool</label>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="balcony" name="balcony" value="1" {{ old('balcony') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="balcony">Balcony / Terrace</label>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input" id="pets_allowed" name="pets_allowed" value="1" {{ old('pets_allowed') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="pets_allowed">Pets Allowed</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="features_text">Other Features</label>
                                    <input id="features_text" name="features_text" class="form-control @error('features_text') is-invalid @enderror" type="text" placeholder="e.g. AC, Security, Gym..." value="{{ old('features_text') }}">
                                    @error('features_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- 6. Media Uploads --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Media Uploads</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="images">Property Images <span class="text-danger">*</span></label>
                                    <p class="small text-muted">At least one image required. JPG, PNG, or WEBP. Max 5MB per image.</p>
                                    <input id="images" name="images[]" class="form-control-file @error('images') is-invalid @enderror" type="file" multiple accept=".jpg,.jpeg,.png,.webp">
                                    @error('images')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    @error('images.*')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="documents">Property Documents (Optional)</label>
                                    <p class="small text-muted">Ownership documents, floor plans, etc. PDF, DOC, or DOCX. Max 10MB per file.</p>
                                    <input id="documents" name="documents[]" class="form-control-file @error('documents.*') is-invalid @enderror" type="file" multiple accept=".pdf,.doc,.docx">
                                    @error('documents.*')<div class="text-danger small">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- 7. Confirmation --}}
                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <h5 class="mb-3">Confirmation</h5>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group form-check">
                                    <input type="checkbox" class="form-check-input @error('agreement') is-invalid @enderror" id="agreement" name="agreement" value="1" {{ old('agreement') ? 'checked' : '' }} required>
                                    <label class="form-check-label" for="agreement">I confirm the information provided is accurate and complete. <span class="text-danger">*</span></label>
                                    @error('agreement')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-sm-12">
                                <div class="form-group mb0">
                                    <button type="submit" class="btn btn-lg btn-thm" id="post_property_submit">Submit Property</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
document.getElementById('post_property_form').addEventListener('submit', function() {
    var btn = document.getElementById('post_property_submit');
    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Submitting...';
    }
});
</script>
@endpush

@endsection