@php
    $office = $office ?? null;
@endphp

<div class="row g-3">
    <div class="col-md-8">
        <x-ui.input name="name" :label="__('lang.office_name')" :value="$office->name ?? null" required />
    </div>

    <div class="col-md-4">
        <x-ui.input name="cr_number" :label="__('lang.cr_number')" :value="$office->cr_number ?? null" />
    </div>

    <div class="col-md-6">
        <x-ui.input name="phone" :label="__('lang.phone')" :value="$office->phone ?? null" />
    </div>

    <div class="col-md-6">
        <x-ui.input name="email" type="email" :label="__('lang.email')" :value="$office->email ?? null" />
    </div>

    <div class="col-12">
        <p class="text-muted small mb-0">{{ __('lang.office_contact_hint') }}</p>
    </div>

    <div class="col-md-4">
        <label for="region_filter" class="form-label">{{ __('lang.region') }}</label>
        <select id="region_filter" class="js-searchable-select js-cascade-filter form-select" data-cascade-target="city_id">
            <option value="">{{ __('lang.select_option') }}</option>
            @foreach ($cities->pluck('region')->filter()->unique('id') as $region)
                <option value="{{ $region->id }}" @selected(old('city_id', $office->city->region_id ?? null) == $region->id)>{{ $region->name_ar }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label for="city_id" class="form-label">{{ __('lang.city') }}</label>
        <select name="city_id" id="city_id" class="js-searchable-select js-cascade-filter form-select" data-cascade-target="area_id">
            <option value="">{{ __('lang.select_option') }}</option>
            @foreach ($cities as $city)
                <option value="{{ $city->id }}" data-parent-id="{{ $city->region_id }}" @selected(old('city_id', $office->city_id ?? null) == $city->id)>{{ $city->name_ar }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4">
        <label for="area_id" class="form-label">{{ __('lang.area') }}</label>
        <select name="area_id" id="area_id" class="js-searchable-select form-select">
            <option value="">{{ __('lang.select_option') }}</option>
            @foreach ($areas as $area)
                <option value="{{ $area->id }}" data-parent-id="{{ $area->city_id }}" @selected(old('area_id', $office->area_id ?? null) == $area->id)>{{ $area->name_ar }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-12">
        <label for="address" class="form-label">{{ __('lang.address') }}</label>
        <textarea name="address" id="address" class="form-control" rows="2">{{ old('address', $office->address ?? null) }}</textarea>
    </div>

    <div class="col-md-4">
        <label class="form-label d-block">{{ __('lang.office_logo') }}</label>
        @if ($office?->logoUrl())
            <img src="{{ $office->logoUrl() }}" alt="" class="rounded-3 border mb-2 d-block" style="width: 4rem; height: 4rem; object-fit: cover;">
        @endif
        <input type="file" name="logo" class="form-control form-control-sm" accept="image/*">
        @error('logo') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
    </div>

    <div class="col-12">
        <div class="form-check form-switch form-check-reverse">
            <input
                type="checkbox"
                class="form-check-input"
                role="switch"
                name="is_active"
                id="is_active"
                value="1"
                {{ old('is_active', $office->is_active ?? true) ? 'checked' : '' }}
            >
            <label class="form-check-label" for="is_active">{{ __('lang.active') }}</label>
        </div>
    </div>

    <div class="col-12">
        <label for="notes" class="form-label">{{ __('lang.notes') }}</label>
        <textarea name="notes" id="notes" class="form-control" rows="3">{{ old('notes', $office->notes ?? null) }}</textarea>
    </div>
</div>

@push('styles')
    <link rel="stylesheet" href="{{ asset('admin/vendor/tom-select/tom-select.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/css/tom-select-rtl.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('admin/vendor/tom-select/tom-select.complete.min.js') }}"></script>
    <script src="{{ asset('admin/js/location-select.js') }}"></script>
@endpush