@push('third_party_stylesheets')
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@endpush
@php
    $materialIcons = [
        'wifi', 'ac_unit', 'pool', 'tv', 'local_parking', 'kitchen', 'fitness_center', 'spa', 'pets', 'restaurant', 
        'local_bar', 'local_cafe', 'room_service', 'elevator', 'accessible', 'smoke_free', 'smoking_rooms', 'child_care', 
        'business_center', 'meeting_room', 'airport_shuttle', 'local_laundry_service', 'iron', 'dry_cleaning', 'beach_access', 
        'casino', 'golf_course', 'hot_tub', 'outdoor_grill', 'fire_extinguisher', 'security', 'first_aid', 'medical_services',
        'king_bed', 'bathtub', 'shower', 'bed', 'crib', 'deck', 'balcony', 'living', 'yard', 'water', 'electric_car', 
        'camera_outdoor', 'sports_tennis', 'sports_esports', 'mosque', 'storefront', 'directions_car'
    ];
    $currentIcon = isset($item) && $item->icon ? $item->icon : '';
    if($currentIcon && !in_array($currentIcon, $materialIcons)) {
        $materialIcons[] = $currentIcon;
    }
@endphp
<div class="col-md-6 mb-3">
    <div class="form-group">
        {!! Form::label('title', __('الاسم') . ':', ['class' => 'font-weight-bold text-dark']) !!}
        {!! Form::text('title', null, ['class' => 'form-control', 'maxlength' => 255, 'placeholder' => 'أدخل الاسم...']) !!}
    </div>
</div>
<div class="col-md-6 mb-3">
    <div class="form-group">
        {!! Form::label('icon', __('الأيقونة') . ':', ['class' => 'font-weight-bold text-dark']) !!}
        <select name="icon" id="material-icon-picker" class="form-control" style="width: 100%;">
            <option value="">اختر أيقونة...</option>
            @foreach($materialIcons as $icon)
                <option value="{{ $icon }}" data-icon="{{ $icon }}" {{ $currentIcon == $icon ? 'selected' : '' }}>
                    {{ $icon }}
                </option>
            @endforeach
        </select>
        <small class="text-muted d-block mt-1">اختر أيقونة من قائمة Google Material Icons.</small>
    </div>
</div>
<div class="col-md-6 mb-3">
    <div class="form-group">
        {!! Form::label('image_file', __('صورة مخصصة (اختياري)') . ':', ['class' => 'font-weight-bold text-dark']) !!}
        <div class="custom-file">
            {!! Form::file('image_file', ['class' => 'custom-file-input', 'id' => 'customFile']) !!}
            <label class="custom-file-label" for="customFile" data-browse="استعراض">اختر ملف الصورة...</label>
        </div>
        <small class="text-muted d-block mt-1">في حال رفع صورة، سيتم تجاهل الأيقونة واستخدام الصورة بدلاً منها.</small>
        @if(isset($item) && $item->image_file)
            <div class="mt-2">
                <img src="{{ Storage::url($item->image_file) }}" alt="{{ $item->title }}" class="img-thumbnail" width="50">
            </div>
        @endif
    </div>
</div>
<div class="col-md-12 mb-4">
    <div class="form-group">
        {!! Form::label('property_types', __('أنواع العقارات المتاح لها') . ':', ['class' => 'font-weight-bold text-dark']) !!}
        <select name="property_types[]" class="form-control select2 w-100" multiple="multiple">
            @foreach($propertyTypes as $type)
                @php
                    $selected = isset($item) && $item->propertyTypes->contains('id', $type->id) ? 'selected' : '';
                @endphp
                <option value="{{ $type->id }}" {{ $selected }}>{{ $type->name_ar }} ({{ $type->name_en }})</option>
            @endforeach
        </select>
        <small class="text-muted d-block mt-1"><i class="fa fa-info-circle mr-1"></i>اختر أنواع العقارات التي ترغب بظهور هذا العنصر ضمنها أثناء إضافة عقار جديد.</small>
    </div>
</div>
<div class="col-md-12 mb-3">
    <div class="form-group">
        {!! Form::label('state_id', __('الحالة') . ':', ['class' => 'font-weight-bold text-dark d-block mb-2']) !!}
        <label class="custom-switch-label">
            {!! Form::checkbox('state_id', 1, (!isset($item) || $item->state_id == 1) ? true : false) !!}
            <span class="slider"></span>
            <span class="font-weight-bold" id="state-text">{{ (!isset($item) || $item->state_id == 1) ? 'مفعل' : 'غير مفعل' }}</span>
        </label>
        <small class="text-muted d-block mt-1">تحديد ما إذا كان هذا العنصر سيظهر في التطبيق أم لا.</small>
    </div>
</div>
<div class="col-md-12 mt-4 text-right">
    <a href="{{ route($routePrefix . '.index') }}" class="btn btn-light font-weight-bold text-muted px-4 py-2 border mr-2">إلغاء</a>
    <button type="submit" class="btn btn-primary font-weight-bold px-4 py-2 shadow-sm">حفظ البيانات</button>
</div>
{!! Form::hidden('created_on', date('Y-m-d H:i:s')) !!}
{!! Form::hidden('created_by_id', auth()->id() ?? 1) !!}
@push('third_party_scripts')
<script>
    $(document).ready(function() {
        var $picker = $('#material-icon-picker');
        if ($picker.hasClass("select2-hidden-accessible")) {
            $picker.select2('destroy');
        }
        $picker.select2({
            templateResult: function (icon) {
                if (!icon.id) { return icon.text; }
                return '<span style="display: flex; align-items: center; gap: 8px;"><i class="material-icons" style="font-size: 20px; color: #555;">' + icon.id + '</i><span>' + icon.id + '</span></span>';
            },
            templateSelection: function (icon) {
                if (!icon.id) { return icon.text; }
                return '<span style="display: flex; align-items: center; gap: 8px;"><i class="material-icons" style="font-size: 20px; color: #555;">' + icon.id + '</i><span>' + icon.id + '</span></span>';
            },
            placeholder: 'ابحث عن أيقونة...',
            allowClear: true,
            width: '100%',
            escapeMarkup: function(m) { return m; }
        });
        // Custom File Input Label
        $('.custom-file-input').on('change',function(){
            var fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').html(fileName);
        });
        // Switch Text Toggle
        const stateCheckbox = document.querySelector('input[name="state_id"]');
        const stateText = document.getElementById('state-text');
        if(stateCheckbox) {
            stateCheckbox.addEventListener('change', function() {
                stateText.textContent = this.checked ? 'مفعل' : 'غير مفعل';
            });
        }
    });
</script>
@endpush