@extends('layouts.portal')

@section('title', __('profile.title') . ' — ' . config('app.name'))
@section('page_title', __('profile.title'))

@section('content')
    <form method="POST" action="{{ route('portal.profile.update') }}" class="card-sc max-w-2xl">
        @csrf
        @method('PUT')

        <div class="grid gap-4 md:grid-cols-2">
            <div class="md:col-span-2">
                <label for="name" class="field-label">{{ __('profile.name') }}</label>
                <input id="name" name="name" type="text" required value="{{ old('name', $user->name) }}" class="field-input">
            </div>
            <div>
                <label for="email" class="field-label">{{ __('profile.email') }}</label>
                <input id="email" name="email" type="email" required value="{{ old('email', $user->email) }}" class="field-input">
            </div>
            <div>
                <label for="user_phone" class="field-label">{{ __('profile.phone') }}</label>
                <input id="user_phone" type="tel" dir="ltr" value="+{{ $user->phone }}" class="field-input bg-ink-50" disabled>
                <p class="mt-1 text-xs text-ink-400">{{ __('profile.phone_note') }}</p>
            </div>
            <div>
                <label for="job_title" class="field-label">{{ __('profile.job_title') }}</label>
                <input id="job_title" name="job_title" type="text" value="{{ old('job_title', $user->job_title) }}" class="field-input">
            </div>
            <div>
                <label for="license_number" class="field-label">{{ __('profile.license_number') }}</label>
                <input id="license_number" name="license_number" type="text" value="{{ old('license_number', $user->license_number) }}" class="field-input">
            </div>
            <div>
                <label for="locale" class="field-label">{{ __('profile.locale') }}</label>
                <select id="locale" name="locale" class="field-input">
                    @foreach (config('smartcarb.locales') as $code => $locale)
                        <option value="{{ $code }}" @selected(old('locale', $user->locale) === $code)>{{ $locale['native'] }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        @if ($user->isConsultant())
            <div class="mt-6 border-t border-ink-100 pt-6">
                <h2 class="text-lg">{{ __('profile.clinic_location_title') }}</h2>
                <p class="mt-1 text-sm text-ink-500">{{ __('profile.clinic_location_hint') }}</p>

                <div class="mt-4">
                    <label for="clinic_address" class="field-label">{{ __('profile.clinic_address') }}</label>
                    <input id="clinic_address" name="clinic_address" type="text"
                           value="{{ old('clinic_address', $user->clinic_address) }}" class="field-input">
                </div>

                <div id="clinicMap" class="mt-3 h-72 w-full rounded-2xl border border-ink-200"></div>
                <p class="mt-2 text-xs text-ink-400">{{ __('profile.clinic_map_hint') }}</p>

                <input type="hidden" id="clinic_lat" name="clinic_lat" value="{{ old('clinic_lat', $user->clinic_lat) }}">
                <input type="hidden" id="clinic_lng" name="clinic_lng" value="{{ old('clinic_lng', $user->clinic_lng) }}">
            </div>
        @endif

        <button type="submit" class="btn-brand mt-5">{{ __('common.save') }}</button>
    </form>

    @if ($user->isConsultant())
        <div class="card-sc mt-5 max-w-2xl">
            <h2 class="text-lg">{{ __('profile.booking_link_title') }}</h2>
            <p class="mt-1 text-sm text-ink-500">{{ __('profile.booking_link_hint') }}</p>

            @php $bookingUrl = route('booking.index'); @endphp
            <div class="mt-4 flex flex-col items-center gap-4 sm:flex-row">
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data={{ urlencode($bookingUrl) }}"
                     alt="QR" width="160" height="160" class="rounded-xl border border-ink-100">
                <div class="min-w-0 flex-1">
                    <p class="break-all rounded-xl bg-ink-50 px-3 py-2 text-sm text-ink-600" dir="ltr">{{ $bookingUrl }}</p>
                    <a href="{{ $bookingUrl }}" target="_blank" class="btn-soft mt-2 inline-block no-underline">{{ __('profile.open_booking_page') }}</a>
                </div>
            </div>
        </div>
    @endif
@endsection

@if ($user->isConsultant())
    @push('head')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
    @endpush

    @push('scripts')
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapEl = document.getElementById('clinicMap');
            if (!mapEl || typeof L === 'undefined') return;

            const latInput = document.getElementById('clinic_lat');
            const lngInput = document.getElementById('clinic_lng');
            const startLat = parseFloat(latInput.value) || 24.7136; // Riyadh fallback
            const startLng = parseFloat(lngInput.value) || 46.6753;

            const map = L.map(mapEl).setView([startLat, startLng], latInput.value ? 15 : 11);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
            }).addTo(map);

            let marker = latInput.value ? L.marker([startLat, startLng], { draggable: true }).addTo(map) : null;

            function setMarker(lat, lng) {
                latInput.value = lat.toFixed(7);
                lngInput.value = lng.toFixed(7);

                if (marker) {
                    marker.setLatLng([lat, lng]);
                } else {
                    marker = L.marker([lat, lng], { draggable: true }).addTo(map);
                    marker.on('dragend', () => {
                        const pos = marker.getLatLng();
                        setMarker(pos.lat, pos.lng);
                    });
                }
            }

            if (marker) {
                marker.on('dragend', () => {
                    const pos = marker.getLatLng();
                    setMarker(pos.lat, pos.lng);
                });
            }

            map.on('click', (e) => setMarker(e.latlng.lat, e.latlng.lng));
        });
        </script>
    @endpush
@endif