@extends('office.layouts.master')

@section('title', __('lang.office_profile'))

@section('content')
    <x-ui.breadcrumb :items="[__('lang.office_profile') => null]" />
    <h1 class="h5 fw-semibold mb-4">{{ __('lang.office_profile') }}</h1>

    @if (session('status'))
        <x-alert variant="success" class="py-2 mb-3">{{ session('status') }}</x-alert>
    @endif

    <div class="row g-3 mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body d-flex align-items-center gap-3 flex-wrap">
                    @if ($office->logoUrl())
                        <img src="{{ $office->logoUrl() }}" alt="" class="rounded-3 border flex-shrink-0" style="width: 4.5rem; height: 4.5rem; object-fit: cover;">
                    @else
                        <div class="d-flex align-items-center justify-content-center rounded-3 bg-primary-subtle text-primary flex-shrink-0" style="width: 4.5rem; height: 4.5rem;">
                            <i class="bi bi-building fs-3"></i>
                        </div>
                    @endif

                    <div class="flex-grow-1">
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="h5 fw-bold mb-0">{{ $office->name }}</span>
                            <span class="badge {{ $office->is_active ? 'text-bg-success' : 'text-bg-secondary' }}">
                                {{ __('lang.'.($office->is_active ? 'active' : 'inactive')) }}
                            </span>
                        </div>
                        @if ($office->cr_number)
                            <div class="text-muted small mt-1">{{ __('lang.cr_number') }}: {{ $office->cr_number }}</div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-body">
                    <h2 class="h6 fw-semibold mb-3">{{ __('lang.office_contact_hint') }}</h2>

                    <div class="d-flex align-items-center gap-3 border rounded-3 p-3 mb-2">
                        <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary flex-shrink-0" style="width: 2.5rem; height: 2.5rem;">
                            <i class="bi bi-telephone"></i>
                        </div>
                        <div class="flex-grow-1" style="min-width: 0;">
                            <div class="text-muted small">{{ __('lang.phone') }}</div>
                            <div class="fw-semibold text-truncate" dir="ltr">{{ $office->phone ?: '-' }}</div>
                        </div>
                        <button type="button" class="btn btn-sm btn-light border flex-shrink-0" data-bs-toggle="modal" data-bs-target="#change-phone-modal">
                            {{ __('lang.change') }}
                        </button>
                    </div>

                    <div class="d-flex align-items-center gap-3 border rounded-3 p-3">
                        <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary flex-shrink-0" style="width: 2.5rem; height: 2.5rem;">
                            <i class="bi bi-envelope"></i>
                        </div>
                        <div class="flex-grow-1" style="min-width: 0;">
                            <div class="text-muted small">{{ __('lang.email') }}</div>
                            <div class="fw-semibold text-truncate" dir="ltr">{{ $office->email ?: '-' }}</div>
                        </div>
                        <button type="button" class="btn btn-sm btn-light border flex-shrink-0" data-bs-toggle="modal" data-bs-target="#change-email-modal">
                            {{ __('lang.change') }}
                        </button>
                    </div>

                    <p class="text-muted small mb-0 mt-3">
                        <i class="bi bi-shield-check me-1"></i>{{ __('lang.office_contact_change_hint') }}
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card">
                <div class="card-body">
                    <h2 class="h6 fw-semibold mb-3">{{ __('lang.office_details') }}</h2>

                    <form method="POST" action="{{ route('office.profile.update') }}" enctype="multipart/form-data">
                        @csrf

                        <x-ui.input name="name" :label="__('lang.office_name_label')" :value="$office->name" required />
                        <x-ui.input name="cr_number" :label="__('lang.cr_number')" :value="$office->cr_number" />

                        <div class="row g-3 mb-3">
                            <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) == $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) == $area->id)>{{ $area->name_ar }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

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

                        <div class="mb-3">
                            <label class="form-label d-block">{{ __('lang.office_logo') }}</label>
                            <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="mb-3">
                            <label for="notes" class="form-label">{{ __('lang.notes') }}</label>
                            <textarea name="notes" id="notes" class="form-control" rows="3">{{ old('notes', $office->notes) }}</textarea>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <x-button type="submit" variant="primary">{{ __('lang.save') }}</x-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="change-phone-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('office.profile.contact.request') }}">
                    @csrf
                    <input type="hidden" name="field" value="phone">
                    <div class="modal-header border-0 pb-0">
                        <button type="button" class="btn-close ms-0 me-auto order-1" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center pt-0">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-3 bg-primary-subtle text-primary mb-3" style="width: 3rem; height: 3rem;">
                            <i class="bi bi-telephone fs-4"></i>
                        </div>
                        <h5 class="modal-title mb-3">{{ __('lang.office_change_identifier_phone') }}</h5>
                        <div class="text-start">
                            <x-phone-input name="identifier" country-code-name="country_code" :label="__('lang.office_phone_label')" required />
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('lang.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('lang.office_send_otp') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="change-email-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('office.profile.contact.request') }}">
                    @csrf
                    <input type="hidden" name="field" value="email">
                    <div class="modal-header border-0 pb-0">
                        <button type="button" class="btn-close ms-0 me-auto order-1" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center pt-0">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-3 bg-primary-subtle text-primary mb-3" style="width: 3rem; height: 3rem;">
                            <i class="bi bi-envelope fs-4"></i>
                        </div>
                        <h5 class="modal-title mb-3">{{ __('lang.office_change_identifier_email') }}</h5>
                        <div class="text-start">
                            <x-ui.input name="identifier" type="email" :label="__('lang.office_email_label')" required />
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('lang.cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('lang.office_send_otp') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if ($errors->any() && old('field'))
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var modalId = @json(old('field')) === 'phone' ? 'change-phone-modal' : 'change-email-modal';
                new bootstrap.Modal(document.getElementById(modalId)).show();
            });
        </script>
    @endif
@endsection

@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