@extends('layouts.vertical', ['title' => 'Edit Property'])

@section('content')

<!-- Start Content-->
<div class="container-fluid">

<div class="py-3 d-flex align-items-sm-center flex-sm-row flex-column">
    <div class="flex-grow-1">
        <h4 class="fs-18 fw-semibold m-0">Edit Property - {{ $property->ref_id }}</h4>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Property Information</h5>
            </div>

            <div class="card-body">
                <!-- Multi-tab Navigation -->
                <ul class="nav nav-tabs nav-justified" id="propertyTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" aria-controls="details" aria-selected="true">
                            <i class="mdi mdi-home me-1"></i> Details
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="descriptions-tab" data-bs-toggle="tab" data-bs-target="#descriptions" type="button" role="tab" aria-controls="descriptions" aria-selected="false">
                            <i class="mdi mdi-text me-1"></i> Descriptions
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab" aria-controls="pricing" aria-selected="false">
                            <i class="mdi mdi-currency-eur me-1"></i> Pricing
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="features-tab" data-bs-toggle="tab" data-bs-target="#features" type="button" role="tab" aria-controls="features" aria-selected="false">
                            <i class="mdi mdi-star me-1"></i> Features
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pictures-tab" data-bs-toggle="tab" data-bs-target="#pictures" type="button" role="tab" aria-controls="pictures" aria-selected="false">
                            <i class="mdi mdi-image me-1"></i> Pictures
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents" type="button" role="tab" aria-controls="documents" aria-selected="false">
                            <i class="mdi mdi-file-document me-1"></i> Documents
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="address-tab" data-bs-toggle="tab" data-bs-target="#address" type="button" role="tab" aria-controls="address" aria-selected="false">
                            <i class="mdi mdi-map-marker me-1"></i> Address
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">
                            <i class="mdi mdi-account me-1"></i> Contacts
                        </button>
                    </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content mt-4" id="propertyTabsContent">
                    <!-- Tab 1: Details -->
                    <div class="tab-pane fade show active" id="details" role="tabpanel" aria-labelledby="details-tab">
                        <form id="detailsForm" method="POST" action="{{ route('properties.update', $property->id) }}">
                            @method('PUT')
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ref_id" class="form-label">Reference ID</label>
                                        <input type="text" class="form-control" id="ref_id" name="ref_id" value="{{ $property->ref_id }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="status_id" class="form-label">Status</label>
                                        <select class="form-select" id="status_id" name="status_id">
                                            <option value="">Select Status</option>
                                            @foreach(\App\Models\Property::$statuses as $key => $status)
                                                <option value="{{ $key }}" {{ $property->status_id == $key ? 'selected' : '' }}>{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="country_id" class="form-label">Country</label>
                                        <select class="form-select" id="country_id" name="country_id">
                                            <option value="">Select Country</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id }}" {{ $property->country_id == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="state_id" class="form-label">Province/State</label>
                                        <select class="form-select" id="state_id" name="state_id">
                                            <option value="">Select Province/State</option>
                                            @foreach($states as $state)
                                                <option value="{{ $state->id }}" {{ $property->state_id == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="city_id" class="form-label">City</label>
                                        <select class="form-select" id="city_id" name="city_id">
                                            <option value="">Select City</option>
                                            @foreach($cities as $city)
                                                <option value="{{ $city->id }}" {{ $property->city_id == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="area_id" class="form-label">Area</label>
                                        <select class="form-select" id="area_id" name="area_id">
                                            <option value="">Select Area</option>
                                            @foreach($areas as $area)
                                                <option value="{{ $area->id }}" {{ $property->area_id == $area->id ? 'selected' : '' }}>{{ $area->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="mdi mdi-content-save me-1"></i> Update Details
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Tab 2: Descriptions -->
                    <div class="tab-pane fade" id="descriptions" role="tabpanel" aria-labelledby="descriptions-tab">
                        <h6>Descriptions Tab</h6>
                        <p>This is the descriptions tab content.</p>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="description_en" class="form-label">English Description</label>
                                    <textarea class="form-control" id="description_en" name="description_en" rows="6" placeholder="Enter property description in English...">{{ $property->descriptions->where('language', 'en')->first()?->description ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="description_es" class="form-label">Spanish Description</label>
                                    <textarea class="form-control" id="description_es" name="description_es" rows="6" placeholder="Enter property description in Spanish...">{{ $property->descriptions->where('language', 'es')->first()?->description ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="description_fr" class="form-label">French Description</label>
                                    <textarea class="form-control" id="description_fr" name="description_fr" rows="6" placeholder="Enter property description in French...">{{ $property->descriptions->where('language', 'fr')->first()?->description ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-content-save me-1"></i> Save Descriptions
                            </button>
                        </div>
                    </div>

                    <!-- Tab 3: Pricing -->
                    <div class="tab-pane fade" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">
                        <h6>Pricing Tab</h6>
                        <p>This is the pricing tab content.</p>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="price_sale" class="form-label">Sale Price</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="price_sale" name="price_sale" step="0.01" min="0" value="{{ $property->pricing?->price_sale ?? '' }}">
                                        <span class="input-group-text">EUR</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="price_rent_short" class="form-label">Short Term Rent</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="price_rent_short" name="price_rent_short" step="0.01" min="0" value="{{ $property->pricing?->price_rent_short ?? '' }}">
                                        <span class="input-group-text">EUR/month</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="price_rent_long" class="form-label">Long Term Rent</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" id="price_rent_long" name="price_rent_long" step="0.01" min="0" value="{{ $property->pricing?->price_rent_long ?? '' }}">
                                        <span class="input-group-text">EUR/month</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-content-save me-1"></i> Save Pricing
                            </button>
                        </div>
                    </div>

                    <!-- Tab 4: Features -->
                    <div class="tab-pane fade" id="features" role="tabpanel" aria-labelledby="features-tab">
                        <h6 class="mb-3">Property Features</h6>
                        
                        @foreach($features['parents'] as $parentId => $parentFeature)
                            <div class="mb-4">
                                <h6 class="mb-3 fw-bold">{{ $parentFeature->name }}</h6>
                                <div class="row">
                                    @if(isset($features['grouped'][$parentId]) && count($features['grouped'][$parentId]) > 0)
                                        @foreach($features['grouped'][$parentId] as $childFeature)
                                            <div class="col-md-3 mb-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="feature_{{ $childFeature->id }}" name="features[]" value="{{ $childFeature->id }}" {{ $property->features->contains($childFeature->id) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="feature_{{ $childFeature->id }}">
                                                        {{ $childFeature->name }}
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        @endforeach

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-content-save me-1"></i> Save Features
                            </button>
                        </div>
                    </div>

                    <!-- Tab 5: Pictures -->
                    <div class="tab-pane fade" id="pictures" role="tabpanel" aria-labelledby="pictures-tab">
                        <h6>Pictures Tab</h6>
                        <p>This is the pictures tab content.</p>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="images" class="form-label">Property Images</label>
                                    <input type="file" class="form-control" id="images" name="images[]" multiple accept="image/*">
                                    <div class="form-text">Select multiple images. First image will be set as primary.</div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-upload me-1"></i> Upload Images
                            </button>
                        </div>
                    </div>

                    <!-- Tab 6: Documents -->
                    <div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">
                        <h6>Documents Tab</h6>
                        <p>This is the documents tab content.</p>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="document_type" class="form-label">Document Type</label>
                                    <select class="form-select" id="document_type" name="document_type">
                                        <option value="">Select Type</option>
                                        <option value="floor_plan">Floor Plan</option>
                                        <option value="brochure">Brochure</option>
                                        <option value="contract">Contract</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="documents" class="form-label">Documents</label>
                                    <input type="file" class="form-control" id="documents" name="documents[]" multiple accept=".pdf,.doc,.docx">
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-upload me-1"></i> Upload Documents
                            </button>
                        </div>
                    </div>

                    <!-- Tab 7: Address -->
                    <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab">
                        <h6>Address Tab</h6>
                        <p>This is the address tab content.</p>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="street_address" class="form-label">Street Address</label>
                                    <input type="text" class="form-control" id="street_address" name="street_address" value="{{ $property->street_address }}" placeholder="Enter full street address">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="postal_code" class="form-label">Postal Code</label>
                                    <input type="text" class="form-control" id="postal_code" name="postal_code" value="{{ $property->postal_code }}" placeholder="Postal code">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="latitude" class="form-label">Latitude</label>
                                    <input type="number" class="form-control" id="latitude" name="latitude" step="any" value="{{ $property->latitude }}" placeholder="e.g., 40.4168">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="longitude" class="form-label">Longitude</label>
                                    <input type="number" class="form-control" id="longitude" name="longitude" step="any" value="{{ $property->longitude }}" placeholder="e.g., -3.7038">
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-content-save me-1"></i> Save Address
                            </button>
                        </div>
                    </div>

                    <!-- Tab 8: Contacts -->
                    <div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
                        <h6>Contacts Tab</h6>
                        <p>This is the contacts tab content.</p>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_name" class="form-label">Contact Name</label>
                                    <input type="text" class="form-control" id="contact_name" name="contact_name" value="{{ $property->contact_name }}" placeholder="Contact person name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_email" class="form-label">Contact Email</label>
                                    <input type="email" class="form-control" id="contact_email" name="contact_email" value="{{ $property->contact_email }}" placeholder="contact@example.com">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_phone" class="form-label">Contact Phone</label>
                                    <input type="tel" class="form-control" id="contact_phone" name="contact_phone" value="{{ $property->contact_phone }}" placeholder="+34 123 456 789">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="listed_by" class="form-label">Listed By</label>
                                    <select class="form-select" id="listed_by" name="listed_by">
                                        <option value="">Select Agent</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->name }}" {{ $property->listed_by == $user->name ? 'selected' : '' }}>{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="contact_notes" class="form-label">Contact Notes</label>
                                    <textarea class="form-control" id="contact_notes" name="contact_notes" rows="3" placeholder="Additional contact information...">{{ $property->contact_notes }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="button" class="btn btn-primary">
                                <i class="mdi mdi-content-save me-1"></i> Save Contacts
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script-bottom')
<script>
console.log('Edit page loaded');

// Simple form submission handler
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, setting up forms...');
    
    // Handle Details form submission
    const detailsForm = document.getElementById('detailsForm');
    if (detailsForm) {
        detailsForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            
            fetch('{{ route("properties.update", $property->id) }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => {
                if (response.redirected) {
                    window.location.href = response.url;
                    return;
                }
                return response.json();
            })
            .then(data => {
                if (data && data.success) {
                    showAlert('success', data.message);
                } else if (data && !data.success) {
                    showAlert('error', data.message || 'Failed to update property details');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('error', 'An error occurred while updating');
            });
        });
    }
    
    // Test tab functionality
    const tabButtons = document.querySelectorAll('#propertyTabs .nav-link');
    console.log('Found tab buttons:', tabButtons.length);
    
    tabButtons.forEach((button, index) => {
        console.log(`Tab ${index}:`, button.id, button.textContent.trim());
        
        button.addEventListener('click', function(e) {
            console.log('Tab clicked:', this.id);
        });
    });
});

// Show alert function
function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);

    // Auto remove after 5 seconds
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}
</script>
@endsection