@extends('layouts.admin.admin')



@section('content')
<div id="content" class="main-content">
    <div class="container">
<br><br>
        <div class="container">
            <div class="row layout-top-spacing">
                <div id="basic" class="col-lg-12 layout-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                    <h4>Edit Committee</h4>
                                </div>                 
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                        <input type="hidden" name="assoc_id" id="assoc_id" value="{{$assoc_id}}">

                        @include('layouts.admin.alerts')
                         
                            <div class="row">
                                <div class="col-lg-12 col-12 mx-auto">
                                    <!-- <form method="post" action="{{ route('admin.committee.update',$committee->id) }}" enctype="multipart/form-data">
                                        @csrf
                                        {{ method_field('put') }}
                                        <div class="form-group">
                                            <p>name</p>
                                            <input  type="text" name="name" value="{{ $committee->name }}" id="name" placeholder="Committee Name" class="form-control" required>
                                        </div>
                                        <button type="submit" class="btn btn-primary" style="margin: 10px">Submit</button>
                                    </form> -->

                                    <ul class="nav nav-tabs" role="tablist">
                                        <li class="nav-item">
                                        <a class="nav-link active" id="product-tab" data-toggle="tab" href="#product-info" role="tab" aria-controls="product-info" aria-selected="true">Committee Details</a>
                                        </li>
                                     
                                       
                                        <li class="nav-item">
                                        <a class="nav-link" id="edit-committee-members-tab" data-toggle="tab" href="#edit-committee-members" role="tab" aria-controls="edit-committee-members-tab" aria-selected="false">Edit Members</a>
                                        </li>
                                
                                    
                                    </ul> 
            <div class="tab-content">
                                                        <!-- start album details-->

                <div class="tab-pane fade show active" id="product-info" role="tabpanel" aria-labelledby="product-tab" style="height: 100%;">
                  <section>
                  <div class="row" style="">
                      <div class="col-12">
                      <button class="btn btn-success btn-sm float-right" style="margin-top:10px" onclick="updateSelectedCommittee()" >Update</button>
                      
                                    <input id="getMemberIdForEditing"  type="hidden" value=""> 
                                    <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
                                    <input id="selected_committee_id"  type="hidden" value="{{$committee->id}}"> 


                      </div>
                      
                    </div>
                  <br />
                        <div class="row border-bottom" style="margin-bottom: 10px;">                      
                            <div class="col-6" >
                                <div class="form-group " >
                                  <label >Committee Name <span class="text-danger "  style="font-size:16pt;display: inline;">*</span></label> 
                                  <input  type="text" name="committee_name" id="committee_name" placeholder="Committee Name" value= "{{$committee->name}}" class="form-control edit_album_require noSpace" >
                                  <span id="error_edit_committee_name" ></span>

                                </div>
                            </div>
                         
                       </div>
                      
                      
               
                    </section>   
                </div>
                <!-- end album details-->
    
              <div class="loader"></div>

                 
              <!-- start of upload new images -->
              <div class="tab-pane fade" id="edit-committee-members" role="tabpanel" aria-labelledby="edit-committee-members-tab" style="">
                  <section class="hideWhenSubmitting">
                  <input id="allowExistingMemberImageToEditUsingFileObject"  type="hidden" value="0"> 

                      <div class="row" style="margin-top:10px">
                          <div class="col-9">
                            
                            
                            <!-- <input type="hidden" value="0" id="fieldToSetCounterUsingObjectSize"> -->
                          </div>
                          <div class="col-2">
                            
                          <button type="button" class="btn btn-primary btn-sm hideWhenSubmitting float-right" style="margin-top:10px" data-backdrop="static" data-keyboard="false"  data-toggle="modal" data-target="#myModal" id="new_image_album_add_images_button" onclick="genarateRandomMemberIdForImageObjectRef()"><i class="fa fa-plus fa-fw"></i> Add-Member</button>
                            <!-- <input type="hidden" value="0" id="fieldToSetCounterUsingObjectSize"> -->
                          </div>
                        
                          <div class="col-1">
                            <button class="btn btn-success btn-sm float-right hideWhenSubmitting" style="margin-top:10px" onclick="handleEditMemberUpload()" >Update</button>
                          </div>
                
                     </div>
                     
                   

                        <br />
                        <div class="row"  style="width:75%; margin: 0 auto">
                          <div class="col-12">
                         <!-- <span style="font-size:14pt;color:white"><u>Add New Members</u> </span> -->
                            <!-- <button type="button" class="btn btn-primary btn-sm hideWhenSubmitting float-right" data-backdrop="static" data-keyboard="false"  data-toggle="modal" data-target="#myModal" id="new_image_album_add_images_button" onclick="genarateRandomMemberIdForImageObjectRef()"><i class="fa fa-plus fa-fw"></i> Add-Member</button> -->
                          </div>
                          <!-- <div class="col-9">
                           
                          </div> -->
                        </div>
                      <br />
              
                  <div  class="table-responsive"  style="width:75%; margin: 0 auto">
                              <table class="table table-bordered"     >
                                <tr style="color:white">
                                  <th>Member Name</th>
                                  <th>Member Designation</th>
                                  <th>Member Position</th>
                                  <th>Member Image</th>
                                  <th colspan="2"  style="text-align:center" >Action</th>
                                </tr>
                                <tbody id="committee_member_grid" >
                              
                                    <tr>
                                      <td colspan="6" style="text-align:center">
                                      No new members added yet
                                      </td>
                                    </tr>
                                </tbody>
                              </table>   
                        </div>

                        <div  class="table-responsive"  style="width:75%; margin: 0 auto">
                     
                              <table class="table table-bordered"     >
                                <!-- <tr style="color:white">
                                  <th>Member Name</th>
                                  <th>Member Designation</th>
                                  <th>Member Position</th>
                                  <th>Member Image</th>
                                  <th colspan="2"  style="text-align:center" >Action</th>
                                </tr> -->
                                <tbody id="existing_committee_member_grid" >
                                
                                   
                                </tbody>
                              </table>   
                        </div>
                         
             
                    
                     
                    
                  </section>
                </div>
              <!--end of upload new images  -->


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

            </div>
        </div>
        </div>
<!-- existing member modal start -->
<div class="modal fade" id="myModal2" data-backdrop="false" data-backdrop="static" data-keyboard="false" >
          <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
      
              <!-- Modal Header -->
               <div class="modal-header">
                <h4 class="modal-title">Edit Member: <span  id="existing_committee_member_name_in_modal_heading"></span></h4>
                <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
              </div> 
        
              <!-- Modal body -->
              <div class="modal-body">

                 <div class="row">
                    <div class="col-6" >
                             <div class="form-group">
                                 <p>Name<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></p>
                                 <input  type="text" name="existing_comm_member_name" id="existing_comm_member_name" placeholder="Member-Name" class="form-control noSpace existing_member_add_member_require" >
                                 <span id="error_existing_comm_member_name"  ></span>

                              </div>
                                       
                     </div>
                    <div class="col-6" >
                          <div class="form-group">
                            <p>Designation<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></p>
                            <input  type="text" name="existing_comm_member_designation" id="existing_comm_member_designation" placeholder="Member-Designation" class="form-control noSpace existing_member_add_member_require" >
                            <span id="error_existing_comm_member_designation"  ></span>

                         </div>
                     </div>

                   

                 </div>

                 <div class="row">
                        <div class="col-6" >
                                    <div class="form-group">
                                        <p>Position<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></p>
                                        <input  type="text" name="existing_comm_member_position" id="existing_comm_member_position" placeholder="Member-Position" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" class="form-control noZeroAtStart existing_member_add_member_require" >        
                                        <span id="error_existing_comm_member_position"  ></span>

                                    </div>
                                              
                            </div>
                            <!-- <div class="col-2"  >
                            </div> -->
                          <div class="col-6"  >
                                <div class="form-group">
                                               <div id="uploadImageButtonForExistingCommitteeMemberDiv">
                                                    <label>Upload Image<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></label>
                                                    <input type="file" name="existingFileToUpload" id="existingFileToUpload"  style="display: none;" placeholder="Upload-Image" class="" onchange="uploadOnChangeForExistingMember()" >
                                                    <button type="button" class="btn btn-primary enableDisable" style="width:100%" id="eistingFileToUploadButton" onclick="document.getElementById('existingFileToUpload').click()"  style="margin-top">Upload</button>                    
                                                </div> 
                                          
                                            <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#verifySellerImageModal">
                                                  Verify Image
                                                </button> -->
                                          
                                                <div id="existingDocImageUploadPrevDiv" class="row" style="display:none;"></div>
                                              
                                          
                                        </div>
                                        <span id="error_existingFileToUpload"  ></span>

                          </div> 
                    
                  
                    </div>
                     
               

              </div> 

        
              <!-- Modal footer -->
              <div class="modal-footer">
              <button type="button" class="btn btn-success" id="existingAddMemberButton" onclick="verifyExistingMemberEmptyInputsBeforeProceeding()"><i class="fa fa-plus fa-fw"></i> Add</button>

                <button type="button" class="btn btn-primary"  id="existingAddMemberCloseButton"  data-dismiss="modal" onclick="existingMemberResetModal()">Close</button>
              </div>
            
          </div>
        </div>
      </div>
        <!--existing member  modal ends -->


        <!-- modal start -->
 <div class="modal fade" id="myModal" data-backdrop="false" data-backdrop="static" data-keyboard="false" >
          <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
      
              <!-- Modal Header -->
               <div class="modal-header">
                <h4 class="modal-title" >Edit Member: <span id="committee_member_name_in_modal_heading"></span></h4>
                <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
              </div> 
        
              <!-- Modal body -->
              <div class="modal-body">

                 <div class="row">
                    <div class="col-6" >
                             <div class="form-group">
                                 <p>Name<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></p>
                                 <input  type="text" name="comm_member_name" id="comm_member_name"  placeholder="Member-Name"  class="form-control noSpace add_member_require" >
                                 <span id="error_comm_member_name"  ></span>

                              </div>
                                       
                     </div>
                    <div class="col-6" >
                          <div class="form-group">
                            <p>Designation<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></p>
                            <input  type="text" name="comm_member_designation" id="comm_member_designation" placeholder="Member-Designation" class="form-control noSpace add_member_require" >
                            <span id="error_comm_member_designation"  ></span>

                         </div>
                     </div>

                   

                 </div>

                 <div class="row">
                        <div class="col-6" >
                                    <div class="form-group">
                                        <p>Position<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></p>
                                        <input  type="text" name="comm_member_position" id="comm_member_position" onKeyUp="$(this).val($(this).val().replace(/[^\d]/ig, ''))" placeholder="Member-Position" class="form-control add_member_require noZeroAtStart" >        
                                        <span id="error_comm_member_position"  ></span>

                                    </div>
                                              
                            </div>
                            <!-- <div class="col-2"  >
                            </div> -->
                          <div class="col-6"  >
                                <div class="form-group">
                                               <div id="uploadImageCommitteeMemberButtonDiv">
                                                    <label>Upload Image<span class="text-danger "  style="font-size:16pt;display: inline;">*</span></label>
                                                    <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" placeholder="Upload-Image" class="add_member_require" onchange="uploadOnChange()" >
                                                    <button type="button" class="btn btn-primary enableDisable" style="width:100%" id="fileToUploadButton" onclick="document.getElementById('fileToUpload').click()"  style="margin-top">Upload</button>                    
                                                </div> 
                                          
                                            <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#verifySellerImageModal">
                                                  Verify Image
                                                </button> -->
                                          
                                                <div id="docImageUploadPrevDiv" class="row" style="display:none;"></div>
                                              
                                          
                                        </div>
                                        <span id="error_fileToUpload"  ></span>

                          </div> 
                    
                  
                    </div>
                     
               

              </div> 

        
              <!-- Modal footer -->
              <div class="modal-footer">
              <button type="button" class="btn btn-success" id="addMemberButton" onclick="verifyEmptyInputsBeforeProceeding()"><i class="fa fa-plus fa-fw"></i> Add</button>

                <button type="button" class="btn btn-primary"  id="addMemberCloseButton"  data-dismiss="modal" onclick="resetAddMemberModal()">Close</button>
              </div>
            
          </div>
        </div>
      </div>
        <!-- modal ends -->
<!--  END CONTENT AREA  -->
@endsection

@section('script')
  <script>
      getAllMembersForSelectedCommittee('{{$committee->id}}')
  </script>
@endsection