@extends('partials.main')
<!-- page title -->
@section('title')
Poll result
@endsection

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous" />

<style>
    .tr:hover {
        cursor: pointer;
    }
    .bootstrap-tagsinput{
        width: 100%;
    }
    .label-info{
        background-color: #17a2b8;

    }
    .label {
        display: inline-block;
        padding: .25em .4em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,
        border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
</style>
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <nav class="breadcrumb-4 p-2 px-3">
        <ol class="breadcrumb breadcrumb-style1">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('poll') }}">Polling list</a>
            </li>

            <li class="breadcrumb-item active">Polling result</li>
        </ol>

    </nav>

</div>

@if(!empty($polling_2))

<div class="row">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table text-md-nowrap" id="example2">
                    <thead>
                        <tr>
                            <th class="wd-lg-8p"><span>Date Started / Location / Name of Poll</span></th>
                            <th class="wd-lg-8p"><span>Total Number of people who took the poll </span></th>
                            <th class="wd-lg-8p"><span>Closing Date </span></th>
                            <th class="wd-lg-8p">Status </th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="TableData">


                    </tbody>
                </table>
            </div>
        </div><!-- bd -->
    </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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-body pt-5">
                <div class="row">
                    <div class="col-4">
                        <!-- <button class="btn custom-button btn-block">View report</button> -->
                    </div>
                    <div class="col-4">
                        <!-- <button class="btn custom-button-outline btn-block"> <i class="typcn typcn-download"></i>
                            PDF</button> -->
                    </div>
                    <!-- <div class="col-4">
                        <button class="btn custom-button-outline btn-block" data-bs-toggle="modal" data-bs-target="#ShareModal"> <i class="typcn typcn-link"></i>
                            Share</button>
                    </div> -->
                </div>
                <div class="row mt-4 mb-3">
                    <div class="col-6">
                        <h5 class="modal-title text-muted">Detail</h5>
                    </div>
                    <div class="col-6">
                        <!-- <a role="button" class="text-info" style="float:right;" data-bs-toggle="modal"
                            data-bs-target="#exampleModal1">+ Create Action</a> -->
                    </div>
                </div>
                <form id="updatepoll">
                    <input type="hidden" class="id" name="id">
                    <div class="form-group">
                        <label for="">Template</label>
                        <input type="text" class="form-control polling_name" name="polling_name" id=""
                            placeholder="Tax Poll in Ward-1">
                    </div>
                    <div class="form-group">
                        <label for="">Status</label>
                        <select name="status" id="" class="form-control status">
                            <option value="" selected disable>Choose any</option>
                            <option value="2">Closed</option>
                            <option value="1">Open</option>

                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">Closing Date</label>
                        <input type="date" class="form-control poll_closing_date" id="disabled" name="poll_closing_date" placeholder="dd/mm/yyy">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="btnSubmit"> <i class="fa fa-spinner fa-spin fa-pulse" style="display:none"></i> Update Poll</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<!-- Share Modal -->
<div class="modal fade" id="ShareModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Share</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    <form id="share">

                    <input type="hidden" class="id" value="" name="polling_id">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group ">

                                    <label for="validationCustom01">
                                        <span class="mr-2"></span>
                                        <span>Email</span>
                                    </label>
                                    <input type="text" multiple="multiple" name="email"  id="share_email"  data-role="tagsinput" class="form-control" required
                                        placeholder="Enter email address to share..">
                                    <small>Add comma (,) for multiple emails</small>

                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="btnSubmitShare"> <i class="fa fa-spinner fa-spin spin-share"  style="display:none;"></i> Share</button>
                        </div>
                    </form>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">Create action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="">Title of action</label>
                    <input type="text" class="form-control" id="" placeholder="Enter title of action">
                </div>
                <div class="form-group">
                    <label for="">Description</label>
                    <textarea class="form-control" name="" id="" cols="30" rows="2"
                        placeholder="Enter description"></textarea>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" id="btnSubmit"> <i class="fa fa-spinner fa-spin spin-share"  style="display:none;"></i>  Save changes</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<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>
    $(document).ready(function(e) {

        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;
            }
        }

    });
</script>

@endsection