@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
    Generate polling question
@endsection


@section('admin_dashboard_css')
    {{-- <link href="{{ asset('assets/v7-figma/css/style.css') }}" rel="stylesheet"> --}}
    {{-- <link href="{{ asset('assets/v7-figma/css/new-style.css') }}" rel="stylesheet"> --}}
    <link rel="stylesheet" href="{{ asset('assets/v7-figma/css/owl/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/v7-figma/css/owl/owl.theme.default.min.css') }}">

    <style>
        .activeClass {
            font-style: normal;
            font-weight: 300;
            font-size: 17px;
            line-height: 23px;
            text-transform: uppercase;
            color: #3F99FF !important;
            border-bottom: 2px solid #3F99FF !important;
            padding: 10px 0;
            display: inline-block;
        }

        #pagination_all {
            margin-top: 20px;
            display: flex;
            justify-content: end;
        }
        #pagination_all {
            display: flex;
            justify-content: end;
            margin-top: 20px;
        }

        #pagination_all a,
        #pagination_all span {
            color: #fff;
            background-color: #007bff;
            border-radius: 5px;
            padding: 8px 16px;
            margin: 0 5px;
            text-decoration: none;
        }

        #pagination_all a:hover {
            background-color: #0069d9;
        }

        #pagination_all span {
            background-color: #6c757d;
            cursor: default;
        }
    </style>
@endsection


@section('admin_dashboard_content')


    <div class="col-lg-cust-12 col-lg-12 col-md-11 col-11">
        {{-- <div class="nav-tabs-wrap">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="polling-list-tab" data-bs-toggle="tab"
                        data-bs-target="#polling-list" type="button" role="tab" aria-controls="polling-list"
                        aria-selected="true">Polling List</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="polling-result-tab" data-bs-toggle="tab" data-bs-target="#polling-result"
                        type="button" role="tab" aria-controls="polling-result" aria-selected="false">Polling
                        Result</button>
                </li>
            </ul>
        </div> --}}
        <div class="content dashboard-content h-100" aria-labelledby="polling-list-tab">

            <div class="breadcrumbs-wrap my-3 bg-white">
                <a href="{{ url('client/dashboard') }}">dashboard</a> <i>&gt;</i>
                <a href="{{ url('poll/index') }}">polling</a> <i>&gt;</i>
                <a href="javascript:;" class="clickToPollingList activeClass" id="polling-list-tab">Polling List
                </a> <i>&gt;</i>
                <a href="javascript:;" class="clickToPollingResult" id="polling-result-tab">
                    Polling Result
                </a>
            </div>

            {{-- Polling List --}}
            <div class="content-wrap polling-list" id="polling-list">
                @if (!empty($polling_1))
                    <div class="polling-wrap">
                        <div class="row">
                            <div class="col-lg-6">
                                <h1 class="mb-2">Polling List</h1>
                            </div>
                            <div class="col-lg-6 text-end">
                                <div class="searc-from-poll text-end">
                                    <label for="">Search List</label>
                                    <form action="">
                                        <input type="search" name="search" id="searchInput"
                                            placeholder="campaign name..." />
                                        <img class="searchImgStyle" src="{{ asset('assets/images/icon-search.svg') }}"
                                            alt="" />
                                    </form>
                                </div>
                            </div>
                            @if ($login_user->roles[0]->name == 'Admin')
                                <div class="col-12 mt-4 pt-3">
                                    <div class="table-responsive">
                                        <table class="table" id="example2">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Template Name</th>
                                                    <th>Total Questions</th>
                                                    @can('polling list edit')
                                                        <th>action</th>
                                                    @endcan
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($pollinglists as $poll)
                                                    @php
                                                        $question_count = App\Models\Question::where(
                                                            'polling_id',
                                                            $poll->id,
                                                        )
                                                            ->where('client_id', $login_user->id)
                                                            ->count();
                                                    @endphp
                                                    <tr>
                                                        <td class="poll-1-polling_name"
                                                            id="poll-1-polling_name-{{ $poll->id }}"></td>
                                                        <td class="td">{{ $question_count }}</td>
                                                        {{-- @can('polling list edit') --}}
                                                            <td>
                                                                <a href="{{ route('edit_question', $poll->id) }}"
                                                                    class="btn custom-button-outline p-0 px-2">Edit
                                                                    Poll</a>
                                                            </td>
                                                        {{-- @endcan --}}
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        
                                    </div>
                                    
                                    {{-- <div class="showing-sec">
                                    <div class="row justify-content-between">
                                        <div class="col-lg-6 my-auto">
                                            <h5>Showing 1 - 4 of 40 entries</h5>
                                        </div>
                                        <div class="col-lg-6 text-end">
                                            <div class="change-btn prev-btn">
                                                <img src="../images/icon-prev.svg" alt="" />
                                            </div>
                                            <div class="change-btn next-btn">
                                                <img src="../images/icon-next.svg" alt="" />
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                </div>
                            @else
                                <div class="col-12 mt-4 pt-3">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>survey</th>
                                                    <th>date</th>
                                                    <th>questions</th>
                                                    <th>action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="pollingData">

                                            </tbody>
                                        </table>
                                        
                                    </div>
                                    <div class="text-end">
                                        <div id="pagination_all">
                                            <!-- Pagination links will be rendered here -->
                                        </div>
                                    </div>
                                    {{-- <div class="showing-sec">
                                        <div class="row justify-content-between">
                                            <div class="col-lg-6 my-auto">
                                                <p>Showing {{ $pollinglists->firstItem() }} -
                                                    {{ $pollinglists->lastItem() }} of
                                                    {{ $pollinglists->total() }} entries
                                                </p>
                                            </div>
                                            <div class="col-lg-6 text-end">
                                                @if ($pollinglists->onFirstPage())
                                                    <a href="javascript:void(0)" class="disabled first">
                                                        <div class="change-btn prev-btn">
                                                            <img
                                                                src="{{ asset('assets/images/icon-prev.svg') }}"alt="prev">
                                                        </div>
                                                    </a>
                                                @elseif( $pollinglists->previousPageUrl() )
                                                    <a href="javascript:void(0)" class="second">
                                                        <div class="change-btn prev-btn">
                                                            <img src="{{ asset('assets/images/icon-prev.svg') }}}"
                                                                alt="prev">
                                                        </div>
                                                    </a>
                                                @endif

                                                @if ($pollinglists->hasMorePages())
                                                    <a href="{{ $pollinglists->nextPageUrl() }}" class="third">
                                                        <div class="change-btn next-btn">
                                                            <img src="{{ asset('assets/images/icon-next.svg') }}"
                                                                alt="next">
                                                        </div>
                                                    </a>
                                                @else
                                                    <a href="javascript:void(0)" class="disabled fourth">
                                                        <div class="change-btn next-btn">
                                                            <img src="{{ asset('assets/images/icon-next.svg') }}"
                                                                alt="next">
                                                        </div>
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}
                                </div>
                            @endif

                            @include('poll.poll_modal')

                        </div>
                    </div>
                @else
                    <div class="row">
                        <div class="card ">
                            <div class="card-body">
                                <div class="text-center">
                                    <i class="fa fa-exclamation-triangle  text-dark" style="font-size: 3rem;"></i>
                                    <br>
                                    <p class="text-muted pt-3">Your package is not supported for this feature please
                                        upgrade your package, select <br>package to continue</p>
                                    <a href="{{ route('plans') }}" class="btn btn-info btn-lg"
                                        style="border-radius: 60px;">Select Package</a>
                                    <br>


                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Polling Result --}}
            <div class="content-wrap polling-result" id="polling-result" style="display:none;">
                <div class="polling-wrap">
                    @if (!empty($polling_2))
                        <div class="row">
                            <div class="col-lg-6">
                                <h1 class="mb-2">draft polls</h1>
                            </div>
                            <div class="col-lg-6 text-end">
                                <div class="searc-from-poll text-end">
                                    <label for="">Search List</label>
                                    <form action="">
                                        <input type="search" placeholder="campaign name..." />
                                        <img src="{{ asset('assets/images/icon-search.svg') }}" alt="" />
                                    </form>
                                </div>
                            </div>
                            <div class="col-12 mt-4 pt-3">
                                <div class="table-responsive">
                                    <table class="table" id="example2">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th><span>Date Started / Location / Name of Poll</span></th>
                                                <th><span>Total Number of people who took the poll </span></th>
                                                <th><span>Closing Date </span></th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="TableData">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="row">
                            <div class="card-body">
                                <div class="text-center">
                                    <i class="fa fa-exclamation-triangle  text-dark" style="font-size: 3rem;"></i>
                                    <br>
                                    <p class="text-muted pt-3">Your package is not supported for this feature
                                        please
                                        upgrade your package, select <br>package to continue</p>
                                    <a href="{{ route('plans') }}" class="btn btn-info btn-lg"
                                        style="border-radius: 60px;">Select Package</a>
                                    <br>

                                </div>
                            </div>
                        </div>
                    @endif
                    @include('poll.poll_result_modal')
                </div>
            </div>
        </div>

    </div>




@endsection

@section('admin_dashboard_script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"
        integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg=="
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>

    <script>
        $(document).ready(function(e) {
            //poll list tab start




            // function pollingList(searchQuery = '') {
            //     $("#pollingData").html(
            //         '<tr><td colspan="6" class="text-center" style="margin-top:10px; font-size:20px; color:red;">Loading, please wait!</td></tr>'
            //         );
            //     $.ajax({
            //         url: '/api/poll/list/',
            //         type: "get",
            //         dataType: "JSON",
            //         data: {
            //             search: searchQuery
            //         },
            //         success: function(response) {

            //             if (response.status == "fail") {
            //                 $("#pollingData").html(
            //                     '<tr><td colspan="6" class="text-center" style=" margin-top:10px; font-size:20px; color:red;">No Data Found!</td></tr>'
            //                 );
            //             } else if (response.status == "success") {
            //                 $("#pollingData").html(response["html"]);
            //                 console.log(response["html"]);

            //             }
            //         },
            //         error: function(error) {
            //             console.log(error);
            //         }
            //     });
            // }

            $('#searchInput').on('input', function() {
                var searchQuery = $(this).val();
                pollingList(1, items_per_page, searchQuery); // Start from page 1 when searching
            });


            pollingList();

            var items_per_page = 10;

            function pollingList(page = 1, per_page = 10, searchQuery = '') {
                $("#pollingData").html(
                    '<tr><td colspan="6" class="text-center" style="margin-top:10px; font-size:20px; color:red;">Loading, please wait!</td></tr>'
                    );

                $.ajax({
                    url: '/api/poll/list?page=' + page + '&per_page=' + per_page,
                    type: "get",
                    dataType: "JSON",
                    data: {
                        page: page,
                        per_page: per_page,
                        search: searchQuery // Include the search query parameter
                    },
                    success: function(response) {
                        if (response.status == "fail") {
                            $("#pollingData").html(
                                '<tr><td colspan="6" class="text-center" style=" margin-top:10px; font-size:20px; color:red;">No Data Found!</td></tr>'
                            );
                        } else if (response.status == "success") {
                            $("#pollingData").html(response["html"]);
                            render_pagination_links(response['total'], per_page, page);
                            console.log(response['total']);


                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }
            function render_pagination_links(total_items, per_page, current_page) {
                // Calculate the total number of pages
                var total_pages = Math.ceil(total_items / per_page);
                var pagination_html = '';
                if (total_pages > 1) {
                    // Add the "previous" link if the current page is not the first page
                    if (current_page > 1) {
                        pagination_html += '<a href="javascript:;" class="pagination-link" data-page="' + (current_page - 1) +
                            '">' +
                            'Prev' +
                            '</a>';
                    }
                    // Add links for the current page and the surrounding pages
                    for (var i = Math.max(current_page - 2, 1); i <= Math.min(current_page + 2, total_pages); i++) {
                        if (i == current_page) {
                            pagination_html += '<span>' + i + '</span>';
                        } else {
                            pagination_html += '<a href="javascript:;" class="pagination-link" data-page="' + i + '">' +
                                i + '</a>';
                        }
                    }
                    // Add the "next" link if the current page is not the last page
                    if (current_page < total_pages) {
                        pagination_html += '<a href="javascript:;" class="pagination-link" data-page="' + (current_page + 1) +
                            '">' +
                            'Next' +
                            '</a>';
                    }
                }
                $('#pagination_all').html(pagination_html);
            }
            // Event delegation for pagination links
            $(document).on('click', '.pagination-link', function () {
                var page = $(this).data('page');
                // pollingList(page, items_per_page);
                pollingList(page, items_per_page, $('#searchInput').val()); // Include search query on pagination click
            });

            function render_pagination_links(total_items, per_page, current_page) {
                // Calculate the total number of pages
                var total_pages = Math.ceil(total_items / per_page);
                var pagination_html = '';
                if (total_pages > 1) {
                    // Add the "previous" link if the current page is not the first page
                    if (current_page > 1) {
                        pagination_html += '<a href="javascript:;" class="pagination-link" data-page="' + (current_page - 1) +
                            '">' +
                            'Prev' +
                            '</a>';
                    }
                    // Add links for the current page and the surrounding pages
                    for (var i = Math.max(current_page - 2, 1); i <= Math.min(current_page + 2, total_pages); i++) {
                        if (i == current_page) {
                            pagination_html += '<span>' + i + '</span>';
                        } else {
                            pagination_html += '<a href="javascript:;" class="pagination-link" data-page="' + i + '">' +
                                i + '</a>';
                        }
                    }
                    // Add the "next" link if the current page is not the last page
                    if (current_page < total_pages) {
                        pagination_html += '<a href="javascript:;" class="pagination-link" data-page="' + (current_page + 1) +
                            '">' +
                            'Next' +
                            '</a>';
                    }
                }

                $('#pagination_all').html(pagination_html);

            }

            // Event delegation for pagination links
            $(document).on('click', '.pagination-link', function () {
                var page = $(this).data('page');
                // pollingList(page, items_per_page);
                pollingList(page, items_per_page, $('#searchInput').val()); // Include search query on pagination click

            });

            $(document).on('click', '.poll-1-edit-row', function(e) {
                var db = $(this).attr('db');
                $.ajax({
                    url: '/poll/edit/schedule/' + db,
                    type: "GET",
                    dataType: "JSON",
                    success: function(response) {
                        console.log(response)
                        if (response.status == "fail") {
                            Swal.fire("Failed!", "Failed to Get User.", "error");
                        } else if (response.status == "success") {
                            $(".poll-1-pollid").val(response.data.id)
                            $(".schedule").val(response.data.schedule)
                            $(".poll-1-polling_name").val(response.data.polling_name)

                            $(".poll-1-distributed_date").val(response.data.distributed_date)
                            $(".poll-1-distributed_time").val(response.data.distributed_time)
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                    async: false
                });
            });

            schedule();

            function schedule() {
                $.ajax({
                    url: '/poll/schedule/',
                    type: "get",
                    dataType: "JSON",
                    success: function(response) {
                        $.each(response.data, (i, v) => {
                            $('#poll-1-polling_name-' + v.id).html(v.polling_name)
                            $('#poll-1-distributed_date-' + v.id).html(v.distributed_date)
                            $('#poll-1-distributed_time-' + v.id).html(v.distributed_time)
                        })
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }

            $("#poll_1_update_poll_distributed").on('submit', (function(e) {
                e.preventDefault();
                $.ajax({

                    url: "/api/poll/update",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

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

                    processData: false,

                    contentType: false,

                    cache: false,

                    beforeSend: function() {

                        $("#updatePollDistributedBtn").attr('disabled', true);

                        $(".fa-spin").css('display', 'inline-block');

                    },

                    complete: function() {

                        $("#updatePollDistributedBtn").attr('disabled', false);

                        $(".fa-spin").css('display', 'none');

                    },

                    success: function(response) {

                        console.log(response)

                        if (response.status == "fail") {
                            toastr.error('Failed', response.msg)
                        } else if (response.status == "success") {
                            toastr.success('Success', response.msg)

                            $("#poll_1_update_poll_distributed")[0].reset();
                            $('#poll_1_polllingdateModal').modal('hide');
                            schedule()
                        }

                    },

                    error: function(error) {

                        console.log(error);

                    }

                });
            }));

            // Delete Poll
            $(document).on('click', '.poll_1_Deletepoll', function(e) {

                var id = $(this).attr('id');

                Swal.fire({

                        title: "Are you sure?",

                        text: "You will not be able to recover this Poll!",

                        type: "warning",

                        buttons: true,

                        confirmButtonColor: "#ff5e5e",

                        confirmButtonText: "Yes, delete it!",

                        closeOnConfirm: false,

                        dangerMode: true,

                        showCancelButton: true

                    })
                    .then((deleteThis) => {

                        if (deleteThis.isConfirmed) {

                            $.ajax({

                                url: '/api/poll/delete/' + id,

                                type: "GET",

                                dataType: "JSON",

                                success: function(response) {

                                    if (response.status == "fail") {
                                        Swal.fire("Failed!", "Failed to delete poll.",
                                            "error");
                                    } else if (response.status == "success") {
                                        Swal.fire("Deleted!", "Poll has been deleted.",
                                            "success");

                                        pollingList();
                                    }
                                },

                                error: function(error) {

                                    console.log(error);

                                },

                                async: false

                            });

                        } else {

                            Swal.close();

                        }

                    });

            });
            //poll list tab end

            //poll result tab start
            results();

            function results() {

                $.ajax({
                    url: '/api/get/result',
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Content-Type": "application/json"
                    },
                    type: "get",
                    dataType: "JSON",
                    cache: false,
                    beforeSend: function() {

                    },
                    complete: function() {

                    },
                    success: function(response) {

                        if (response["status"] == "fail") {
                            toastr.info('Not Found', response["msg"])
                        } else if (response["status"] == "success") {
                            $("#TableData").html(response["html"]);
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }

            //edit Poll
            $(document).on('click', '.edit-row', function(e) {
                var id = $(this).attr('id');

                $.ajax({
                    url: '/poll/edit/result/' + id,
                    type: "GET",
                    dataType: "JSON",
                    success: function(response) {
                        if (response["status"] == "fail") {
                            Swal.fire("Failed!", "Failed to Get User.", "error");
                        } else if (response["status"] == "success") {
                            $(".id").val(response["data"]["id"])
                            $(".polling_name").val(response["data"]["polling_name"])
                            $(".status").val(response["data"]["status"])
                            $(".poll_closing_date").val(response["data"]["poll_closing_date"])

                            if ($(".poll_closing_date").val() != '') {
                                $("#disabled").prop('readonly', true);
                            } else {
                                $("#disabled").prop('readonly', false);
                            }
                        }
                    },
                    error: function(error) {
                        console.log(error);
                    },
                    async: false
                });
            });

            //update Poll
            $("#updatepoll").on('submit', (function(e) {

                e.preventDefault();

                $.ajax({

                    url: "/api/poll/update/result",

                    type: "post",

                    data: new FormData(this),

                    dataType: "JSON",

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

                    processData: false,

                    contentType: false,

                    cache: false,
                    beforeSend: function() {

                        $("#btnSubmit").attr('disabled', true);

                        $(".fa-spin").css('display', 'inline-block');

                    },
                    complete: function() {

                        $("#btnSubmit").attr('disabled', false);

                        $(".fa-spin").css('display', 'none');

                    },
                    success: function(response) {

                        console.log(response)

                        if (response["status"] == "fail") {

                            toastr.error('Failed', response["msg"])

                        } else if (response["status"] == "success") {

                            toastr.success('Success', response["msg"])

                            $('#exampleModal').modal('hide');
                            $("#updatepoll")[0].reset();
                            results()

                        }

                    },

                    error: function(error) {

                        console.log(error);

                    }

                });

            }));

            //Share
            $("#share").on('submit', (function(e) {
                e.preventDefault();

                var emails = $("#share_email").val().split(',')
                var is_submit = true;

                $.each(emails, (i, v) => {
                    if (!IsEmail(v)) {
                        is_submit = false;
                        return false;
                    }
                })

                if (is_submit) {
                    $.ajax({

                        url: "/api/poll/share/email",

                        type: "post",

                        data: new FormData(this),

                        dataType: "JSON",

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

                        processData: false,

                        contentType: false,

                        cache: false,

                        beforeSend: function() {

                            $("#btnSubmitShare").attr('disabled', true);

                            $(".spin-share").css('display', 'inline-block');

                        },

                        complete: function() {

                            $("#btnSubmitShare").attr('disabled', false);

                            $(".spin-share").css('display', 'none');

                        },

                        success: function(response) {

                            if (response["status"] == "fail") {

                                toastr.error('Failed', response["msg"])

                            } else if (response["status"] == "success") {
                                toastr.success('Success', response["msg"]);
                                Data = response["data"]
                                $('#shareModal').modal('hide');


                                $.ajax({
                                    url: '/api/poll/share/email/' + Data,
                                    type: "get",
                                    dataType: "JSON",
                                    success: function(response) {
                                        console.log(response)
                                        $('#shareModal').modal('hide');
                                    },
                                    error: function(error) {
                                        console.log(error);
                                    }
                                });

                            }

                        },

                        error: function(error) {

                            console.log(error);

                        },
                        async: false

                    });
                } else {
                    toastr.error('Failed', 'Please enter valid email addresses')
                }


            }));

            function IsEmail(email) {
                var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (!regex.test(email)) {
                    return false;
                } else {
                    return true;
                }
            }

            $(document).on('click', '.clickToPollingResult', function(e) {
                $(".polling-list").css('display', 'none');
                $(".polling-result").css('display', 'block');
                $(".clickToPollingResult").addClass("activeClass");
                $(".clickToPollingList").removeClass("activeClass");
            })

            $(document).on('click', '.clickToPollingList', function() {
                $('.polling-result').css('display', 'none');
                $('.polling-list').css('display', 'block');
                $(".clickToPollingList").addClass("activeClass");
                $(".clickToPollingResult").removeClass("activeClass");
            })

            //poll result tab end
        });
    </script>
@endsection