@extends('web.profile.profile-master')
@section('profile-content')
    <div class="rs-profile-head d-flex align-items-center justify-content-between br-8 p-16 mb-16" data-bg-color="#F6F7F9">
        <div class="profile-side-bar d-xl-none">
            <img src="{{ asset('assets/frontend/img/icon/side-bar-icon.svg') }}" alt="">
        </div>
        <h2 class="rs-profile-title">
            {{ __('My Profile') }}
        </h2>
        @if ($myProfileData->email_verified_at || $myProfileData->phone_verified_at)
            <span class="text-success fw-bold">{{ __('Verified') }}</span>
        @else
            <button
                class="verifiedBtn rs-profile-verefi rs-my-page-btn rs-btn rs-btn-2 rs-product-offer-btn d-flex align-items-center justify-content-between rs-btn">
                {{ __('Get Verified') }}
            </button>
        @endif
    </div>
    <div class="rs-profile-body br-8 p-24 mb-16 p-relative pb-80" data-bg-color="#F6F7F9">
        <div class="rs-profile-info-form fix">
            <form action="{{ route('user.profile-update', $myProfileData->id) }}" method="post"
                enctype="multipart/form-data">
                @csrf
                <div class="rs-profile-img text-center mb-24">
                    <label class="rs-profile-img-add" style="cursor:pointer;">
                        <img class="br-100" src="{{ $myProfileData->profilePhotoPath ?? 'https://placehold.co/600x400' }}"
                            alt="Profile Image" id="profile_preview">
                        <input type="file" name="profile_photo" accept="image/*" class="d-none" id="profile_input">
                    </label>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-16">
                        <h4 class="rs-profile-input-title">{{ __('Name') }}</h4>
                        <input type="name" name="name" value="{{ $myProfileData->name }}"
                            placeholder="Daniel Walter Scott">
                        @error('name')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-16">
                        <h4 class="rs-profile-input-title">{{ __('Phone Number') }}</h4>
                        <input type="text" name="phone_no" value="{{ $myProfileData->phone_no }}"
                            placeholder="+8885553353535">
                        @error('phone_no')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-16">
                        <h4 class="rs-profile-input-title">{{ __('Email Address') }}</h4>
                        <input type="email" name="email" value="{{ $myProfileData->email }}"
                            placeholder="example@gmail.com">
                        @error('email')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="col-md-6 mb-16">
                        <h4 class="rs-profile-input-title">{{ __('WhatsApp No') }} <span>(Optional)</span></h4>
                        <input type="text" name="whatsapp_number" value="{{ $myProfileData->whatsapp_number }}"
                            placeholder="+8885553353535">
                        @error('whatsapp_number')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-16">
                        <h4 class="rs-profile-input-title">{{ __('Address') }}</h4>
                        <input type="text" id="locationInput" name="address" value="{{ $myProfileData->address }}"
                            placeholder="Dhaka, Bangladesh" class="form-control mb-2">
                        <small id="locationDisplay" class="text-muted d-block mb-2"></small>
                        <input type="hidden" id="latitude" name="latitude" value="{{ $myProfileData->latitude }}">
                        <input type="hidden" id="longitude" name="longitude" value="{{ $myProfileData->longitude }}">
                        <div id="map" style="height: 450px; width: 100%;" class="br-8">

                        </div>
                    </div>

                </div>

                <button type="submit" class="rs-save-btn mb-24">{{ __('Save Profile') }}</button>
            </form>
        </div>
    </div>
@endsection

@push('script')
    <script>
        document.getElementById('profile_input').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profile_preview').src = e.target.result;
                }
                reader.readAsDataURL(file);
            }

        })
    </script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        const latInput = document.querySelector('input[name="latitude"]');
        const lngInput = document.querySelector('input[name="longitude"]');
        const locationInput = document.getElementById('locationInput');
        const locationDisplay = document.getElementById('locationDisplay');

        let defaultLat = parseFloat(latInput.value) || 23.8103;
        let defaultLng = parseFloat(lngInput.value) || 90.4125;

        const map = L.map('map').setView([defaultLat, defaultLng], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        let marker = L.marker([defaultLat, defaultLng], {
            draggable: true
        }).addTo(map);

        function updateLatLngAndName(lat = null, lng = null) {
            const pos = lat && lng ? L.latLng(lat, lng) : marker.getLatLng();
            marker.setLatLng(pos);
            map.setView(pos, 13);
            latInput.value = pos.lat;
            lngInput.value = pos.lng;

            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${pos.lat}&lon=${pos.lng}`)
                .then(r => r.json())
                .then(d => {
                    const name = d.display_name || 'Unknown Location';
                    // locationDisplay.innerText = name;
                    locationInput.value = name;
                })
                .catch(() => {
                    locationDisplay.innerText = 'Unknown Location';
                });
        }

        marker.on('dragend', updateLatLngAndName);
        map.on('click', e => updateLatLngAndName(e.latlng.lat, e.latlng.lng));

        locationInput.addEventListener('change', function() {
            const q = locationInput.value;
            if (!q) return;
            fetch(`https://nominatim.openstreetmap.org/search?format=json&limit=1&q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(d => {
                    if (d.length > 0) updateLatLngAndName(parseFloat(d[0].lat), parseFloat(d[0].lon));
                });
        });

        updateLatLngAndName();
    </script>
@endpush