@extends('layouts/layoutMaster')

@section('title', __('Profile'))

<!-- Vendor Styles -->
@section('vendor-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss', 'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss'])
@endsection

<!-- Page Styles -->
@section('page-style')
    @vite(['resources/assets/vendor/scss/pages/page-profile.scss'])

    @vite(['resources/assets/vendor/libs/leaflet/leaflet.scss'])
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

@endsection




@section('content')
    <h4 class="fw-bold py-3 mb-1">
        <span class="text-muted fw-light"></span> {{ __('Profile') }}
    </h4>


    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="user-profile-header-banner">
                    <img src="{{ asset('assets/img/pages/profile-banner.png') }}" alt="Banner image" class="rounded-top">
                </div>
                <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-4">
                    <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
                        <img src="{{ $user?->getFirstMediaUrl('image') }}" alt="user image"
                            class="d-block h-auto ms-0 ms-sm-4 rounded admin-profile-img" width="200" height="200">
                    </div>
                    <div class="flex-grow-1 mt-3 mt-sm-5">
                        <div
                            class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-4 flex-md-row flex-column gap-4">
                            <div class="user-profile-info">
                                <h4>{{ $user->name }}</h4>
                                <ul
                                    class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
                                    <li class="list-inline-item">
                                        <i class='ti ti-calendar'></i>
                                        {{ __('Joined') . ' ' . $user->created_at }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ Header -->


    <!-- User Profile Content -->
    <div class="row">
        <div class="col-12">
            <!-- About User -->
            <div class="card mb-4">
                <div class="card-header">
                    <div class="nav-align-top">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button type="button" class="nav-link waves-effect waves-light active" role="tab"
                                    data-bs-toggle="tab" data-bs-target="#profile" aria-controls="navs-pills-top-home"
                                    aria-selected="false" tabindex="-1">{{ __('Profile') }}</button>
                            </li>

                           
                        </ul>
                    </div>
                </div>
                <div class="card-body">
                    <x-any-errors></x-any-errors>
                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="profile" role="tabpanel">

                            <form class="form" method="post" enctype="multipart/form-data"
                                action="{{ route('dashboard.profile.update') }}">
                                @csrf
                                <x-user-form :user="$user"></x-user-form>

                                <div class="row">
                                    <div class="col-6">
                                        <label for="image" class="form-label">{{ __('Image') }}</label>
                                        <input type="file" id="image" name="image" class="form-control"
                                            placeholder="{{ __('Image') }}" />
                                        <img class="img-fluid rounded mb-3 pt-1 mt-4"
                                            src="{{ $user->getFirstMediaUrl('image') }}" height="200" width="300"
                                            alt="User avatar">
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <button type="submit" class="btn btn-primary me-1">{{ __('Submit') }}</button>
                                </div>
                            </form>
                        </div>

                       
                    </div>
                </div>
            </div>
            <!--/ About User -->
        </div>

    </div>
@endsection


<!-- Vendor Scripts -->
@section('vendor-script')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'])
@endsection

<!-- Page Scripts -->
@section('page-script')
    @vite(['resources/assets/js/pages-profile.js'])
    @vite(['resources/js/_partials/user.js'])


    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <script>
        const dragMapVar = document.getElementById('dragMap');
        if (dragMapVar) {
            const map = L.map('dragMap').setView([25.299337565234087, 51.52587890625001], 12);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            var searchControl = L.Control.geocoder({
                defaultMarkGeocode: false
            }).on('markgeocode', function(e) {
                var latlng = e.geocode.center;
                map.flyTo(latlng, 12);
                // You can do additional actions here, such as adding a marker
            }).addTo(map);

            // Check if latitude and longitude input fields have values
            var latitude = $('#latitude').val();
            var longitude = $('#longitude').val();
            console.log('latitude');
            console.log(latitude);
            console.log(longitude);
            if (latitude && longitude) {
                console.log('yes');
                // Set initial marker location from input fields
                var initialLocation = [parseFloat(latitude), parseFloat(longitude)];
                map.setView(initialLocation, 12);

                var marker = L.marker(initialLocation, {
                    draggable: true
                }).addTo(map);

                marker.on('dragend', function(event) {
                    var markerLocation = marker.getLatLng();
                    console.log(markerLocation.lat, markerLocation.lng);
                    // Update hidden input fields in the form with these values
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });

                map.on('click', function(event) {
                    marker.setLatLng(event.latlng);
                });



            } else {
                // Try to get the user's location
                // navigator.geolocation.getCurrentPosition(
                // function(position) {
                // Success, center the map on the user's location
                var userLocation = [25.299337565234087, 51.52587890625001];
                $('#latitude').val(25.299337565234087);
                $('#longitude').val(51.52587890625001);
                map.setView(userLocation, 12);

                // Add a marker at the user's location
                var marker = L.marker(userLocation, {
                    draggable: true
                }).addTo(map);

                marker.on('dragend', function(event) {
                    var markerLocation = marker.getLatLng();
                    console.log(markerLocation.lat, markerLocation.lng);
                    // Update hidden input fields in the form with these values
                    $('#latitude').val(markerLocation.lat);
                    $('#longitude').val(markerLocation.lng);
                });

                map.on('click', function(event) {
                    marker.setLatLng(event.latlng);
                });


            }

            // );
        }
    </script>




    <script>
        $(document).ready(function() {
            $('#cities').trigger('change');

            $('#cities').on('change', function() {
                console.log('City selection changed');
                var selectedCity = $(this).find(':selected');
                var regions = selectedCity.data('regions');
                console.log('Regions data:', regions);

                var regionsSelect = $('#regions');
                console.log(regionsSelect);
                regionsSelect.empty();

                if (regions && regions.length > 0) {
                    regionsSelect.append(
                        '<option value="" disabled selected>Select Value</option>'
                    ); // Add the default option
                    $.each(regions, function(index, region) {
                        regionsSelect.append('<option value="' + region.id + '">' + region.name +
                            '</option>');
                    });
                } else {
                    regionsSelect.append(
                        '<option value="" disabled selected>No regions available</option>'
                    ); // Add a placeholder option
                }

                regionsSelect.trigger('change'); // Trigger change event if you need it for other logic
            });
        });
    </script>

    <script>
        $('.nav-item').on('click', function() {
            setTimeout(function() {
                window.dispatchEvent(new Event("resize"));
            }, 500);

        });
    </script>
@endsection