@extends('layouts/layout')
@section('title', 'Map Templates')
@push('style')
@endpush

@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
    <!-- page content -->
			<div class="" role="main">
				<div class="">
					<div class="row">
						<div class="col-md-12 col-sm-12 mt-2">
							<div class="x_panel">
								<div class="x_title">
									<h2>Map Templates</h2>
									
									<div class="clearfix"></div>
								</div>
								<div class="x_content mt-0 p-0">
                                    <form action="{{url('notificationmap')}}" method="post" class="mb-3">
                                        @csrf
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Template Type</label>
                                                <select class="select2 form-control" name="template_type" id="template_type" data-toggle="select2">
                                                    <option value="" selected>Select Template Type</option>
                                                    @foreach($messages as $message)
                                                        <option value="{{$message->template_type}}">{{$message->template_type}}</option>
                                                    @endforeach    
                                                </select>
                                                <span id="template_type_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Template Name</label>
                                                <select class="select2 form-control" name="message" id="message" data-toggle="select2">
                                                    @foreach($templates as $templates)
                                                        <option value="{{$templates->templates_purpose}}">{{$templates->templates_purpose}}</option>
                                                    @endforeach    
                                                </select>
                                                <span id="message_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">User Type</label>
                                                <select class="select2 form-control" name="user" id="user" data-toggle="select2">
                                                    <option value="User">User</option>
                                                    <option value="Client">Client</option>
                                                </select>
                                                <span id="user_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Designation</label>
                                                 <select class="custome-dropdown form-control select2" id="RoleId" name="rolemultiple[]" data-toggle="select2" data-placeholder="Select Designations" multiple="multiple">
                                                 @foreach($roles as $role)
                                                        <option value="{{$role->id}}"                                                            >{{$role->display_name}}</option>
                                                    @endforeach
                                                </select>
                                                <span id="RoleId_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                            <div class="form-group">
                                                <label class="mb-1">Status</label>
                                                <select class="select2 form-control" name="status" id="status"
                                                    data-toggle="select2">
                                                    <option value="" selected>Select Status</option>
                                                    <option value="1">Active</option>
                                                    <option value="0">Inactive</option>
                                                </select>
                                                <span id="status_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                        <!-- <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                            <div class="form-group">
                                                <label class="mb-1">Description</label><hr>
                                                <span id="description" name="description" value=""></span>
                                                <span id="description_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div> -->
                                        <!-- <input id="descriptions" name="descriptions" class="d-none">-->
										<div class="form-group ">
											<div class="col-md-6 col-sm-6 offset-md-5 mt-3">
												<button type="submit" id="map_template" class="btn btn-round btn-primary">Submit</button>
											</div>
										</div> 
									</form>
                                <div class="col-md-12 col-sm-12 ">
                            <div class="">
                                <div class="">

                                    <table id="datatable-fixed-header"
                                        class="table table-striped table-bordered text-center" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Sr.No</th>
                                                <th>Template Type</th>
                                                <th>Template Name</th>
                                                <th>User Type</th>
                                                <th>Designation</th>
                                                <th>Status</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        @foreach ($template_roles as $template)
                                            
                                            <tr>
                                                <td class="rowid">{{$template->id}}</td>
                                                <td>{{$template->templates_type}}</td>
                                                <td>{{$template->templates_purpose}}</td>
                                                <td>{{$template->user_type}}</td>
                                                <td>@if($template->name == '')
                                                    {{'Client'}}
                                                    @else
                                                    {{$template->name}}
                                                    @endif
                                                </td>
                                                <td>
                                                    <select class="select2 form-control text-center" name="tbl_status" id="tbl_status" data-toggle="select2" style="height:29px;">
                                                        <option @if($template->status == '1') selected @endif value="1">Active</option>   
                                                        <option @if($template->status == '0') selected @endif value="0">Inactive</option> 
                                                    </select>
                                                </td>
                                                <td><input type="hidden" id="complaintid" name="complaintid" class="form-control" value="{{$template->id}}">
                                                                <button id="update_status" class="btn btn-round btn-primary mt-2 statusupdate scrollToTop" type="button" style="height:29px;">Update</button>
                                                            </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>   
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /page content -->
    @endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
    $(document).ready(function(){
        $('.select2').select2();
    });
</script>
<script>
$(document).ready(function() {
    $("#map_template").on('click', function() {
        var error_msg = "";

        if ($("#template_type").val() == "") {
            $("#template_type_error").text("Please select Template type.");
            error_msg = "Error";
        } else {
            $("#template_type_error").text("");
        }

        if ($("#message").val() == "") {
            $("#message_error").text("Please Select Template Name.");
            error_msg = "Error";
        } else {
            $("#message_error").text("");
        }

        if ($("#user").val() == "") {
            $("#user_error").text("Please select User type.");
            error_msg = "Error";
        } else {
            $("#user_error").text("");
        }

        if ($("#status").val() == "") {
            $("#status_error").text("Please select Status.");
            error_msg = "Error";
        } else {
            $("#status_error").text("");
        }

        if ($("#RoleId").val() == "") {
            $("#RoleId_error").text("Please select Designation.");
            error_msg = "Error";
        } else {
            $("#RoleId_error").text("");
        }
        if (error_msg) {
            return false;
        }
    });

});
</script>
<script>
    $(document).ready(function () {
        $('#user').on('change', function() {
            var user = $('#user').val();
              $("#RoleId").html('');
                $.ajax({
                    url: "{{url('loadroles')}}",
                    type: "post",
                    data: {
                        user : user,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                         if(res == "Clients")
                         {
                            $("#RoleId").append('<option value="Client">' + "Client" + '</option>');
                         }
                         else
                         {
                            $.each(res,function(key, value){
                                console.log(key, value);
                                $("#RoleId").append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                            });
                        }
                    }
                });
           });
       });
</script>

<script>
    $(document).ready(function () {
        $('#message').on('change', function() {
            var message = $('#message').val();
            console.log(message);
              $("#description").html('');
                $.ajax({
                    url: "{{url('loadmessages')}}",
                    type: "post",
                    data: {
                        message : message,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                            //$("#description").text(res.body);
                          
                            $.each(res,function(key, value){
                                $("#descriptions").val(value.body);
                            $("#description").append('<span class="">' + value.body + '</span>');
                           
                            });
                         }
                });
           });
       });
</script>

<script>
    $(document).ready(function () {
        $('#template_type').on('change', function() {
            var template_type = $('#template_type').val();
              $("#message").html('');
              $("#description").html('');
                $.ajax({
                    url: "{{url('loadtemplatenames')}}",
                    type: "post",
                    data: {
                        template_type : template_type,
                        _token: '{{csrf_token()}}'
                    },
                    dataType: 'json',
                    success: function (res) {
                         console.log(res);
                            //$("#description").text(res.body);
                          
                            $.each(res,function(key, value){
                                $("#description").val(value.body);
                                $("#description").append('<span class="">' + value.body + '</span>');
                            $("#message").append('<option value="' + value
                                .templates_purpose + '">' + value.templates_purpose + '</option>');
                            });
                         }
                });
           });
       });
</script>
<script>
    $(document).ready(function() {
        $(document).on('click', '.statusupdate', function(){
            //var tbl_status = $('#tbl_status').val();
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        var tr = $(this).closest("tr"); 
        var rowid = tr.find(".rowid").text();
        $("#complaintid").val(rowid);
        var status = $(tr).find('td:eq(5)').find('select').val();
        var id = $('#complaintid').val();
            console.log(id);
            console.log(status);
                $.ajax({
                    url: "{{url('updatetemplaterolestatus')}}",
                    type: "get",
                    data: {
                        _token: CSRF_TOKEN,
                        id : id,
                        status : status
                    },
                    dataType: 'json',
                    success: function (res) {
                        swal({
                            title: "Success!",
                            text: "Template Status Update Successfully.",
                            type: "success"
                        },
                        function() {
                            location.reload();
                        });
                            
                         }
                });
           });
       });
</script>
@endpush