@extends('dashboard.parent')

@section('title', __('pages.pages'))

@section('page_name', __('pages.pages'))

@section('css')

@endsection

@section('bread_crumb')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">
            <a href="{{ route('home') }}" class="text-muted text-hover-primary">{{ __('pages.home') }}</a>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item">
            <span class="bullet bg-gray-400 w-5px h-2px"></span>
        </li>
        <!--end::Item-->
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">{{ __('pages.pages') }}</li>
        <!--end::Item-->
    </ul>
@endsection

@section('actions')

@endsection

@section('content')
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!--begin::Navbar-->
            <div class="card mb-5 mb-xl-10">
                <div class="card-body pt-9 pb-0">
                    <!--begin::Details-->
                    <div class="d-flex flex-wrap flex-sm-nowrap mb-3">
                        <!--begin::Info-->
                        <div class="flex-grow-1">
                            <!--begin::Title-->
                            <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                                <!--begin::User-->
                                <div class="d-flex flex-column">
                                    <!--begin::Name-->
                                    <div class="d-flex align-items-center mb-2">
                                        <a href="#" class="text-gray-900 text-hover-primary fs-2 fw-bold me-1">{{$page->{localizedField('name')} }}</a>
                                    </div>
                                    <!--end::Name-->
                                </div>
                                <!--end::User-->
                            </div>
                            <!--end::Title-->
                            <!--begin::Stats-->
                            <div class="d-flex flex-wrap flex-stack">
                                <!--begin::Wrapper-->
                                <div class="d-flex flex-column flex-grow-1 pe-8">
                                    <!--begin::Stats-->
                                    <div class="d-flex flex-wrap">
                                        <!--begin::Stat-->
                                        <div
                                            class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div id="total_views" class="fs-2 fw-bold">0</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-semibold fs-6 text-gray-400">{{ __('pages.total_views') }}</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                        <!--begin::Stat-->
                                        <div
                                            class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div id="average_duration" class="fs-2 fw-bold">0</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-semibold fs-6 text-gray-400">
                                                {{ __('pages.average_session_duration') }}</div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                        <!--begin::Stat-->
                                        <div
                                            class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
                                            <!--begin::Number-->
                                            <div class="d-flex align-items-center">
                                                <div id="total_clicks" class="fs-2 fw-bold">0</div>
                                            </div>
                                            <!--end::Number-->
                                            <!--begin::Label-->
                                            <div class="fw-semibold fs-6 text-gray-400">{{ __('pages.total_clicks') }}
                                            </div>
                                            <!--end::Label-->
                                        </div>
                                        <!--end::Stat-->
                                    </div>
                                    <!--end::Stats-->
                                </div>
                                <!--end::Wrapper-->
                            </div>
                            <!--end::Stats-->
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::Details-->
                    <!--begin::Navs-->
                    <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
                        <!--begin::Nav item-->
                        <li class="nav-item mt-2">
                            <a class="nav-link text-active-primary ms-0 me-10 py-5 {{ empty($section) ? 'active' : '' }}"
                                href="{{ route('page.show', ['page' => $page->{localizedField('slug')}]) }}">{{ __('pages.user_analytics') }}</a>
                        </li>
                        <!--end::Nav item-->
                        <!--begin::Nav item-->
                        <li class="nav-item mt-2">
                            <a class="nav-link text-active-primary ms-0 me-10 py-5 @if ($section == 'paragraph') active @endif"
                                href="{{ route('page.show', ['page' => $page->{localizedField('slug')}, 'section' => 'paragraph']) }}">{{ __('pages.paragraphs') }}</a>
                        </li>
                        <!--end::Nav item-->
                        <!--begin::Nav item-->
                        <li class="nav-item mt-2">
                            <a class="nav-link text-active-primary ms-0 me-10 py-5 @if ($section == 'image') active @endif"
                                href="{{ route('page.show', ['page' => $page->{localizedField('slug')}, 'section' => 'image']) }}">{{ __('pages.page_images') }}</a>
                        </li>
                        <!--end::Nav item-->
                        <!--begin::Nav item-->
                        <li class="nav-item mt-2">
                            <a class="nav-link text-active-primary ms-0 me-10 py-5"
                                href="{{ route('page.edit', $page->{localizedField('slug')}) }}">{{ __('pages.edit') }}</a>
                        </li>
                        <!--end::Nav item-->
                    </ul>
                    <!--begin::Navs-->
                </div>
            </div>
            <!--end::Navbar-->
            <!--begin::Billing History-->
            @if ($section == 'image')
                @include('dashboard.page.details.images')
            @elseif($section == 'paragraph')
                @include('dashboard.page.details.paragraphs')
            @else
                @include('dashboard.page.details.user_analytics')
            @endif
            <!--end::Billing Address-->
        </div>
        <!--end::Content container-->
    </div>
    @if ($section == 'image')
        <!--begin::Modal - Add icon-->
        <div class="modal fade" id="kt_modal_add_user" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_add_user_header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">{{ __('pages.add_icon') }}</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal"
                            data-kt-users-modal-action="close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <form id="kt_modal_add_user_form" class="form" action="#">
                            <!--begin::Scroll-->
                            <div class="d-flex flex-column me-n7 pe-7" id="kt_modal_add_user_scroll">
                                <!--begin::Input-->
                                <input type="hidden" id="page_id" value="">
                                <div class="card-body text-center pt-0">
                                    <!--begin::Image input-->
                                    <!--begin::Image input placeholder-->
                                    <style>
                                        .icon-input-placeholder {
                                            background-image: url('{{ $course->course_icon ?? asset('assets/media/svg/files/blank-image.svg') }}');
                                        }
                                    </style>
                                    <!--end::Image input placeholder-->
                                    <!--begin::Image input-->
                                    <div class="image-input image-input-empty image-input-outline icon-input-placeholder mb-3"
                                        data-kt-image-input="true">
                                        <!--begin::Preview existing avatar-->
                                        <div class="image-input-wrapper w-150px h-150px"></div>
                                        <!--end::Preview existing avatar-->
                                        <!--begin::Label-->
                                        <label
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                            title="Change avatar">
                                            <!--begin::Icon-->
                                            <i class="bi bi-pencil-fill fs-7"></i>
                                            <!--end::Icon-->
                                            <!--begin::Inputs-->
                                            <input type="file" name="images" id="image"
                                                accept=".png, .jpg, .jpeg" />
                                            <input type="hidden" name="images_remove" />
                                            <!--end::Inputs-->
                                        </label>
                                        <!--end::Label-->
                                        <!--begin::Cancel-->
                                        <span
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                            title="Cancel avatar">
                                            <i class="bi bi-x fs-2"></i>
                                        </span>
                                        <!--end::Cancel-->
                                        <!--begin::Remove-->
                                        <span
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                            title="Remove avatar">
                                            <i class="bi bi-x fs-2"></i>
                                        </span>
                                        <!--end::Remove-->
                                    </div>
                                    <!--end::Image input-->
                                </div>
                                <!--end::Input-->
                                <!--begin::error message-->
                                <span class="error_image text-danger">
                                </span>
                                <!--end::error message-->
                            </div>
                            <!--end::Scroll-->
                            <!--begin::Actions-->
                            <div class="text-center pt-15">
                                <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal"
                                    data-kt-users-modal-action="close">{{ __('pages.cancel') }}</button>
                                <button id="kt_ecommerce_add_course_submit" type="button" class="btn btn-primary"
                                    onclick="updateImage()">
                                    <span class="indicator-label">{{ __('pages.add') }}</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - Add icon-->
    @endif

    @if ($section == 'paragraph')
        <!--begin::Modal - Add paragraph-->
        <div class="modal fade" id="kt_modal_add_paragraph" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header" id="kt_modal_add_user_header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bold">{{ __('pages.add_paragraph') }}</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal"
                            data-kt-users-modal-action="close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <form class="form">
                            <!--begin::Scroll-->
                            <div class="form-group row">
                                <input type="hidden" id="page_id" value="">

                                <div class="col-md-6">
                                    <label class="form-label">{{ __('pages.paragraphs_en') }}</label>
                                    <textarea class="form-control mb-2 no-editor" name="paragraphs_en" id="paragraphs_en"></textarea>
                                    <!--begin::error message-->
                                    <span class="error_paragraphs_en text-danger">
                                    </span>
                                    <!--end::error message-->
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">{{ __('pages.paragraphs_ar') }}</label>
                                    <textarea class="form-control mb-2 no-editor" name="paragraphs_ar" id="paragraphs_ar"></textarea>
                                    <!--begin::error message-->
                                    <span class="error_paragraphs_ar text-danger">
                                    </span>
                                    <!--end::error message-->
                                </div>
                            </div>
                            <!--end::Scroll-->
                            <!--begin::Actions-->
                            <div class="text-center pt-15">
                                <button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal"
                                    data-kt-users-modal-action="close">{{ __('pages.cancel') }}</button>
                                <button id="kt_ecommerce_add_course_submit" type="button" onclick="updateParagraph()"
                                    class="btn btn-primary">
                                    <span class="indicator-label">{{ __('pages.add') }}</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - Add paragraph-->
    @endif
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <script>
        const validation_error = "{{ __('validation.validation_error') }}";

        buttonSideBar()
        getMostViews();
        getMostPageCountriesViews();
        getPageAverageDuration();
        getPageTotalClicks();

        function buttonSideBar() {
            const button = document.getElementById('website');
            button.classList.add('here', 'show');
        }

        function clearErrorMessage() {
            const errorElements = document.querySelectorAll('[class^="error_"]');
            errorElements.forEach(element => {
                element.innerText = '';
            });
        }

        function setPageSlug(button) {
            const pageId = button.getAttribute('data-page-id');
            document.getElementById('page_id').value = pageId;
        }

        function updateImage() {
            const pageImageId = document.getElementById('page_id').value;
            let formData = new FormData();
            formData.append("image", document.getElementById('image').files[0]);

            axios.post(`/dashboard/page-image-update/${pageImageId}`, formData)
                .then(function(response) {
                    toastr.success(response.data.message);
                    location.reload();


                })
                .catch(function(error) {
                    if (error.response.status == 500) {
                        toastr.error(error.response.data.message);
                    } else {
                        toastr.error(validation_error);
                    }

                    clearErrorMessage();
                    var errors = error.response.data.errors;
                    Object.keys(errors).forEach(function(key) {
                        document.querySelector(`.error_${key}`).innerText = errors[key][0];
                        console.log('Key:', key, 'Value:', errors[key]);
                    });
                });
        }

        function updateParagraph() {
            const pageImageId = document.getElementById('page_id').value;

            axios.post(`/dashboard/page-paragraph-update/${pageImageId}`, {
                    paragraphs_en: document.getElementById('paragraphs_en').value,
                    paragraphs_ar: document.getElementById('paragraphs_ar').value,
                })
                .then(function(response) {
                    toastr.success(response.data.message);
                    location.reload();
                })
                .catch(function(error) {
                    if (error.response.status == 500) {
                        toastr.error(error.response.data.message);
                    } else {
                        toastr.error(validation_error);
                    }

                    clearErrorMessage();
                    var errors = error.response.data.errors;
                    Object.keys(errors).forEach(function(key) {
                        document.querySelector(`.error_${key}`).innerText = errors[key][0];
                        console.log('Key:', key, 'Value:', errors[key]);
                    });
                });
        }

        function getMostViews(year, month) {
            axios.get('/dashboard/tracking/page/view-pages', {
                    params: {
                        page_id: "{{ $page->id }}",
                        year,
                        month
                    }
                })
                .then(function(response) {
                    const chartElement = document.querySelector('#area_chart_pages_views');
                    if (!chartElement) {
                        console.error('❌ element #area_chart_pages_views not found');
                        return;
                    }

                    const data = response.data;

                    document.getElementById('total_views').textContent = data.total;

                    // Delete the old drawing
                    if (window.pageChart && typeof window.pageChart.destroy === 'function') {
                        window.pageChart.destroy();
                        window.pageChart = null;
                    }

                    // Charting the new data
                    const options = {
                        series: [{
                            name: "{{ __('pages.number_visits') }} ",
                            data: data.counts
                        }],
                        chart: {
                            type: 'bar',
                            height: 250,
                            toolbar: {
                                show: false
                            }
                        },
                        xaxis: {
                            categories: data.days.map(day => "{{ __('pages.day') }} " + day),
                            labels: {
                                rotate: -45,
                                style: {
                                    fontSize: '12px',
                                    colors: '#6c757d'
                                }
                            }
                        },
                        yaxis: {
                            labels: {
                                style: {
                                    fontSize: '12px',
                                    colors: '#6c757d'
                                }
                            },
                            min: 0
                        },
                        tooltip: {
                            enabled: true
                        },
                        stroke: {
                            curve: 'smooth',
                            width: 2
                        },
                        fill: {
                            gradient: {
                                enabled: true,
                                opacityFrom: 0.4,
                                opacityTo: 0.1
                            }
                        },
                        grid: {
                            borderColor: '#e9ecef',
                            strokeDashArray: 5
                        }
                    };

                    window.pageChart = new ApexCharts(chartElement, options);
                    window.pageChart.render();
                })
                .catch(function(error) {
                    console.error('❌ Error fetching page views data:', error);
                });
        }

        function filterChart() {
            const year = document.querySelector('#year').value;
            const month = document.querySelector('#month').value;
            getMostViews(year, month);
            getMostPageCountriesViews(year, month);
            getPageAverageDuration(year, month);
            getPageTotalClicks(year, month);
        }

        function getMostPageCountriesViews(year, month) {
            const pageId = "{{ $page->id }}";

            axios.get('/dashboard/tracking/page/view-pages-countries', {
                    params: {
                        page_id: pageId,
                        year,
                        month
                    }
                })
                .then(function(response) {
                    const fullData = response.data.data;

                    if (!pageId || !fullData[pageId]) {
                        console.warn('⚠️ لا توجد بيانات لهذه الصفحة');

                        if (window.countryChart && typeof window.countryChart.destroy === 'function') {
                            window.countryChart.destroy();
                            window.countryChart = null;
                        }

                        return;
                    }

                    const pageData = fullData[pageId];
                    const counts = pageData.map(item => item.count);
                    const labels = pageData.map(item => item.country_name);

                    const element = document.querySelector('#pie_chart');
                    if (!element) {
                        console.error('❌ العنصر #pie_chart غير موجود في الصفحة'); // ✅ صحح اسم العنصر
                        return;
                    }

                    if (window.countryChart && typeof window.countryChart.destroy === 'function') {
                        window.countryChart.destroy();
                        window.countryChart = null;
                    }

                    const options = {
                        series: counts,
                        labels: labels,
                        colors: ['#0d6efd', '#6610f2', '#6f42c1', '#d63384', '#fd7e14'],
                        chart: {
                            type: 'donut',
                            height: 300
                        },
                        stroke: {
                            show: true,
                            width: 2,
                            colors: ['#ffffff']
                        },
                        dataLabels: {
                            enabled: false
                        },
                        plotOptions: {
                            pie: {
                                expandOnClick: false
                            }
                        },
                        legend: {
                            offsetY: -5,
                            offsetX: -10,
                            fontSize: '14px',
                            fontWeight: '500',
                            labels: {
                                colors: '#6c757d'
                            },
                            markers: {
                                width: 8,
                                height: 8
                            }
                        },
                        responsive: [{
                            breakpoint: 480,
                            options: {
                                chart: {
                                    width: 200
                                },
                                legend: {
                                    position: 'bottom'
                                }
                            }
                        }]
                    };

                    window.countryChart = new ApexCharts(element, options);
                    window.countryChart.render();
                })
                .catch(function(error) {
                    console.error('❌ Error fetching country chart data:', error);
                });
        }

        function getPageAverageDuration(year, month) {
            const pageId = "{{ $page->id }}";

            axios.get('/dashboard/tracking/page/view-pages-duration', {
                    params: {
                        page_id: pageId,
                        year,
                        month
                    }
                })
                .then(function(response) {
                    const avgSeconds = response.data.average_duration ?? 0;

                    const target = document.querySelector('#average_duration');
                    if (target) {
                        target.innerText = avgSeconds + "{{ __('pages.second') }}";
                    } else {
                        console.warn('⚠️ لم يتم العثور على العنصر #average_duration');
                    }
                })
                .catch(function(error) {
                    console.error('❌ خطأ في جلب متوسط المدة:', error);
                });
        }

        function getPageTotalClicks(year, month) {
            const pageId = "{{ $page->id }}";

            axios.get('/dashboard/tracking/page/view-pages-clicks', {
                    params: {
                        page_id: pageId,
                        year,
                        month
                    }
                })
                .then(function(response) {
                    const total = response.data.total_clicks ?? 0;

                    const target = document.querySelector('#total_clicks');
                    if (target) {
                        target.innerText = total + "{{__('pages.click')}}";
                    } else {
                        console.warn('⚠️ لم يتم العثور على العنصر #total_clicks');
                    }
                })
                .catch(function(error) {
                    console.error('❌ خطأ في جلب عدد النقرات:', error);
                });
        }
    </script>
@endsection