@extends('admin.layouts.admin')

 @section('content')
     <div class="terms-section-block">
         <div class="container-fluid">
             <div class="table-block-common">
                 <!-- Card header -->
                 <div class="top-title-block-table">
                     <div class="top-title-block-table-left common-btn-admin">
                         @if (isset($module_name))
                             <h2 class="sdial-darkbox-subtitle-text20">{{ $module_name }}</h2>
                         @endif 
                         <button class="btn btn-yellow-admin addteamsclass">
                             <i class="fas fa-plus me-2"></i>
                             <span>
                                 Add Member
                             </span>
                         </button>
                     </div>
                     {{-- <div class="common-btn-admin">
                         
                     </div> --}}
                 </div>
                 <div class="table-common-block">
                     <div class="table-responsive">
                         <table class="table table-flush" id="datatable-basic">
                             <thead class="thead-light">
                                 <tr>
                                     <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                         Name
                                     </th>
                                     <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                         Role
                                     </th>
                                     <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 width-changes-disc-teams">
                                         Description
                                     </th>
                                     <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                         Status
                                     </th>
                                     <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                         Order
                                     </th>
                                     <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                         Action
                                     </th>
                                 </tr>
                             </thead>
                             <tbody>
                             </tbody>
                         </table>
                     </div>
                 </div>
             </div> 
         </div>
     </div>
     <!-- The Modal -->
     <div id="myModal11" class="modal myModal11 common-modal-block">
         <!-- Modal content -->
         <div class="modal-content">
             <div class="modal-header">
                 <h2>Add New Member</h2>
                 <a href="#" class="rmvmodel11">
                     <img src="/assets/img/close-icon-modal.svg" alt="close-icon">
                 </a>
             </div>
             <div class="modal-body">
                 <form method="POST" id="teamsform11">
                     @csrf
                     <div class="form-group">
                         <label>Member Name</label>
                         <input type="text" name="name" id="name" class="form-control" value=""
                             placeholder="First Last">
                         <span class="nameError"></span>
                     </div> 
                     <div class="form-group role-upload-block">
                         <label>Role</label> 
                         <div class="select-block-inner"> 
                            <div class="select-option-block opencloseselectrole">
                                <p id="defaultselectoption">Please Select</p>  
                                <a href="javascript:void(0);">
                                    <img src="/assets/img/arrow-caret-down.svg" alt="arrow">
                                </a>
                            </div>
                            <span class="text-danger roleError"></span>
                            <div class="select-option-role showhideselectrole d-none">
                               <div class="input-name-role">
                                  <input type="text" name="rolename" id="rolename" class="form-control" value=""  placeholder="Role Name">
                                  <button type="button" class="btn mb-0 common-modal-btn saveteamsrole">Add</button>  
                               </div>
                               <div class="row">
                                 <span class="text-danger rolenameError"></span> 
                                 <span class="text-danger roleError2"></span>
                               </div>
                               <div class="edit-delete-block">
                                    <div id="roledisplaydata"> 
                                    </div> 
                               </div>
                               <input type="hidden" name="roleselectid" id="roleselectid" value="">
                            </div>
                         </div>
                     </div>
                     <div class="form-group">
                         <label>Description</label>
                         <textarea class="form-control" name="description" id="description" placeholder="Write here.." rows="4"></textarea>
                         <span class="descriptionError"></span>
                     </div>
                     <input type="hidden" name="oldeditid" id="oldeditid" value="">
                     <div class="modal-footer-block">
                         <span class="btn btn-cancel mb-0 rmvmodel11">Cancel</span>
                         <button type="button" class="btn mb-0 saveteams11 common-modal">Save</button>
                     </div> 
                 </form>
             </div>
         </div>
     </div> 
 @endsection

 @push('js')
     <script>
         $(document).ready(function() {

            $(document).on("click", ".getroleidvalue", function() {  
                var id = $(this).attr('data-id');
                var value = $(this).attr('data-value');
                $("#roleselectid").val(id);
                $("#defaultselectoption").html(value);
                $("#defaultselectoption").addClass('rolenamedisplayclass');
              //  $("#roletitle"+id).addClass('btn btn-warning');
                $(".showhideselectrole").addClass('d-none');
            });

            $(document).on("click", ".opencloseselectrole", function() { 
                if( $('.showhideselectrole').hasClass('d-none') === true) {
                    $(".showhideselectrole").removeClass('d-none');
                }
                else{
                    $(".showhideselectrole").addClass('d-none');
                }
            });
            
             $(document).on("click", ".addteamsclass", function() {
                 getallrolelist();
                 var editid = $(this).attr('data-id');  
                 if (editid == undefined) {
                     $('.titledisplay').html('Add New Member');
                     $(".myModal11").show();
                 } else {
                     $('.titledisplay').html('Edit Member');
                     $('#oldeditid').val(editid);
                     $.ajax({
                         type: 'GET',
                         url: "{!! url('admin/teams-management') . '/' . '"+editid+"' . '/show' !!}",
                         dataType: 'json',
                         success: function(data) {
                             $('#name').val(data.teams.name);
                             $('#roleselectid').val(data.teams.role);
                             $('#defaultselectoption').html(data.rolename);
                             $("#defaultselectoption").addClass('rolenamedisplayclass');
                             $('#description').val(data.teams.description);
                            // $("#roletitle"+data.teams.role).addClass('btn btn-warning');
                             $(".myModal11").show();
                             oTable.draw();
                         },
                         error: function(xhr, status, error) {
                             if (xhr.responseJSON && xhr.responseJSON.message != "") {
                                 swal("ohh snap!", xhr.responseJSON.message, "error");
                             } else {
                                 swal("ohh snap!", "Something went wrong", "error");
                             }
                             ajaxError(xhr, status, error);
                         }
                     });
                 }
             });
             $(document).on("click", ".saveteams11", function() {
                 var editid = $("#oldeditid").val();
                 var chkname = $('#name').val();
                 var chkrole = $('#roleselectid').val();  
                 var chkdescription = $('#description').val();

                 if (chkname == '') {
                     $('.nameError').html('Name is required');
                 } else {
                     $('.nameError').html('');
                 }
                 if (chkrole == '') {
                     $('.roleError').html('Role is required');
                 } else {
                     $('.roleError').html('');
                 }

                 if (chkdescription == '') {
                     $('.descriptionError').html('Description is required');
                 } else {
                     $('.descriptionError').html('');
                 }

                 if (chkrole != '' && chkdescription != '' && chkname != '') {
                     if (editid == '') {
                         $.ajax({
                             type: 'POST',
                             url: "{!! url('admin/teams-management') . '/teams' !!}",
                             dataType: 'json',
                             data: $('#teamsform11').serialize(),
                             success: function(data) {
                                 $(".myModal11").hide();
                                 $('#name').val('');
                                 $('#roleselectid').val('');
                                 $('#description').val('');
                               //  $("#roleselectdata").empty();
                                 $("#roledisplaydata").empty();
                                 $("#defaultselectoption").html('Please Select');
                                // fnToastSuccess(data['message']);
                                 oTable.draw();
                             },
                             error: function(xhr, status, error) {
                                 if (xhr.responseJSON && xhr.responseJSON.message != "") {
                                     swal("ohh snap!", xhr.responseJSON.message, "error");
                                 } else {
                                     swal("ohh snap!", "Something went wrong", "error");
                                 }
                                 ajaxError(xhr, status, error);
                             }
                         });
                     } else {
                         $.ajax({
                             type: 'POST',
                             url: "{!! url('admin/teams-management') . '/' . '"+editid+"' . '/edit' !!}",
                             dataType: 'json',
                             data: $('#teamsform11').serialize(),
                             success: function(data) {
                                 $(".myModal11").hide();
                                 $("#roledisplaydata").empty();
                             //    $("#roleselectdata").empty();
                               //  fnToastSuccess(data['message']);
                                 oTable.draw(false);
                             },
                             error: function(xhr, status, error) {
                                 if (xhr.responseJSON && xhr.responseJSON.message != "") {
                                     swal("ohh snap!", xhr.responseJSON.message, "error");
                                 } else {
                                     swal("ohh snap!", "Something went wrong", "error");
                                 }
                                 ajaxError(xhr, status, error);
                             }
                         });
                     }
                 }
             });
             $(document).on("click", ".rmvmodel11", function() {  
                 $('#oldeditid').val('');
                 $('#name').val('');
                 $('#roleselectid').val('');
                 $('.roleError').html('');
                 $('.roleError2').html('');
                 $('.nameError').html('');
                 $('.editroleupdateErr').html('');
                 $('.rolenameError').html('');
                 $('.descriptionError').html('');
                 $('#description').val('');
                 $("#defaultselectoption").html('Please Select');
                 $("#roledisplaydata").empty();
                 $(".myModal11").hide();
             });
            
            function getallrolelist()
            {
                //get role list
                $.ajax({
                    type: 'GET',
                    url: "{!! url('admin/teams-management') . '/getrolelist/all' !!}",
                    dataType: 'json',
                    success: function(data) {
                        let html = '';
 
                    $.each(data?.data, function(index, item) { 
                        html += '<div class="edit-delete-block-inner">\n\
                                    <div class="input-text-fill"><p data-value="'+item.name+'" data-id="'+ item.id +'" class="getroleidvalue" id="roletitle'+ item.id +'">'+item.name+'</p>\n\
                                        <input name="editrolename" type="text" id="editrolename' +item.id + '" value="' +item.name +'" class="form-control d-none editrolename' +item.id + '">\n\
                                    </div>\n\
                                    <span class="text-danger editroleupdateErr editroleupdateError'+ item.id +'"></span>\n\
                                    <div class="d-none" id="editrolebtn' + item.id +'">  <a href="javascript:void(0);" data-id="' + item.id +'" class="updaterolebtn" ><img src="/assets/img/check-role-icon.svg" alt="check"></a> </div>\n\
                                    <div class="action-edit-delete">\n\
                                        <a href="javascript:void(0);" data-id="' + item.id +'" id="roleediticon'+ item.id +'" class="editclass" >\n\
                                        <img src="/assets/img/edit-img-block.svg" alt="arrow">\n\
                                        </a>\n\
                                        <a href="javascript:void(0);" class="deleteroleRecord" id="roledeleteicon'+ item.id +'"  val='+item.id+'>\n\
                                        <img src="/assets/img/delete-icon.svg" alt="delete">\n\
                                        </a>\n\
                                    </div>\n\
                                </div>';  
                    });
                        if (html != "") {
                            $("#roledisplaydata").append(html); 
                        }
                    }
                }); 
            }

            // function getselectrolelist()
            // {
            //      //get role list
            //      $.ajax({
            //          type: 'GET',
            //          url: "{!! url('admin/teams-management') . '/getrolelist/all' !!}",
            //          dataType: 'json',
            //          success: function(data) {
            //              let html = '';
            //              html +=
            //                 '<select name="role" id="role" class="form-control"> <option value="">Select role</option>';
            //              $.each(data?.data, function(index, item) {
            //                  html += ' <option value="' + item.id + '">' + item.name +
            //                      '</option>';
            //              });

            //              html += '</select>';
            //              if (html != "") {
            //                  $("#roleselectdata").append(html);

            //              }
            //          }
            //      }); 
            // }  
             
            $(document).on("click", ".saveteamsrole", function() {
                 var chkrole = $('#rolename').val();
 
                 if (chkrole == '') {
                     $('.rolenameError').html('Role name is required');
                 } else {
                     $('.rolenameError').html('');
                 }

               jQuery(document).on('keyup', '#rolename', function(event) { 
                    $(".saveteamsrole").attr('disabled',false);
                    $('.rolenameError').html('');
                    $('.roleError2').html('');
               });  
                var rolename = $("#rolename").val();  
                if(chkrole!='') 
                {
                    $.ajax({
                        type: 'GET',
                        url: "{!! url('admin/teams-management') . '/' . '"+rolename+"' . '/chk-rolename' !!}",
                        dataType: 'json',
                        success: function(data) { 
                            $(".saveteamsrole").attr('disabled',false);
                            $('.rolenameError').html('');
                            $('.roleError2').html('');

                            if (chkrole != '') {
                                $.ajax({
                                    type: 'POST',
                                    url: "{!! url('admin/teams-management') . '/role' !!}",
                                    dataType: 'json', 
                                    data:{"name":chkrole,"_token":"<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /var/www/html/resources/views/admin/laravel/teams/index.blade.php:357
Stack trace:
#0 {main}
  thrown in <b>/var/www/html/resources/views/admin/laravel/teams/index.blade.php</b> on line <b>357</b><br />