@push('page_css')
<style>
.custom-tabs {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
}
.custom-tabs .nav-link {
    border-radius: 8px;
    font-weight: 700;
    color: #6c757d;
    padding: 12px 20px;
    margin-left: 5px; /* RTL margin */
    transition: all 0.3s ease;
    border: none;
}
.custom-tabs .nav-link i {
    font-size: 1.1em;
}
.custom-tabs .nav-link.active {
    background-color: #007bff;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,123,255,0.2);
}
.custom-tabs .nav-link:hover:not(.active) {
    background-color: #f1f3f5;
    color: #007bff;
}
.tab-pane .card {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>
@endpush

<!-- مكتبات Leaflet و البحث -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@latest/dist/geosearch.css" />
<!-- ClockPicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" />

<div class="col-12">
    <!-- Tabs Nav -->
    <ul class="nav nav-pills mb-4 custom-tabs" id="property-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="basic-tab" data-toggle="pill" href="#basic-info" role="tab" aria-controls="basic-info" aria-selected="true">
                <i class="fas fa-info-circle mr-2"></i>المعلومات الأساسية
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="location-tab" data-toggle="pill" href="#location-info" role="tab" aria-controls="location-info" aria-selected="false">
                <i class="fas fa-map-marker-alt mr-2"></i>الموقع الجغرافي
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="stay-tab" data-toggle="pill" href="#stay-info" role="tab" aria-controls="stay-info" aria-selected="false">
                <i class="fas fa-bed mr-2"></i>تفاصيل الإقامة
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="visibility-tab" data-toggle="pill" href="#visibility-info" role="tab" aria-controls="visibility-info" aria-selected="false">
                <i class="fas fa-eye mr-2"></i>إعدادات الظهور والحالة
            </a>
        </li>
    </ul>

    <!-- Tabs Content -->
    <div class="tab-content" id="property-tabs-content">
        
        <!-- Tab 1: Basic Info -->
        <div class="tab-pane fade show active" id="basic-info" role="tabpanel" aria-labelledby="basic-tab">
            <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px;">
                <div class="card-body">
                    <div class="row">
                        <!-- Host / Owner (Only on Create) -->
                        @if(!isset($tblPropertyDetail) && isset($hosts))
                        <div class="form-group col-12 mb-3">
                            {{ html()->label('مالك العقار (Host):', 'created_by_id')->class('font-weight-bold') }}
                            {{ html()->select('created_by_id', $hosts)->class('form-control select2')->placeholder('ابحث واختر المالك...')->required() }}
                        </div>
                        @endif
                        <!-- Title -->
                        <div class="form-group col-md-6 mb-3">
                            {{ html()->label(__('اسم العقار'), 'title')->class('form-label font-weight-bold') }}
                            {{ html()->text('title')->class('form-control form-control-lg')->placeholder('أدخل اسم العقار') }}
                        </div>
                        <!-- Property Type -->
                        <div class="form-group col-md-6 mb-3">
                            {{ html()->label('نوع العقار:', 'property_type')->class('form-label font-weight-bold') }}
                            @php
                                $propertyTypes = \App\Models\PropertyType::where('is_active', 1)->pluck('name_ar', 'id');
                            @endphp
                            {{ html()->select('property_type', $propertyTypes)->class('form-control form-control-lg')->id('property_type')->placeholder('اختر نوع العقار') }}
                        </div>
                        <!-- Description -->
                        <div class="form-group col-12 mb-3">
                            {{ html()->label(__('الوصف'), 'description')->class('form-label font-weight-bold') }}
                            {{ html()->textarea('description')->class('form-control')->attribute('rows', 4)->placeholder('وصف تفصيلي للعقار...') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 2: Location Info -->
        <div class="tab-pane fade" id="location-info" role="tabpanel" aria-labelledby="location-tab">
            <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px;">
                <div class="card-body">
                    <div class="row">
                        <!-- City -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('المدينة'), 'tbl_city_id')->class('form-label font-weight-bold') }}
                            {{ html()->select('tbl_city_id', $cities->pluck('name', 'id'))->class('form-control form-control-lg')->id('citySelect')->placeholder('اختر المدينة') }}
                        </div>
                        <!-- Zone -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('المنطقة'), 'tbl_zone_id')->class('form-label font-weight-bold') }}
                            {{ html()->select('tbl_zone_id', isset($zones) ? $zones : [])->class('form-control form-control-lg')->id('zoneSelect')->placeholder('اختر المنطقة') }}
                        </div>
                        <!-- Is Near Sea -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('هل قريب من البحر؟'), 'is_near_see')->class('form-label font-weight-bold') }}
                            <div class="segmented-control">
                                <input type="radio" name="is_near_see" id="near_sea_yes" value="1" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->is_near_see == 1) || !isset($tblPropertyDetail) ? 'checked' : '' }}>
                                <label class="option-yes" for="near_sea_yes"><i class="fas fa-water mr-1"></i> نعم</label>
                                <input type="radio" name="is_near_see" id="near_sea_no" value="2" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->is_near_see == 2) ? 'checked' : '' }}>
                                <label class="option-no" for="near_sea_no"><i class="fas fa-times mr-1"></i> لا</label>
                            </div>
                        </div>
                        <!-- Meter Distance -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('المسافة من البحر'), 'meter_distance')->class('form-label font-weight-bold') }}
                            <div class="input-group input-group-lg">
                                {{ html()->number('meter_distance')->class('form-control')->id('meter_distance')->required()->placeholder('مثال: 500') }}
                                <div class="input-group-append">
                                    <span class="input-group-text bg-light text-primary border-left-0 font-weight-bold">متر</span>
                                </div>
                            </div>
                        </div>
                        <!-- Hidden Fields for Lat/Lng -->
                        <div class="d-none">
                            {{ html()->text('latitude')->id('latitude') }}
                            {{ html()->text('longitude')->id('longitude') }}
                        </div>
                        <!-- Map -->
                        <div class="form-group col-12 mt-2">
                            {{ html()->label(__('حدد الموقع بدقة على الخريطة'), 'map')->class('form-label font-weight-bold') }}
                            <div id="map" style="height: 400px; border-radius: 12px; border: 2px solid #e9ecef; position: relative; z-index: 1; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 3: Stay Details -->
        <div class="tab-pane fade" id="stay-info" role="tabpanel" aria-labelledby="stay-tab">
            <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px;">
                <div class="card-body">
                    <div class="row">
                        <!-- Check-in Time -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('وقت الدخول (Check-in)'), 'check_in_time')->class('form-label font-weight-bold') }}
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light text-primary border-left-0"><i class="fas fa-sign-in-alt"></i></span>
                                </div>
                                {{ html()->text('check_in_time')->class('form-control timepicker')->style('font-size: 1.2rem; font-weight: 700; text-align: center; direction: ltr; letter-spacing: 2px;')->attribute('autocomplete', 'off')->placeholder('14:00') }}
                            </div>
                        </div>
                        <!-- Check-out Time -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('وقت الخروج (Check-out)'), 'check_out_time')->class('form-label font-weight-bold') }}
                            <div class="input-group input-group-lg">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light text-danger border-left-0"><i class="fas fa-sign-out-alt"></i></span>
                                </div>
                                {{ html()->text('check_out_time')->class('form-control timepicker')->style('font-size: 1.2rem; font-weight: 700; text-align: center; direction: ltr; letter-spacing: 2px;')->attribute('autocomplete', 'off')->placeholder('12:00') }}
                            </div>
                        </div>
                        <!-- Adult Count -->
                        <div class="form-group col-md-6 mb-3">
                            {{ html()->label(__('عدد الأشخاص البالغين المسموح'), 'adult_count')->class('form-label font-weight-bold') }}
                            {{ html()->number('adult_count')->class('form-control form-control-lg')->attribute('min', 1) }}
                        </div>
                        <!-- Children Count -->
                        <div class="form-group col-md-6 mb-3">
                            {{ html()->label(__('عدد الأطفال المسموح'), 'children_count')->class('form-label font-weight-bold') }}
                            {{ html()->number('children_count')->class('form-control form-control-lg')->attribute('min', 0) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 4: Visibility & Status -->
        <div class="tab-pane fade" id="visibility-info" role="tabpanel" aria-labelledby="visibility-tab">
            <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px;">
                <div class="card-body">
                    <div class="row">
                        <!-- State ID -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('حالة النشر'), 'state_id')->class('form-label font-weight-bold') }}
                            <div class="segmented-control">
                                <input type="radio" name="state_id" id="state_active" value="1" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->state_id == 1) || !isset($tblPropertyDetail) ? 'checked' : '' }}>
                                <label class="option-yes" for="state_active"><i class="fas fa-play mr-1"></i> مفعل (متاح)</label>
                                <input type="radio" name="state_id" id="state_inactive" value="0" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->state_id == 0) ? 'checked' : '' }}>
                                <label class="option-no" for="state_inactive"><i class="fas fa-stop mr-1"></i> غير مفعل (مخفي)</label>
                            </div>
                        </div>
                        <!-- Is Verified -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('توثيق العقار'), 'is_verified')->class('form-label font-weight-bold') }}
                            <div class="segmented-control">
                                <input type="radio" name="is_verified" id="verified_yes" value="1" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->is_verified == 1) ? 'checked' : '' }}>
                                <label class="option-yes" for="verified_yes"><i class="fas fa-check-circle mr-1"></i> موثّق بالشارة الزرقاء</label>
                                <input type="radio" name="is_verified" id="verified_no" value="0" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->is_verified == 0) || !isset($tblPropertyDetail) ? 'checked' : '' }}>
                                <label class="option-neutral" for="verified_no"><i class="fas fa-times-circle mr-1"></i> غير موثّق</label>
                            </div>
                        </div>
                        <!-- Name Visibility Override -->
                        <div class="form-group col-md-6 mb-4">
                            {{ html()->label(__('ظهور اسم العقار للعملاء (API)'), 'name_visibility_override')->class('form-label font-weight-bold') }}
                            {{ html()->select('name_visibility_override', [0 => 'وراثة (حسب الإعدادات الافتراضية)', 1 => 'إظهار الاسم الحقيقي إجبارياً', 2 => 'إخفاء الاسم الحقيقي إجبارياً (عرض اسم النظام)'], isset($tblPropertyDetail) ? $tblPropertyDetail->name_visibility_override : 0)->class('form-control form-control-lg') }}
                            <small class="form-text text-muted mt-2"><i class="fas fa-info-circle mr-1"></i>هذا الخيار يتجاوز إعدادات النظام العامة لعرض الاسم الحقيقي.</small>
                        </div>
                        <!-- Show in Home -->
                        <div class="form-group col-md-3 mb-4">
                            {{ html()->label('عرض في الصفحة الرئيسية', 'show_in_home_display')->class('form-label font-weight-bold') }}
                            <div class="custom-control custom-switch mt-2">
                                <!-- Hidden input to ensure value is sent even if unchecked -->
                                <input type="hidden" name="show_in_home" value="0">
                                <input type="checkbox" name="show_in_home" class="custom-control-input" id="show_in_home" value="1" {{ (isset($tblPropertyDetail) && $tblPropertyDetail->show_in_home) ? 'checked' : '' }}>
                                <label class="custom-control-label font-weight-bold text-muted" for="show_in_home" style="cursor: pointer; padding-right: 2.2rem;">تفعيل بالرئيسية</label>
                            </div>
                        </div>
                        <!-- Home Order -->
                        <div class="form-group col-md-3 mb-4">
                            {{ html()->label('الترتيب', 'home_order')->class('form-label font-weight-bold') }}
                            {{ html()->number('home_order', isset($tblPropertyDetail) ? $tblPropertyDetail->home_order : 1)->class('form-control form-control-lg')->attribute('min', 1)->attribute('max', 10) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="card shadow-sm border-0 mb-4" style="border-radius: 12px; background-color: #f8f9fa;">
        <div class="card-body d-flex justify-content-between align-items-center">
            <a href="{{ URL::previous() }}" class="btn btn-light font-weight-bold text-muted px-4 py-2 border" style="border-radius: 8px;">
                <i class="fas fa-arrow-right mr-2"></i>إلغاء والرجوع
            </a>
            <button type="submit" class="btn btn-primary font-weight-bold px-5 py-2 shadow-sm btn-lg" style="border-radius: 8px;">
                <i class="fas fa-save mr-2"></i> حفظ بيانات العقار
            </button>
        </div>
    </div>
</div>

@push('third_party_scripts')
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-geosearch@latest/dist/bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // When tabs change, invalidate map size because Leaflet struggles with hidden containers
    $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
        if(e.target.id === 'location-tab') {
            setTimeout(function() {
                map.invalidateSize();
            }, 100);
        }
    });

    const latInput = document.getElementById('latitude');
    const lngInput = document.getElementById('longitude');
    const defaultLat = latInput.value ? parseFloat(latInput.value) : 32.8872;
    const defaultLng = lngInput.value ? parseFloat(lngInput.value) : 13.1913;
    const map = L.map('map').setView([defaultLat, defaultLng], 12);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    
    let marker = L.marker([defaultLat, defaultLng], { draggable: true }).addTo(map);
    
    map.on('click', function (e) {
        const { lat, lng } = e.latlng;
        marker.setLatLng([lat, lng]);
        latInput.value = lat.toFixed(6);
        lngInput.value = lng.toFixed(6);
    });
    
    marker.on('dragend', function (e) {
        const { lat, lng } = e.target.getLatLng();
        latInput.value = lat.toFixed(6);
        lngInput.value = lng.toFixed(6);
    });
    
    function updateMarker() {
        const lat = parseFloat(latInput.value);
        const lng = parseFloat(lngInput.value);
        if (!isNaN(lat) && !isNaN(lng)) {
            marker.setLatLng([lat, lng]);
            map.setView([lat, lng], 14);
        }
    }
    latInput.addEventListener('change', updateMarker);
    lngInput.addEventListener('change', updateMarker);
    
    const provider = new window.GeoSearch.OpenStreetMapProvider();
    const searchControl = new window.GeoSearch.GeoSearchControl({
        provider: provider,
        style: 'bar',
        showMarker: false,
        showPopup: false,
        autoClose: true,
        keepResult: false,
        searchLabel: '🔍 ابحث عن مدينة أو موقع...',
    });
    map.addControl(searchControl);
    
    map.on('geosearch/showlocation', function (e) {
        const { x: lng, y: lat } = e.location;
        marker.setLatLng([lat, lng]);
        map.setView([lat, lng], 14);
        latInput.value = lat.toFixed(6);
        lngInput.value = lng.toFixed(6);
    });
    
    // Form Validation for Distance
    const form = document.querySelector('form');
    const distanceInput = document.getElementById('meter_distance');
    if(form && distanceInput) {
        form.addEventListener('submit', function(e) {
            if (!distanceInput.value) {
                // switch to location tab if distance is missing
                $('#location-tab').tab('show');
                
                setTimeout(() => {
                    alert('يجب إدخال المسافة من البحر.');
                    distanceInput.focus();
                }, 300);
                
                e.preventDefault();
            }
        });
    }
});

$(function () {
    $('.timepicker').clockpicker({
        placement: 'bottom',
        align: 'left',
        autoclose: true,
        'default': 'now'
    });
});
</script>
@endpush