@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'User Details')


@push('head')
<link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />


<script src="{{ asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="../assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<script src="../assets/plugins/select2/dist/js/select2.min.js" defer></script>
 <link href="../assets/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="../assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js" defer></script>

<link href="../assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="../assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<script src="../assets/plugins/sweetalert/dist/sweetalert.min.js"></script>

<!--

<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js" defer></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js" defer></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js" defer></script> -->

@endpush


@section('content')
<section class="mb-4 bg-white">
    <script>
        @if (Session::has('success'))
        swal("{{Session::get('success')}}").then(function () {
//    window.location = "/invite_vc";
        });
        @endif


    </script>
    <div class="row align-items-center">
        <div class="col-md-12 mb-5">
            <div class="panel">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">Send Invites</h4>
                </div>


                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-6">

                            @if (session('status'))
                            <h6 class="alert alert-success">{{ session('status') }}</h6>
                            @endif

                            @php
                            $roomname = "";
                            $room = "";
                            @endphp
                            <div class="card" style="margin-top:10px;">
                                <div class="card-header">
                                    <h4>Send VC Invitation</h4>
                                </div>
                                <div class="card-body">

                                    <form method="post" action="{{ url('sendinvite') }}" method="POST">
                                        @csrf
                                        <div class="form-group mb-3">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label for="">Select VC Type</label>                                                
                                                        <div class="input-group">
                                                            <select class="form-select form-select-sm  @error('meetingtype') is-invalid @enderror" name='meetingtype' id='meetingtype'>
                                                                <option value="">------------- Select VC Type ---------------</option>
                                                                <option value="Instant">Create Instant VC</option>
                                                                <option value="Schedule">Schedule VC</option>
                                                            </select>
                                                        </div>
                                                        @error('meetingtype')
                                                        <span class="invalid-feedback d-inline" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label for="">Select User</label>                                                
                                                        <div class="input-group">
                                                            <select class="form-select form-select-sm  @error('meetingtype') is-invalid @enderror" name='usertype' id='usertype'>
                                                                <option value="E">Staff</option>
                                                                <!-- <option value="A">Anonymous</option> -->
                                                            </select>
                                                        </div>
                                                        @error('meetingtype')
                                                        <span class="invalid-feedback d-inline" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mb-3" id="datetime"> 
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <!--Grid column-->
                                                    <div class="col-md-6">
                                                        <div class="md-form">
                                                            <div class="form-group">
                                                                <label for="">Select VC Date</label>
                                                                <div class="input-group">
                                                                    <input type="text" id="vcdate" name="vcdate" class="form-control form-control-sm @error('vcdate') is-invalid @enderror" value='{{ date("m/d/Y") }}'><div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                                </div>
                                                                @error('vcdate')
                                                                <span class="invalid-feedback d-inline" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--Grid column-->


                                                    <div class="col-md-6">
                                                        <div class="md-form">
                                                            <div class="form-group">
                                                                <label for="">Select Time</label>
                                                                <div class="input-group bootstrap-timepicker">
                                                                    <input id="time" name="time" type="text" class="form-control">
                                                                    <span class="input-group-text input-group-addon"><i class="fa fa-clock"></i></span>
                                                                </div>
                                                                @error('time')
                                                                <span class="invalid-feedback d-inline" role="alert">
                                                                    <strong>{{ $message }}</strong>
                                                                </span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div></div>

                                        </div>
                                        <div class="form-group mb-3" id="anonymous">
                                            <div class="col-md-12">
                                                <div id="education_fields">
          
        </div>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <label for="">Name</label>                                                
                                                        <div class="input-group">
                                                            <input type="text" id="name" name="name[]" placeholder="Enter Name" class="form-control form-control-sm">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <label for="">Contact</label>                                                
                                                        <div class="input-group">
                                                            <input type="text" id="contact" name="contact[]" placeholder="Enter Mobile No." class="form-control form-control-sm">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <label for="">Email</label>                                                
                                                        <div class="input-group">
                                                            <input type="text" id="email" name="email[]" placeholder="Enter Email Address" class="form-control form-control-sm">
                                                            <input type="hidden" id="cnt" value="1" name="cnt">
                                                        </div> 
                                                        </div>
                                                    <div class="col-md-1">
                                                        <label for="">&nbsp;</label>         
<!--                                                          <span style="float:right"><a href="" class="pr-1 text-success addmore" title="Add More Users"><i class="fas fa-2x fa-fw me-5px fa-plus"></i></a></span>  -->
                                                        <span style="float:right;margin-right: -5px;"> <button class="btn btn-success" type="button"  onclick="education_fields();"><i class="fas fa-fw me-5px fa-plus"></i></button></span>  
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mb-3" id="existing"> 
                                            <label for="">To User</label>
                                            <div class="input-group">
                                                <select name="to_user[]" id="to_user" class="multiple-select2 form-control form-control-sm @error('to_user') is-invalid @enderror"  multiple>
                                                    @foreach ($allUsers as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                    @endforeach
                                                </select>
                                                @error('to_user')
                                                <span class="invalid-feedback d-inline" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-group mb-3">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <label class="room"></label>  
                                                    </div>
<!--                                                      <div class="col-md-6" id="more">
                                                        
                                                    </div>-->
                                                </div>
                                            </div>                                         
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="">Message</label>
                                            <textarea id="msg" name="msg" rows="4" cols="50" class="form-control form-control-sm @error('msg') is-invalid @enderror" value='{{ old("msg") }}'></textarea>
                                            @error('msg')
                                            <span class="invalid-feedback d-inline" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <button type="submit" class="btn btn-primary">Send Message</button>
                                            <input type="hidden" id="roomname" name="roomname" value="" />
                                        </div>

                                    </form>

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


            @if(!empty($vclist))
            @if(count($vclist)>0)
            <div class="panel">
                <div class="panel-heading card-bg-color">
                    <h4 class="panel-title">Invites List</h4>
                    <div class="panel-heading-btn">
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-default" data-toggle="panel-expand">
                            <i class="fa fa-expand"></i>
                        </a>
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-success" data-toggle="panel-reload">
                            <i class="fa fa-repeat"></i>
                        </a>
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-warning" data-toggle="panel-collapse">
                            <i class="fa fa-minus"></i>
                        </a>
                        <a href="#" class="btn btn-xs btn-icon btn-circle btn-danger" data-toggle="panel-remove">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row"><div class="col-sm-12">
                            <table id='data-table-default' class='table table-striped table-bordered align-middle'>
                                <thead>
                                    <tr>
                                        <th width="1%" data-orderable="false"></th>
                                        <th>VC Type</th>
                                        <th>VC Date</th>
                                        <th>Send To</th>
                                        <th class="text-center">Message</th>
                                        <th class="text-center">Room Name</th>
                                        <th class="text-center" data-orderable="false">Start VC</th>
                                        <th class="text-center" data-orderable="false">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($vclist as $item)
                                    @php

                                    $room = $item->room_name;
                                    @endphp    
                                    <tr>
                                        <td class="text-center">{{$loop->iteration}}</td>

                                        <td>{{$item->vc_type}}</td>
                                        <td>{{$item->vc_date}}  {{$item->vc_time}}</td>
                                        <td><span style='color:red'></span> / <span style='color:blue'></span> / <span style='color:green'></span</td>
                                        <td class="text-center">{{$item->msg}}</td>
                                        <td class="text-center">{{$item->room_name}}</td>
                                        @if($roomname != $room)
                                        <td class='text-center'>
                                            <a href='#' id="{{ $item->room_name."@".$item->id }}" class="pr-1 text-primary start" title="Start VC">
                                                <i class="fas fa-lg fa-fw me-5px fa-video-camera"></i>
                                            </a>
                                        </td>
                                        @else
                                        <td class='text-center'>

                                        </td>
                                        @endif


                                        <td class='text-center'>
                                            <a href="#" id="{{$item->id}}" class="pr-1 text-danger delete" title="Delete"><i class='fas fa-lg fa-fw me-5px fa-trash'></i></a>
                                        </td>
                                    </tr>
                                    @php
                                    $roomname = $item->room_name;
                                    @endphp 

                                    @endforeach

                                </tbody>
                            </table>
                        </div></div></div></div>
            @endif
            @endif

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

@endsection
@push('scripts')
<script>

            $(document).ready(function () {

    $("#datetime").hide();
    $("#anonymous").hide();
    $(".room").hide();
    $(".multiple-select2").select2({placeholder: "Select Users", minimumInputLength : 3});
    $('.multiple-select2').trigger('change');
    $("#time").timepicker();
    $("#meetingtype").change(function () {
        var meet_type = this.value;
        if (meet_type == "Instant" || meet_type == "") {
            $("#datetime").hide();
        } else {
            $("#datetime").show();
        }
        if (meet_type != "") {
            var room = makeid(9);
            $('#roomname').val(room);
            $(".room").show();
            $(".room").html("Meeting Link : <a href='https://digi3vc.mphc.gov.in/" + room + "'>https://digi3vc.mphc.gov.in/" + room + "</a>");
        } else {
            $(".room").html("");
            $(".room").hide();
        }
    });

    $("#usertype").change(function () {
        var usertype = this.value;
        if (usertype == "E") {
            $("#anonymous").hide();
            $("#existing").show();
        } else {
            $("#anonymous").show();
            $("#existing").hide();
        }
    });

    $(".delete").click(function () {
        var id = $(this).prop("id");
        var districtUrl = "{{ url('deletevcinvite')}}";
        $.get(districtUrl,
                {id: id},
                function (data) {
                    alert(data);
                    window.location.href = "{{ url('invite_vc')}}";
                }
        );
    }); 
    
    $(".addmore").click(function () {
        
    });

    $(".start").click(function(){
    var id = $(this).prop("id");
            var da = id.split("@");
            var roomname = da[0];
            var vid = da[1];
            var districtUrl = "{{ url('updatestarttime')}}";
            $.get(districtUrl,
            {id: vid, roomname: roomname},
                    function (data) {
                    if (data == 1){
                    // window.location.href = "https://vc.sclsc.in/"+roomname;
                    window.open('https://digi3vc.mphc.gov.in/' + roomname, '_blank');
                    } else{
                    alert("Error");
                    }

                    }
            );
    });
    }
    );
    $("#vcdate").datepicker({
        format: "dd/mm/yyyy",
        todayHighlight: true,
        autoclose: true
    });
    function makeid(length) {
        var result = '';
        var characters = 'abcdefghijklmnopqrstuvwxyz';
        var charactersLength = characters.length;
        for (var i = 1; i <= length; i++) {
            result += characters.charAt(Math.floor(Math.random() *
                    charactersLength));
            if (i % 3 == 0 && i < length) {
                result += "-";
            }
        }
        return result;
    }
    
    var room = 1;
    var cnt;
function education_fields() {
    cnt = document.getElementById('cnt').value;
    cnt++;
    room++;
    var objTo = document.getElementById('education_fields')
    var divtest = document.createElement("div");
	divtest.setAttribute("class", "form-group removeclass"+room);
	var rdiv = 'removeclass'+room;
   /* divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';*/
   
   divtest.innerHTML = "<div class='row'><div class='col-md-4'><label for=''>Name</label><div class='input-group'><input type='text' id='name' name='name[]' placeholder='Enter Name' class='form-control form-control-sm'></div></div><div class='col-md-3'><label for=''>Contact</label><div class='input-group'><input type='text' id='contact' name='contact[]' placeholder='Enter Mobile No.' class='form-control form-control-sm'></div></div><div class='col-md-4'><label for=''>Email</label><div class='input-group'><input type='text'id='email' name='email[]' placeholder='Enter Email Address' class='form-control form-control-sm'></div></div><div class='col-md-1'><label for=''>&nbsp;</label>    <div class='input-group-btn' style='float:right;margin-right: -5px;'> <button class='btn btn-danger' type='button' onclick='remove_education_fields("+ room +");'> <i class='fas fa-fw me-5px fa-minus'></i> </button></div></div></div>";
    
    objTo.appendChild(divtest)
    document.getElementById('cnt').value = cnt;
}
   function remove_education_fields(rid) {
       cnt = document.getElementById('cnt').value;
	   $('.removeclass'+rid).remove();
           cnt--;
           document.getElementById('cnt').value = cnt;
   }
</script>
@endpush