@extends('layout')
@section('content')
    <div class="container-fluid">
        <div class="row pt-3">
            <div class="col-auto">
                <h2 class="main_title">Dashboard</h2>
            </div>
        </div>
        <!--  Row 1 -->
        <div class="row pt-3 ">

            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_shadow dasboard-3 card-width-md ">
                    <div class="left">
                        <span>Total Doctor Counts</span>
                        <h3 id="total-doctor"></h3>
                    </div>
                    <div class="right">
                        <span><i class="fa-solid fa-people-group"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_shadow dasboard-3 card-width-md ">
                    <div class="left">
                        <span>Registered Occasion Count</span>
                        <h3 id="total-occasion"></h3>
                    </div>
                    <div class="right">
                        <span><i class="fa-regular fa-registered"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_shadow dasboard-3 card-width-md ">
                    <div class="left">
                        <span>Video Generated Count</span>
                        <h3 id="total-video"></h3>
                    </div>
                    <div class="right">
                        <span><i class="fa-regular fa-file-video"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto col-md-auto col-sm-auto col-12">
                <div class="white_shadow dasboard-3 card-width-md ">
                    <div class="left">
                        <span>Upcoming Occasion</span>
                        <h3 id="total-Upcoming"></h3>
                    </div>
                    <div class="right">
                        <span><i class="fa-solid fa-hourglass-half"></i></span>
                    </div>
                </div>
            </div>


        </div>
        <div class="col-12 pt-5">
            <h2 class="main_title">Upcoming Events</h2>
            <div class="white_shadow_rs">
                <table id="datatable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Doctor Name</th>
                            <th>Doctor Images</th>
                            <th>Unique Code</th>
                            <th>Speciality</th>
                            <th>Occasion Name</th>
                            <th>Occasion Date</th>
                            <th>Link</th>
                            <th>Generate Video</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>
    @include('videomodal')
@endsection

@section('js')
    <script>
        var uploadCroppedImageUrl = "{{ url('upload-cropped-image-all-occasions') }}";
        var uploadImageUrl = "{{ url('uploadimages') }}";
        var getuploadedimages = "{{ url('get-uploaded-images') }}";
        var csrfToken = "{{ csrf_token() }}";
    </script>

    <script>
        // function openGenerateVideoModal(doctorId, occasionDataId, doctor_name, occasion_type, occasion_name_of_person,
        //     occasion_date) {
        //     $('#doctor_ids').val(doctorId);
        //     $('#occasion_data_id').val(occasionDataId);
        //     $('#edit_video').modal('show');

        //     $('#doctorname').text(decodeURIComponent(doctor_name.replace(/\+/g, ' ')));
        //     $('#nameofoccasions').text(decodeURIComponent(occasion_type.replace(/\+/g, ' ')));
        //     $('#nameofperson').text(decodeURIComponent(occasion_name_of_person.replace(/\+/g, ' ')));
        //     $('#dateofoccasion').text(decodeURIComponent(occasion_date.replace(/\+/g, ' ')));
        // }


    </script>
    <script>
        var userTable;
        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'doctor_name',
                    name: 'doctor_name'
                },
                {
                    data: 'upload_image',
                    name: 'upload_image'
                },
                {
                    data: 'doctor_unique_code',
                    name: 'doctor_unique_code'
                },
                {
                    data: 'speciality',
                    name: 'speciality'
                },
                {
                    data: 'occasion_type',
                    name: 'occasion_type'
                },
                {
                    data: 'occasion_date',
                    name: 'occasion_date'
                },
                {
                    data: 'genrated_link',
                    name: 'genrated_link'
                },
                {
                    data: 'occasion_video_status',
                    name: 'occasion_video_status',
                }
            ];

            var columnDefs = [];

            userTable = getdatatable("{{ route('dashboardpeginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            return $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                fixedHeader: true,
                order: [],
                scrollX: true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'POST',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: ".my-image-links",
                        numeration: true,
                        infinigall: true,
                        share: true,
                        spinner: 'plane'
                    });
                    new VenoBox({
                        selector: '.my-video-links',
                    });
                },
            });
        }

        function copyToClipboard(url) {
            navigator.clipboard.writeText(url).then(function() {
                $.notify("URL copied to clipboard!", "success");
            }, function(err) {
                $.notify("Failed to copy URL.", "error");
                console.error('Could not copy text: ', err);
            });
        }
    </script>
    <script>
        $.ajax({
            url: "{{ route('user.dashboardcounts') }}",
            method: 'GET',
            success: function(data) {
                $('#total-doctor').text(data.totalDoctors);
                $('#total-occasion').text(data.registerdOcassion);
                $('#total-video').text(data.occasionGenratedVideo)
                $('#total-Upcoming').text(data.upcomingOccasion)
            },
            error: function(error) {
                console.log('Error:', error);
            }
        });
    </script>
    <script></script>
@endsection