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

@section('content')

    <style>
        .table thead tr th:last-child {
            text-align: left !important;
        }

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

        .avatar-profile i {
            font-size: 16px;
            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);">{{ __('View Profile') }}</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">
                    <img src="{{ asset($userData->image ?? 'assets/profile-placeholder.jpeg') }}" alt=""
                        class="rounded-4 profile-avatar">
                </div>
            </div>
            <div class="clearfix d-xl-flex flex-grow-1">
                <div class="clearfix pe-md-5">
                    <h3 class="fw-semibold mb-1">{{ $userData->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>
                            {{-- @dd($userData) --}}
                            <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">0</h3>
                                <span class="fs-14">{{ __('translations.Profile Visits') }}</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 with dynamic stroke color and arrow direction -->
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="<br />
<b>Warning</b>:  Undefined variable $arrowDirection in <b>/home/webwaitingroom/public_html/resources/views/pages/barbers/profile.blade.php</b> on line <b>91</b><br />
" stroke="var(--<br />
<b>Warning</b>:  Undefined variable $profitOrLossClass in <b>/home/webwaitingroom/public_html/resources/views/pages/barbers/profile.blade.php</b> on line <b>91</b><br />
)"
                                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M5.83334 5.8335H14.1667V14.1668" stroke="var(--<br />
<b>Warning</b>:  Undefined variable $profitOrLossClass in <b>/home/webwaitingroom/public_html/resources/views/pages/barbers/profile.blade.php</b> on line <b>93</b><br />
)"
                                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <!-- Percentage display -->
                                <span class="<br />
<b>Warning</b>:  Undefined variable $profitOrLossClass in <b>/home/webwaitingroom/public_html/resources/views/pages/barbers/profile.blade.php</b> on line <b>97</b><br />
 me-1">
                                    <br />
<b>Warning</b>:  Undefined variable $percentageChange in <b>/home/webwaitingroom/public_html/resources/views/pages/barbers/profile.blade.php</b> on line <b>98</b><br />
<br />
<b>Warning</b>:  Undefined variable $percentageChangeFormatted in <b>/home/webwaitingroom/public_html/resources/views/pages/barbers/profile.blade.php</b> on line <b>98</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">
                        <h4 class="heading mb-0">{{ __('translations.Earnings Overview') }}</h4>
                    </div>
                    <div class="card-body pb-0">
                        <div class="row mb-2">
                            <div class="col-sm-4 col-6 mb-3">
                                <div class="bg-success-light rounded px-3 py-2 text-center">
                                    <span class="fs-14 text-success">{{ __('translations.Total Earnings') }}</span>
                                    <h3 class="mb-0 fw-semibold">$36,899</h3>
                                </div>
                            </div>
                            <div class="col-sm-4 col-6 mb-3">
                                <div class="bg-primary-light rounded px-3 py-2 text-center">
                                    <span class="fs-14 text-primary">{{ __('translations.This Month Earnings') }}</span>
                                    <h3 class="mb-0 fw-semibold">$725</h3>
                                </div>
                            </div>
                            <div class="col-sm-4 col-6 mb-3">
                                <div class="bg-danger-light rounded px-3 py-2 text-center">
                                    <span class="fs-14 text-danger">{{ __('translations.Today Earnings') }}</span>
                                    <h3 class="mb-0 fw-semibold">$291</h3>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <h4 class="heading mb-0">{{ __('translations.Overview') }}</h4>
                            <ul class="nav chart-summary-tab nav-pills" role="tablist">
                                <li class="nav-item ms-1">
                                    <a class="nav-link btn btn-light btn-sm active" data-series="agents"
                                        data-bs-toggle="tab" href="#summaryAgents"
                                        role="tab">{{ __('translations.Week') }}</a>
                                </li>
                                <li class="nav-item ms-1">
                                    <a class="nav-link btn btn-light btn-sm" data-series="clients" data-bs-toggle="tab"
                                        href="#summaryClients" role="tab">{{ __('translations.Month') }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="clearfix overflow-hidden">
                        <div id="drEarningOverviewGraph"></div>
                    </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">Upcomming 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 }}
                                                        appointment with {{ $latestAppointment->Doctor->name }}
                                                    </span>
                                                </div>
                                            </li>
                                        @empty
                                            <li>No Appointment Yet</li>
                                        @endforelse
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="col-xl-12 col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('translations.Bookings Overview') }}</h4>
                        <div class="mt-3 mt-sm-0">
                            <form id="filterForm" method="GET"
                                action="{{ route('doctor.profile', ['id' => $doctorId]) }}">
                                <input type="hidden" id="durationInput" name="duration"
                                    value="{{ request('duration', 'Yearly') }}">

                                <ul class="nav nav-tabs vacany-tabs style-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link " data-bs-toggle="tab" data-series="week" href="#week"
                                            role="tab">{{ __('translations.Weekly') }}</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" data-series="1-month" href="#1-month"
                                            role="tab">{{ __('translations.Monthly') }}</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" data-series="year"
                                            href="#year" role="tab">{{ __('translations.Yearly') }}</a>
                                    </li>
                                </ul>
                            </form>

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pb-sm-4 mb-3 d-flex flex-wrap px-3">

                            <div class="d-flex align-items-center">
                                <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                    viewBox="0 0 13 13">
                                    <rect width="13" height="13" rx="6.5" fill="#35c556" />
                                </svg>
                                <span class="text-dark fs-13 font-w500">{{ __('translations.Total Bookings') }}</span>
                            </div>
                            <div class="application d-flex align-items-center">
                                <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                    viewBox="0 0 13 13">
                                    <rect width="13" height="13" rx="6.5" fill="#3f4cfe" />
                                </svg>
                                <span class="text-dark fs-13 font-w500">{{ __('translations.Completed') }}</span>
                            </div>
                            <div class="application d-flex align-items-center">
                                <svg class="me-1" xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                    viewBox="0 0 13 13">
                                    <rect width="13" height="13" rx="6.5" fill="#f34040" />
                                </svg>
                                <span class="text-dark fs-13 font-w500">{{ __('translations.Cancelled') }}</span>
                            </div>
                        </div>
                        <div id="morris_profile_chart" class="morris_chart_height"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('custom-script')

    <script src="{{ asset('assets/js/dashboard/profile.js') }}"></script>
    <script src="{{ asset('assets/vendor/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/morris/morris.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/morris/morris-init.js') }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const filterForm = document.getElementById('filterForm');
            const durationInput = document.getElementById('durationInput');
            const tabs = document.querySelectorAll('.nav-link[data-series]');

            // Handle tab click event
            tabs.forEach(tab => {
                tab.addEventListener('click', (event) => {
                    const duration = tab.getAttribute('data-series');

                    // Update input value and submit form
                    durationInput.value = duration;
                    filterForm.submit();
                });

                // Set active class based on input value
                if (durationInput.value === tab.getAttribute('data-series')) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });

            // Ensure the correct tab is active on page load
            const activeTab = Array.from(tabs).find(tab => tab.getAttribute('data-series') === durationInput.value);
            if (activeTab) {
                activeTab.classList.add('active');
            }
        });


        var monthlyDataValues = @json($monthlyDataValues);
        var monthlyDataKeys = @json($monthlyDataKeys);
        var percentageChange = @json($percentageChangeFormatted);
        var profitOrLossClass = @json($profitOrLossClass);
        $(document).ready(function() {
            var chartProfileProgress = function() {
                var options = {
                    series: [{
                        name: 'Earnings',
                        data: monthlyDataValues, // Use dynamic data
                    }],
                    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
                    },
                    xaxis: {
                        categories: monthlyDataKeys, // Dynamic months
                        labels: {
                            show: true,
                            style: {
                                fontSize: '12px'
                            }
                        }
                    },
                    yaxis: {
                        show: false
                    },
                    fill: {
                        opacity: 0.9,
                        type: 'gradient',
                        gradient: {
                            colorStops: [{
                                    offset: 0,
                                    color: 'var(--primary)',
                                    opacity: 0.4
                                },
                                {
                                    offset: 100,
                                    color: 'white',
                                    opacity: 0
                                }
                            ],
                        }
                    },
                    tooltip: {
                        enabled: true,
                        y: {
                            formatter: function(val) {
                                return "$" + val;
                            }
                        }
                    }
                };

                if ($('#chartProfileProgress').length > 0) {
                    var handleProfileProgress = new ApexCharts(
                        document.querySelector("#chartProfileProgress"),
                        options
                    );
                    handleProfileProgress.render();
                }

                // Show profit/loss percentage dynamically
                $("#profitLossIndicator").html(
                    `<span class="${profitOrLossClass}">${percentageChange}%</span>`
                );
            };

            chartProfileProgress();
            morrisAreaChart({!! json_encode($morrisChartData) !!});
            earningOverviewChart();

        });

        var earningOverviewChart = function() {

            var chartWidth = $("#drEarningOverviewGraph").width();

            var options = {
                series: [{
                    name: 'Net Profit',
                    data: [700, 650, 680, 590, 720, 610, 760, 530, 610],
                }, ],
                chart: {
                    type: 'area',
                    height: 280,
                    width: chartWidth + 55,
                    toolbar: {
                        show: false,
                    },
                    offsetX: -45,
                    zoom: {
                        enabled: false
                    },
                },
                colors: [
                    'var(--primary)'
                ],
                dataLabels: {
                    enabled: false,
                },
                legend: {
                    show: false,
                },
                stroke: {
                    show: true,
                    width: 2,
                    curve: 'straight',
                    colors: ['var(--primary)'],
                },
                grid: {
                    show: true,
                    borderColor: '#eee',

                    xaxis: {
                        lines: {
                            show: true
                        }
                    },
                    yaxis: {
                        lines: {
                            show: false
                        }
                    },
                },
                yaxis: {
                    show: true,
                    tickAmount: 4,
                    min: 0,
                    max: 800,
                    labels: {
                        offsetX: 50,
                    }
                },
                xaxis: {
                    categories: [
                        'May',
                        'June',
                        'July',
                        'Aug',
                        'Sep',
                        'Oct',
                        'Nov',
                        'Dec'
                    ],
                    overwriteCategories: undefined,

                    axisBorder: {
                        show: false,
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        show: true,
                        offsetX: 25,

                        style: {
                            fontSize: '12px',
                        }
                    },
                },
                fill: {
                    opacity: 0.5,
                    colors: 'var(--primary)',
                    type: 'gradient',
                    gradient: {
                        colorStops: [{
                                offset: 0.6,
                                color: 'var(--primary)',
                                opacity: .2
                            },
                            {
                                offset: 0.6,
                                color: 'var(--primary)',
                                opacity: .15
                            },
                            {
                                offset: 100,
                                color: 'var(--primary)',
                                opacity: 0
                            },
                        ],
                    }
                },
                tooltip: {
                    enabled: true,
                    style: {
                        fontSize: '12px',
                    },
                    y: {
                        formatter: function(val) {
                            return "$" + val + ""
                        }
                    }
                }
            };

            if ($('#drEarningOverviewGraph').length > 0) {
                var handleLineChartSecuritySummary = new ApexCharts(document.querySelector("#drEarningOverviewGraph"),
                    options);
                handleLineChartSecuritySummary.render();
            }

            $(".chart-summary-tab .nav-link").on('click', function() {
                var seriesType = $(this).attr('data-series');
                var columnData = [];
                switch (seriesType) {
                    case "agents":
                        columnData = [700, 650, 680, 590, 720, 610, 760, 530, 610];
                        break;
                    case "clients":
                        columnData = [680, 620, 540, 680, 640, 655, 730, 580, 620];
                        break;
                    default:
                        columnData = [700, 650, 680, 590, 720, 610, 760, 530, 610];
                }
                handleLineChartSecuritySummary.updateSeries([{
                    name: "Net Profit",
                    data: columnData
                }]);
            })

        }

        var duration = '{{ request('duration') }}';


        var morrisAreaChart = function(morrisChartData) {
            Morris.Area({
                element: 'morris_profile_chart',
                data: morrisChartData.data,
                lineColors: ['#f93a0b', 'rgb(16, 202, 147)', 'rgb(255, 92, 0)'],
                xkey: 'period',
                ykeys: ['total_bookings', 'completed_bookings', 'cancelled_bookings'],
                labels: ['Total Bookings', 'Completed', 'Cancelled'],
                pointSize: 0,
                lineWidth: 0,
                resize: true,
                fillOpacity: 0.95,
                behaveLikeLine: true,
                gridLineColor: 'transparent',
                hideHover: 'auto',
                xLabelFormat: function(d) {
                    if (duration === 'week' || duration === '1-month') {
                        var data = morrisChartData.data.find(item => item.period ===
                            `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`
                        );
                        return data ? data.formatted_period : '';
                    } else {
                        var data = morrisChartData.data.find(item => item.period ===
                            `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}`);
                        return data ? data.formatted_period : '';
                    }
                }
                // xLabelFormat: function(d) {
                //     var data = morrisChartData.data.find(item => item.period ===
                //         `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}`);
                //     return data ? data.formatted_period : '';
                // }
            });
        };
    </script>
@endsection