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

@section('content')
    <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;
        }

        .avatar-profile {
            height: 30px;
            width: 30px;
        }

        .avatar-profile i {
            font-size: 16px;
            color: #fff;
        }

        .uploadImg {
            position: absolute;
            right: -15px;
            bottom: -15px;
            background: var(--primary) !important;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            color: #fff;
        }
    </style>
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="javascript:void(0);"
                    style="direction: ltr;">{{ __('translations.Account') }}</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">{{ __('translations.Account Settings') }}</a></li>
        </ol>
    </div>
    <div class="card profile-overview">
        <div class="card-body d-flex">
            <div class="clearfix">
                <div class="d-inline-block position-relative me-sm-4 me-3 mb-3 mb-lg-0">
                    <!-- Image Preview -->
                    {{-- <img  src="{{ asset($businessProvider->image) }}" alt=""
                        class="rounded-4 profile-avatar"> --}}
                    <img id="profileImage" src="{{ asset($businessProvider->image ?? 'assets/profile-placeholder.jpeg') }}"
                        alt="" class="rounded-4 profile-avatar" width="100" height="100">

                    <!-- Hidden File Input -->
                    <input type="file" id="imageUpload" name="image" accept="image/*" style="display: none;">

                    <!-- Camera Icon (Clickable) -->
                    <span class="fa fa-camera uploadImg" style="cursor: pointer;"
                        onclick="document.getElementById('imageUpload').click();">
                    </span>
                </div>
            </div>

            <div class="clearfix d-xl-flex flex-grow-1">
                <div class="clearfix pe-md-5">
                    <h3 class="fw-semibold mb-1">{{ Auth::guard('business')->user()->name }}</h3>
                    <ul class="d-flex flex-wrap fs-6 align-items-center">
                        {{-- <li class="me-3 d-inline-flex align-items-center">
                            <i class="las la-user me-1 fs-18"></i>{{ $userData->specialities->first()->name }}
                        </li> --}}
                        <li class="me-3 d-inline-flex align-items-center"><i
                                class="las la-map-marker me-1 fs-18"></i>{{ Auth::guard('business')->user()->location }}
                        </li>
                        <li class="me-3 d-inline-flex align-items-center"><i
                                class="las la-envelope me-1 fs-18"></i>{{ Auth::guard('business')->user()->email }}</li>
                    </ul>
                    <div class="d-md-flex d-none flex-wrap">
                        <div class="border outline-dashed rounded p-3 d-flex align-items-center me-3 mt-3">
                            <div
                                class="avatar avatar-profile bg-primary text-primary rounded d-flex align-items-center justify-content-center">
                                <i class="fa-solid fa fa-dollar-sign"></i>
                            </div>
                            <div class="clearfix ms-3">
                                <h3 class="mb-0 fw-semibold lh-1">${{ $totalEarning }}</h3>
                                <span class="fs-14">{{ __('translations.Total Earnings') }}</span>
                            </div>
                        </div>
                        <div class="border outline-dashed rounded p-3 d-flex align-items-center me-3 mt-3">
                            <div
                                class="avatar avatar-profile bg-primary text-primary rounded d-flex align-items-center justify-content-center">
                                <i class="fa-solid fa fa-user-md"></i>
                            </div>
                            <div class="clearfix ms-3">
                                <h3 class="mb-0 fw-semibold lh-1">{{ $totalDoctor }}</h3>
                                <span class="fs-14">{{ __('translations.Total Doctors') }}</span>
                            </div>
                        </div>
                        <div class="border outline-dashed rounded p-3 d-flex align-items-center me-3 mt-3">
                            <div
                                class="avatar avatar-profile bg-primary text-primary rounded d-flex align-items-center justify-content-center">
                                <i class="flaticon-381-settings-1"></i>
                            </div>
                            <div class="clearfix ms-3">
                                <h3 class="mb-0 fw-semibold lh-1">{{ $totalAppointment }}</h3>
                                <span class="fs-14">{{ __('translations.Total Appointments') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix mt-3 mt-xl-0 ms-auto d-flex flex-column col-xl-3">
                    <div class="mt-auto d-flex align-items-center">
                        <div class="clearfix me-3">
                            <span class="fw-medium text-black d-block mb-1">{{ __('translations.Progress') }}</span>
                            <p class="mb-0 d-flex">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <br />
<b>Warning</b>:  Undefined variable $percentageChange in <b>/home/webwaitingroom/public_html/resources/views/pages/settings/index.blade.php</b> on line <b>134</b><br />
                                    <!-- Upward Arrow (Profit) -->
                                    <path d="M5.83334 14.1668L14.1667 5.8335" stroke="var(--bs-success)" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5.83334 5.8335H14.1667V14.1668" stroke="var(--bs-success)" stroke-width="1.5"
                                        stroke-linecap="round" stroke-linejoin="round"></path>
                                                                    </svg>
                                <span
                                    class="<br />
<b>Warning</b>:  Undefined variable $profitOrLossClass in <b>/home/webwaitingroom/public_html/resources/views/pages/settings/index.blade.php</b> on line <b>149</b><br />
 me-1"><br />
<b>Warning</b>:  Undefined variable $percentageChange in <b>/home/webwaitingroom/public_html/resources/views/pages/settings/index.blade.php</b> on line <b>149</b><br />
<br />
<b>Warning</b>:  Undefined variable $percentageChangeFormatted in <b>/home/webwaitingroom/public_html/resources/views/pages/settings/index.blade.php</b> on line <b>149</b><br />
+%</span>
                            </p>
                        </div>
                        <div id="chartProfileProgress"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-content" id="tabContentMyProfileBottom">
        <div class="row">
            <div class="col-xl-7">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">{{ __('translations.Basic Info') }}</h6>
                    </div>
                    <div class="card-body p-0">
                        <form class="profile-form" id="editUser">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6 m-b30">
                                        <label class="form-label">{{ __('translations.Clinic Name') }}</label>
                                        <input type="text" class="form-control" name="name"
                                            value="{{ Auth::guard('business')->user()->name }}"
                                            placeholder="{{ __('translations.Medical Clinic') }}">
                                    </div>
                                    <div class="col-sm-6 m-b30">
                                        <label class="form-label">{{ __('translations.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">{{ __('translations.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">{{ __('translations.Address') }}</label>
                                            <input id="pac-input" name="address"
                                                value="{{ Auth::guard('business')->user()->location }}"
                                                class="form-control mb-3" type="text"
                                                placeholder="{{ __('translations.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">{{ __('translations.Change Password') }}</label>
                                        <input type="password" name="password" class="form-control"
                                            placeholder="***********">
                                    </div>
                                    <div class="col-sm-6 m-b30">
                                        <label class="form-label">{{ __('translations.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">{{ __('translations.UPDATE') }}</button>
                            </div>

                        </form>
                    </div>

                </div>
            </div>
            <div class="col-xl-5">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title mb-0">{{ __('translations.Upcoming Appointments') }}</h4>
                            </div>
                            <div class="card-body">
                                <div class="widget-timeline-status">
                                    <ul class="timeline">
                                        @php
                                            $border = [
                                                'border-dark',
                                                'border-success',
                                                'border-primary',
                                                'border-danger',
                                                'border-warning',
                                            ];
                                        @endphp

                                        @forelse ($latestAppointments as $key => $latestAppointment)
                                            <li>
                                                <span class="timeline-status fw-12">
                                                    {{ $latestAppointment?->created_at ? Carbon\Carbon::parse(explode(' ', $latestAppointment->created_at)[1])->format('h:i') : null }}
                                                </span>
                                                <div class="timeline-badge {{ $border[$key % count($border)] }}"></div>
                                                <div class="timeline-panel">
                                                    <span>
                                                        {{ $latestAppointment->getUser->first_name . ' ' . $latestAppointment->getUser->last_name }}
                                                        {{ __('translations.appointment with') }}
                                                        {{ $latestAppointment->Doctor->name }}
                                                    </span>
                                                </div>
                                            </li>
                                        @empty
                                            <li>{{ __('translations.No Appointment Yet') }}</li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="heading mb-0">{{ __('Deactivate Account') }}</h4>
                        </div>
                        <div class="card-body">
                            <div
                                class="alert alert-warning border-warning outline-dashed py-3 px-3 mt-1 mb-4 mb-0 text-dark d-flex align-items-center">
                                <div class="clearfix">
                                    <svg width="30" height="30" viewBox="0 0 30 30" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M15 30C18.9782 30 22.7936 28.4196 25.6066 25.6066C28.4196 22.7936 30 18.9782 30 15C30 11.0218 28.4196 7.20644 25.6066 4.3934C22.7936 1.58035 18.9782 0 15 0C11.0218 0 7.20644 1.58035 4.3934 4.3934C1.58035 7.20644 0 11.0218 0 15C0 18.9782 1.58035 22.7936 4.3934 25.6066C7.20644 28.4196 11.0218 30 15 30ZM12.6562 19.6875H14.0625V15.9375H12.6562C11.877 15.9375 11.25 15.3105 11.25 14.5312C11.25 13.752 11.877 13.125 12.6562 13.125H15.4688C16.248 13.125 16.875 13.752 16.875 14.5312V19.6875H17.3438C18.123 19.6875 18.75 20.3145 18.75 21.0938C18.75 21.873 18.123 22.5 17.3438 22.5H12.6562C11.877 22.5 11.25 21.873 11.25 21.0938C11.25 20.3145 11.877 19.6875 12.6562 19.6875ZM15 7.5C15.4973 7.5 15.9742 7.69754 16.3258 8.04918C16.6775 8.40081 16.875 8.87772 16.875 9.375C16.875 9.87228 16.6775 10.3492 16.3258 10.7008C15.9742 11.0525 15.4973 11.25 15 11.25C14.5027 11.25 14.0258 11.0525 13.6742 10.7008C13.3225 10.3492 13.125 9.87228 13.125 9.375C13.125 8.87772 13.3225 8.40081 13.6742 8.04918C14.0258 7.69754 14.5027 7.5 15 7.5Z"
                                            fill="#FF8A11" />
                                    </svg>
                                </div>
                                <div class="mx-3">
                                    <h6 class="mb-0 fw-semibold">
                                        {{ __('translations.You are deactivating your account') }}</h6>
                                    <p class="mb-0">
                                        {{ __('translations.For extra security, this requires you to confirm your email or phone number when you reset your password.') }}
                                        <a href="javascript:void(0);"
                                            class="text-warning">{{ __('translations.Learn More') }}</a>
                                    </p>
                                </div>
                            </div>
                            <div class="form-check custom-checkbox me-4 my-3 d-inline-block">
                                <input type="checkbox" class="form-check-input mb-0" id="checkboxDeactivation"
                                    required="">
                                <label class="form-check-label mb-0"
                                    for="checkboxDeactivation">{{ __('Confirm Account Deactivation') }}</label>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button id="deactivateBtn" class="btn btn-danger ms-2"
                                disabled>{{ __('Deactivate Account') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom-script')

    <script>
        document.getElementById('imageUpload').addEventListener('change', function(event) {
            const file = event.target.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('profileImage').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        document.getElementById('checkboxDeactivation').addEventListener('change', function() {
            document.getElementById('deactivateBtn').disabled = !this.checked;
        });

        document.getElementById('deactivateBtn').addEventListener('click', function() {
            fetch('{{ route('deactivate.account') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                            'content')
                    },
                    credentials: 'same-origin'
                })
                .then(response => response.json())
                .then(data => {
                    notyf.success({
                        message: data.message,
                        duration: 3000
                    });
                    setTimeout(() => {
                        if (data.message === "Account deactivated successfully") {
                            window.location.href = '{{ route('clinic-login') }}';
                        }
                    }, 3000);
                })
                .catch(error => {
                    notyf.success({
                        message: error.error,
                        duration: 3000
                    });
                    console.error('Error:', error)
                });
        });

        document.getElementById("editUser").addEventListener("submit", async function(event) {
            event.preventDefault();
            const form = event.target;
            const formData = new FormData(form);

            // Manually append the image file from the file input (outside the form)
            const imageInput = document.getElementById("imageUpload");
            if (imageInput.files.length > 0) {
                formData.append("image", imageInput.files[0]);
            }

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            try {
                const response = await fetch("{{ route('update.settings') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": csrfToken,
                        "Accept": "application/json"
                    },
                    body: formData
                });

                const result = await response.json();

                if (response.ok) {
                    notyf.success({
                        message: "Profile updated successfully!",
                        duration: 3000
                    });
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                } else {
                    notyf.error({
                        message: result.message,
                        duration: 3000
                    });
                }
            } catch (error) {
                console.error("Error:", error);
                notyf.error({
                    message: "An error occurred. Please try again.",
                    duration: 3000
                });
            }
        });
    </script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArM4yJH86mM-XJOWByTJBzYoX3XGbs2yk&libraries=places&callback=initMap"
        async defer></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();
            });
        }

        $(document).ready(function() {
            var chartProfileProgress = function() {
                var options = {
                    series: [{
                        name: 'Net Profit',
                        data: @json($monthlyDataValues), // Correct order
                    }],
                    chart: {
                        type: 'area',
                        height: 100,
                        toolbar: {
                            show: false
                        },
                        zoom: {
                            enabled: false
                        },
                        sparkline: {
                            enabled: true
                        }
                    },
                    colors: ['var(--primary)'],
                    dataLabels: {
                        enabled: false
                    },
                    legend: {
                        show: false
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        curve: 'straight',
                        colors: ['var(--primary)']
                    },
                    grid: {
                        show: false,
                        borderColor: '#eee',
                        padding: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: -1
                        }
                    },
                    xaxis: {
                        categories: @json($monthlyDataKeys), // Correct order
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        },
                        labels: {
                            show: true,
                            style: {
                                fontSize: '12px'
                            }
                        },
                        tooltip: {
                            enabled: false
                        }
                    },
                    yaxis: {
                        show: false
                    },
                    fill: {
                        opacity: 0.9,
                        colors: 'var(--primary)',
                        type: 'gradient',
                        gradient: {
                            colorStops: [{
                                    offset: 0,
                                    color: 'var(--primary)',
                                    opacity: .4
                                },
                                {
                                    offset: 0.6,
                                    color: 'var(--primary)',
                                    opacity: .4
                                },
                                {
                                    offset: 100,
                                    color: 'white',
                                    opacity: 0
                                }
                            ]
                        }
                    },
                    tooltip: {
                        enabled: true,
                        style: {
                            fontSize: '12px'
                        },
                        y: {
                            formatter: function(val) {
                                return "$" + val;
                            }
                        }
                    }
                };

                if ($('#chartProfileProgress').length > 0) {
                    var handleProfileProgress = new ApexCharts(
                        document.querySelector("#chartProfileProgress"), options
                    );
                    handleProfileProgress.render();
                }
            }
            chartProfileProgress();
        });
    </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