@extends('layout.app')
@section('title', 'Payments | Waiting Room')

@section('content')
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArM4yJH86mM-XJOWByTJBzYoX3XGbs2yk&libraries=places&callback=initMap"
        async defer></script>

    <style>
        #companylogo-img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            /* Ensures the image fits within the box */
            border-radius: 50%;
            /* Makes the image round */
        }

        .upload-link {
            position: relative;
            cursor: pointer;
        }

        .upload-link input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
    </style>

    <div class="row">
        <div class="col-xl-3 col-lg-4">
            <div class="clearfix">
                <div class="card card-bx author-profile m-b30">
                    <div class="card-body">
                        <div class="p-5">
                            <div class="author-profile">
                                <div class="author-media">
                                    <img id="companylogo-img"
                                        src="{{ asset(Auth::guard('business')->user()->image ?? 'assets/images/profile/pic1.jpg') }}"
                                        alt="">
                                    <div class="upload-link" title="" data-bs-toggle="tooltip" data-placement="right"
                                        data-original-title="update">
                                        <input type="file" class="update-file" accept="image/png, image/gif, image/jpeg"
                                            onchange="previewImage(event)">
                                        <i class="fa fa-camera"></i>
                                        <input
                                            class="form-control position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer"
                                            name="image" id="profile_image_{{ Auth::guard('business')->user()->id }}"
                                            type="file" accept="image/png, image/gif, image/jpeg"
                                            onchange="previewImage(event)">
                                    </div>
                                </div>
                                <div class="author-info">
                                    <h6 class="title">{{ Auth::guard('business')->user()->name }}</h6>
                                    <span>Doctor</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-lg-8">
            <div class="card  card-bx m-b30">
                <div class="card-header">
                    <h6 class="title">Account Settings</h6>
                </div>
                <form class="profile-form" id="editUser">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6 m-b30">
                                <label class="form-label">Clinic Name</label>
                                <input type="text" class="form-control" name="name"
                                    value="{{ Auth::guard('business')->user()->name }}" placeholder="Medical Clinic">
                            </div>
                            <div class="col-sm-6 m-b30">
                                <label class="form-label">Email</label>
                                <input type="text" class="form-control" name="email"
                                    value="{{ Auth::guard('business')->user()->email }}" placeholder="mail@gmail.com">
                            </div>
                            <div class="col-sm-6 m-b30">
                                <label class="form-label">No of Doctors</label>
                                <input type="number" name="no_of_providers" class="form-control"
                                    value="{{ Auth::guard('business')->user()->no_of_providers }}">
                            </div>
                            <div class="col-md-12 mt-3">
                                <div class="mb-3">
                                    <label for="exampleInputEmail1">Address</label>
                                    <input id="pac-input" name="address"
                                        value="{{ Auth::guard('business')->user()->location }}" class="form-control"
                                        type="text" placeholder="Enter a location">
                                    <div id="map" style="height: 300px;"></div>
                                    <input type="hidden" id="latitude" name="latitude"
                                        value="{{ Auth::guard('business')->user()->lat }}">
                                    <input type="hidden" id="longitude" name="longitude"
                                        value="{{ Auth::guard('business')->user()->long }}">
                                </div>
                            </div>
                            <div class="col-sm-6 m-b30">
                                <label class="form-label">Change Password</label>
                                <input type="password" name="password" class="form-control" placeholder="***********">
                            </div>
                            <div class="col-sm-6 m-b30">
                                <label class="form-label">Confirm Password</label>
                                <input type="password" name="password_confirmation" class="form-control"
                                    placeholder="***********">
                            </div>

                        </div>
                    </div>
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <div class="card-footer">
                        <button id="editUserBtn" class="btn btn-primary">UPDATE</button>
                    </div>

                </form>
            </div>
        </div>
    </div>

@endsection

@section('custom-script')

    <script>
        function initMap() {
            const storedLat = parseFloat(document.getElementById('latitude').value);
            const storedLng = parseFloat(document.getElementById('longitude').value);

            // Set a fallback location to UAE if no coordinates are stored
            const defaultLocation = {
                lat: 23.4241,
                lng: 53.8478
            };

            const initialLocation = (storedLat && storedLng) ? {
                lat: storedLat,
                lng: storedLng
            } : defaultLocation;

            const map = new google.maps.Map(document.getElementById("map"), {
                center: initialLocation,
                zoom: (storedLat && storedLng) ? 17 : 8, // Zoom in closer if editing an existing location
                mapTypeControl: false,
            });

            const input = document.getElementById("pac-input");
            const autocomplete = new google.maps.places.Autocomplete(input);

            autocomplete.bindTo("bounds", map);

            const infowindow = new google.maps.InfoWindow();
            const marker = new google.maps.Marker({
                map: map,
                position: initialLocation,
                visible: true
            });

            // If there's a stored location, display it in the info window
            if (storedLat && storedLng) {
                infowindow.setContent("{{ Auth::guard('business')->user()->address }}");
                infowindow.open(map, marker);
            }

            autocomplete.addListener("place_changed", () => {
                infowindow.close();
                marker.setVisible(false);

                const place = autocomplete.getPlace();

                if (!place.geometry || !place.geometry.location) {
                    window.alert("No details available for input: '" + place.name + "'");
                    return;
                }

                // Set marker position and make it visible
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                // Update map center and zoom
                map.setCenter(place.geometry.location);
                map.setZoom(17);

                // Display the address and place details
                infowindow.setContent(place.formatted_address);
                infowindow.open(map, marker);

                // Update hidden input fields with latitude and longitude
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        }

        // Load the map
        document.addEventListener("DOMContentLoaded", function() {
            initMap();
        });
    </script>

    <script>
        $(document).ready(function() {
            $("#editUser").on('submit', function(e) {
                e.preventDefault();
                const btn = $("#editUserBtn");
                let formData = new FormData(this); // Correct form data reference

                // Manually append the image input (outside the form)
                const imageInput = document.querySelector('input[name="image"]'); // Select the image input
                if (imageInput.files.length > 0) {
                    formData.append('image', imageInput.files[0]); // Append image file
                }

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });


                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.update') }}",
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    cache: false,
                    data: formData,
                    beforeSend: function() {
                        btn.prop('disabled', true);
                        btn.html(
                            '<div class="spinner-border" role="status" style="height: 14px;width: 14px;"> <span class="visually-hidden">Loading...</span> </div>'
                        );
                        $('.error-message').html('');
                    },
                    success: function(res) {

                        if (res.success) {
                            btn.prop('disabled', false).html('UPDATE');
                            notyf.success({
                                message: res.message,
                                duration: 3000
                            });
                            setTimeout(function() {
                                window.location.href = "{{ route('barbers') }}";
                            }, 2000);
                        } else {
                            btn.prop('disabled', false).html('UPDATE');
                            notyf.error({
                                message: res.message,
                                duration: 3000
                            });
                        }
                    },
                    error: function(xhr) {

                        btn.prop('disabled', false).html('UPDATE');

                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON
                            .errors; // Retrieve validation errors
                            for (let key in errors) {
                                if (errors.hasOwnProperty(key)) {
                                    notyf.error({
                                        message: errors[key][
                                        0], // Show the first error message
                                        duration: 3000
                                    });
                                }
                            }
                        } else {
                            const errors = xhr.responseJSON.message;
                            console.log(xhr.responseJSON.message);

                            notyf.error({
                                message: xhr.responseJSON.message,
                                duration: 3000
                            });
                        }
                    }
                });
            });
        });
    </script>

    <script>
        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() {
                var imgElement = document.getElementById('companylogo-img');
                imgElement.src = reader.result;
            };
            if (input.files && input.files[0]) {
                reader.readAsDataURL(input.files[0]);
            } else {
                // Set the default image if no file is selected
                document.getElementById('companylogo-img').src = "{{ asset('assets/boy.png') }}";
            }
        }
    </script>

@endsection