@extends('layouts.master')

@section('title') 
{{ __('realestate.edit_unit') ?? 'تعديل الوحدة' }} 
@endsection

@section('css')
<style>
    .card-custom { border: none; border-radius: 12px; box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); }
    .section-title { font-size: 1.1rem; font-weight: 700; color: #4e73df; margin-bottom: 1.2rem; border-bottom: 2px solid #f8f9fc; padding-bottom: 8px; }
    .form-group-custom { background: #f8f9fc; padding: 15px; border-radius: 10px; margin-bottom: 15px; border-right: 4px solid #4e73df; transition: all 0.3s ease; }
    .form-group-custom:hover { background: #f1f3f9; }
    .form-label { font-size: 0.85rem; color: #5a5c69; font-weight: 700; display: block; margin-bottom: 5px; }
    .form-control { border-radius: 8px; border: 1px solid #d1d3e2; padding: 10px 15px; height: auto; }
    .form-control:focus { border-color: #4e73df; box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25); }
    .btn-custom { border-radius: 8px; font-weight: 600; padding: 8px 20px; }
    .media-card { transition: 0.3s; border-radius: 10px; overflow: hidden; }
    .media-card:hover { transform: scale(1.03); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
</style>
@endsection

@section('page-header')
<div class="breadcrumb-header justify-content-between mb-4">
    <h4 class="content-title mb-0 text-primary font-weight-bold">
        <i class="fas fa-edit mr-2"></i> {{ __('realestate.edit_unit') ?? 'تعديل الوحدة' }}: <span class="text-dark">#{{ $unit->unit_number }}</span>
    </h4>
</div>
@endsection

@section('content')
<div class="container-fluid py-2">
    @if ($errors->any())
        <div class="alert alert-danger border-0 shadow-sm rounded-lg mb-4">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li><i class="fas fa-exclamation-circle mr-1"></i> {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card card-custom mb-4">
        <div class="card-body p-4">
            <form action="{{ route('units.update', $unit->id) }}" method="POST" enctype="multipart/form-data" autocomplete="off">
                @csrf
                @method('PUT')
                
                <!-- القسم الأول: العقار ورقم الوحدة -->
                <div class="section-title">
                    <i class="fas fa-building mr-2"></i> {{ __('realestate.basic_info') ?? 'المعلومات الرئيسية والعقار' }}
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-city mr-1 text-primary"></i> {{ __('realestate.properties') }} <span class="text-danger">*</span></label>
                            <select name="property_id" class="form-control" required>
                                <option value="">{{ __('realestate.choose_property') ?? 'اختر العقار...' }}</option>
                                @foreach($properties as $property)
                                    <option value="{{ $property->id }}" {{ (old('property_id', $unit->property_id) == $property->id) ? 'selected' : '' }}>
                                        {{ $property->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-door-open mr-1 text-primary"></i> {{ __('realestate.unit_number') }} <span class="text-danger">*</span></label>
                            <input type="text" name="unit_number" class="form-control" value="{{ old('unit_number', $unit->unit_number) }}" required>
                        </div>
                    </div>
                </div>

                <!-- القسم الثاني: المعلومات المالية ونوع الوحدة -->
                <div class="section-title mt-3">
                    <i class="fas fa-file-invoice-dollar mr-2"></i> {{ __('realestate.financial_details') ?? 'الخصائص والبيانات المالية' }}
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-home mr-1 text-secondary"></i> {{ __('realestate.unit_type') }}</label>
                            <select name="unit_category" class="form-control">
                                <option value="" disabled>{{ __('realestate.choose_unit_type') }}</option>
                                @foreach(\App\Models\UnitType::all() as $type)
                                    <option value="{{ $type->id }}" {{ (old('unit_category', $unit->unit_category) == $type->id) ? 'selected' : '' }}>{{ $type->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-paint-roller mr-1 text-secondary"></i> {{ __('realestate.finishing_type') }}</label>
                            <select name="finishing_type" class="form-control">
                                @foreach(__('realestate.finishing_types_list') as $key => $value)
                                    <option value="{{ $value }}" {{ (old('finishing_type', $unit->finishing_type) == $value) ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-calendar-alt mr-1 text-secondary"></i> {{ __('realestate.payment_period') }}</label>
                            <select name="payment_method" class="form-control">
                                @foreach(__('realestate.payment_period_options') as $key => $value)
                                    <option value="{{ $value }}" {{ (old('payment_method', $unit->payment_method) == $value) ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-money-bill-wave mr-1 text-success"></i> {{ __('realestate.annual_rent') }} <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" step="0.01" name="annual_rent" class="form-control" value="{{ old('annual_rent', $unit->annual_rent) }}" placeholder="0.00" required>
                                <div class="input-group-append"><span class="input-group-text bg-light font-weight-bold">{{ __('realestate.sar') }}</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom" style="border-right-color: #1cc88a;">
                            <label class="form-label"><i class="fas fa-toggle-on mr-1 text-success"></i> {{ __('realestate.status') }} <span class="text-danger">*</span></label>
                            <select name="status" class="form-control" required>
                                <option value="1" {{ (old('status', $unit->status) == '1' || old('status', $unit->status) == 'active') ? 'selected' : '' }}>{{ __('realestate.active') }}</option>
                                <option value="0" {{ (old('status', $unit->status) == '0' || old('status', $unit->status) == 'inactive') ? 'selected' : '' }}>{{ __('realestate.inactive') }}</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- القسم الثالث: التقسيمات الداخلية والمرافق -->
                <div class="section-title mt-3">
                    <i class="fas fa-th-large mr-2"></i> {{ __('realestate.rooms_and_utilities') }}
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-layer-group mr-1 text-info"></i> {{ __('realestate.floor_number') }}</label>
                            <input type="text" name="floor_number" class="form-control" value="{{ old('floor_number', $unit->floor_number) }}" placeholder="{{ __('realestate.floor_placeholder') }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-bed mr-1 text-info"></i> {{ __('realestate.rooms_count') }}</label>
                            <input type="number" name="rooms_count" class="form-control" value="{{ old('rooms_count', $unit->rooms_count) }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-utensils mr-1 text-info"></i> {{ __('realestate.kitchens_count') }}</label>
                            <input type="number" name="kitchens_count" class="form-control" value="{{ old('kitchens_count', $unit->kitchens_count) }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group-custom">
                            <label class="form-label"><i class="fas fa-bath mr-1 text-info"></i> {{ __('realestate.bathrooms_count') }}</label>
                            <input type="number" name="bathrooms_count" class="form-control" value="{{ old('bathrooms_count', $unit->bathrooms_count) }}">
                        </div>
                    </div>
                </div>

                <!-- القسم الرابع: العدادات والتكييف والملاحظات -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group-custom" style="border-right-color: #f6c23e;">
                            <label class="form-label"><i class="fas fa-bolt mr-1 text-warning"></i> {{ __('realestate.electricity_meter') }}</label>
                            <input type="text" name="electricity_meter" class="form-control" value="{{ old('electricity_meter', $unit->electricity_meter) }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group-custom" style="border-right-color: #36b9cc;">
                            <label class="form-label"><i class="fas fa-tint mr-1 text-info"></i> {{ __('realestate.water_meter') }}</label>
                            <input type="text" name="water_meter" class="form-control" value="{{ old('water_meter', $unit->water_meter) }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group-custom" style="border-right-color: #4e73df;">
                            <label class="form-label"><i class="fas fa-snowflake mr-1 text-primary"></i> {{ __('realestate.ac_status') }}</label>
                            <select name="ac_status" class="form-control">
                                @foreach(__('realestate.ac_options') as $key => $value)
                                    <option value="{{ $value }}" {{ (old('ac_status', $unit->ac_status) == $value) ? 'selected' : '' }}>{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group-custom" style="border-right-color: #4e73df;">
                            <label class="form-label"><i class="fas fa-fan mr-1 text-primary"></i> {{ __('realestate.ac_count') }}</label>
                            <input type="number" name="ac_count" class="form-control" value="{{ old('ac_count', $unit->ac_count) }}">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group-custom" style="border-right-color: #6c757d;">
                            <label class="form-label"><i class="fas fa-clipboard-list mr-1 text-secondary"></i> {{ __('realestate.additional_specifications') }}</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="{{ __('realestate.notes_placeholder') }}">{{ old('description', $unit->description) }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- القسم الخامس: إدارة المرفقات الحالية والجديدة -->
                @if($unit->images->count() > 0)
                    <div class="section-title mt-4">
                        <i class="fas fa-images mr-2"></i> {{ __('realestate.existing_media') ?? 'المرفقات الحالية' }}
                    </div>
                    <div class="row mb-4">
                        @foreach($unit->images as $img)
                            <div class="col-md-3 mb-3">
                                <div class="media-card border shadow-sm bg-white p-1 text-center">
                                    <a href="{{ asset('storage/' . $img->file_path) }}" target="_blank">
                                        <img src="{{ asset('storage/' . $img->file_path) }}" class="img-fluid rounded w-100" style="height: 130px; object-fit: cover;">
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="form-group-custom mt-3" style="border-right-color: #e74a3b;">
                    <label class="form-label"><i class="fas fa-cloud-upload-alt mr-1 text-danger"></i> {{ __('realestate.unit_media') }} <small class="text-muted">(إضافة مرفقات أو صور جديدة)</small></label>
                    <input type="file" name="media[]" class="form-control-file border p-2 rounded w-100 bg-white" multiple accept="image/*,video/*">
                </div>

                <!-- أزرار الحفظ والرجوع -->
                <div class="text-center mt-5 pt-2 border-top">
                    <button type="submit" class="btn btn-success btn-custom px-5 shadow-sm">
                        <i class="fas fa-save mr-1"></i> {{ __('realestate.update') ?? 'تعديل وحفظ' }}
                    </button>
                    <a href="{{ route('units.index') }}" class="btn btn-secondary btn-custom px-4 shadow-sm ml-2">
                        <i class="fas fa-arrow-right mr-1"></i> {{ __('realestate.back') ?? 'رجوع' }}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection