@extends('layouts.app-settings')

@section('main-content')

<main class="app-main">

  @include('settings.settings-head')  

  <section class="content-body ">
    <div class="container-fluid main-body">
      
      <div class="col-12">
        <div class="card my-4">
          <div class="card-header p-0 position-relative mt-n5 mx-2" >
            <div class="bg-primary shadow-primary rounded-2 pt-4 pb-3 d-flex justify-content-between align-items-center">
              <h5 class="text-uppercase ps-3 print-title text-white">Administration</h5>
              @if (Auth::check())
                @if ((Auth::user()->user_type) === 'ADMIN')
                <button type="button" id="add_button" class="btn btn-success btn-md me-3 no-print" data-bs-toggle="modal" data-bs-target="#addAdminModal" style="margin-top: -10px">
                  <i class="fa fa-plus me-2" ></i>Add Account
                </button>
                @endif
              @endif
            </div>
          </div>
          <div class="card-body" id="show_all_provinces">
            <h1 class="text-center text-secondary my-5 loading-text" id="loading-text">Loading</h1>
            <div id="table_start" class="table-responsive">
              <table id="table-account" class="mytable table-sm" cellspacing="0" width="100%">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Picture</th>
                    <th>Username</th>
                    <th>Fullname</th>
                    <th>Level</th>
                    <th>Email Address</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th class="no-print">Action</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
      
    </div>

    <div id="alert_msg"></div>
    
    {{-- add new admin modal start --}}
    <div class="modal fade" id="addAdminModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addAdminModalTitle" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header bg-success">
            <h5 class="modal-title text-white">Add Accounts</h5>
            <button type="button" class="btn-close btn-link text-white p-3 fixed-plugin-close-button" data-bs-dismiss="modal" aria-label="Close">            
            </button>
          </div>
       
          <div class="modal-body">
            <form action="#" method="POST" id="account_add_form" class="account_add_form" enctype="multipart/form-data">
              @csrf
              <input type="hidden" name="base64image" id="base64image">
          
            <div class="row" >
              <div class="col-md-3 d-flex justify-content-center align-items-center">
                <div class="image_area_UPLOAD d-flex justify-content-center align-items-center">
                  <label for="upload_new_image">
                    <img class="rounded-circle" id="uploaded_image_new" src='../assets/admin_img/initial-image-black.png' width="120" height="120" />
                      <div class="overlay_UPLOAD">
                        <div class="text_UPLOAD" style="font-size: 12px; line-height: 12px;">Click to Change Profile Image</div>
                      </div>
                    <input type="file" name="image" accept=".png, .jpg, .jpeg" class="image_new_UPLOAD" id="upload_new_image" style="display:none"  />
                  </label>
                </div>
              </div>
              <div class="col-md-9">
                <div class="form-row" >
                  <div class="col-md-8" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="first_name" id="first_name" placeholder="First Name" autocomplete="off" required/>
                        <label for="first_name">First Name<span style="color: red">*</span></label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="ext_name" id="ext_name" placeholder="Ext Name" autocomplete="off"/>
                        <label for="ext_name">Ext Name</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-row" >
                  <div class="col" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="middle_name" id="middle_name" placeholder="Middle Name" autocomplete="off"/>
                        <label for="middle_name">Middle Name</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-row" >
                  <div class="col" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="last_name" id="last_name" placeholder="Last Name" autocomplete="off" required/>
                        <label for="last_name">Last Name<span style="color: red">*</span></label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
    

              <div class="col-md-6">
                <div class="form-label-group in-border">
                  <label class="form-label"></label>

                  <select class="form-select text-uppercase fa-select" name="user_category" id="user_category" required>
                    <option value="" style="font-weight: bold">Select Category</option>
                    <option value="ADMIN"> &#xf007; ADMIN</option>
                    <option value="USER"> &#xf2bd; USER</option>
                    <option value="VIEWER"> &#xf06e; VIEWER</option>
                  </select>
                  
                  <label for="user_category">Category<font style="color: red">*</font></label>
                </div>   

                <div class="form-label-group in-border">
                  <div class="form-label-group in-border">
                    <input class="form-control" type="text" name="user_name" id="user_name" placeholder="Username" autocomplete="off" required/>
                    <label for="user_name">Username<span style="color: red">*</span></label>
                  </div>
                </div>


                <div class="form-label-group in-border password-container">
                  <input class="form-control" type="password" name="pass_word" id="pass_word" placeholder="Password" autocomplete="off" required/>
                  <label for="pass_word">Password<span style="color: red">*</span></label>
                  <button type="button" id="togglePassword" onclick="togglePasswordVisibility()"  tabindex="-1">
                    <i class="fas fa-eye"></i>
                  </button>
                </div>

                <div id="password-strength-indicator" style="display: block;" tabindex="-1"></div>
                
                <br>
                <div class="form-label-group in-border Confirmpassword-container">
                  <input class="form-control" type="password" name="pass_word_confirmation" id="confirm_pass_word" placeholder="Confirm Password" autocomplete="off" required/>
                  <label for="confirm_pass_word">Confirm Password<span style="color: red">*</span></label>
                  <button type="button" id="toggleConfirmPassword" onclick="toggleConfirmPasswordVisibility()"  tabindex="-1">
                    <i class="fas fa-eye"></i>
                  </button>
                </div>
                <div id="password-mismatch-message" style="color: red; margin-top: -15px;" tabindex="-1"></div>

                <br>
                <div class="form-label-group in-border">
                  <input class="form-control" type="text" name="email_address" placeholder="Email Address" id="email_address" autocomplete="off" required="required"/>
                  <label for="email_address">Email Address<font style="color: red">*</font></label>
                </div>

              </div>

              <div class="col-md-6">
                <div class="card">
                  <div class="card-header">
                    Permission
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="SC" id="permission_sc" name="permissions[]">
                        <label class="form-check-label" for="permission_sc">
                          Sugarcane
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="AOM" id="permission_aom" name="permissions[]">
                        <label class="form-check-label" for="permission_aom">
                          Audit Observation Memorandum (AOM)
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="CONSO" id="permission_conso" name="permissions[]">
                        <label class="form-check-label" for="permission_conso">
                          Consolidation
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="WFP" id="permission_wfp" name="permissions[]">
                        <label class="form-check-label" for="permission_wfp">
                          Work Financial Plan
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="OS" id="permission_os" name="permissions[]">
                        <label class="form-check-label" for="permission_os">
                          Organization Structure
                        </label>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>

            </div>
          </div>

          <div class="modal-footer">
            <button type="button" id="close_btn" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" id="add_account_btn" class="btn btn-success" style="cursor:pointer">Add</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    {{-- add new admin end --}}  

    <!-- ADD NEW ADMIN PIC START -->
    <div class="modal fade" id="modal_new_UPLOADIMAGE" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal_new_UPLOADIMAGETitle" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-dialog-scrollable  modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header card-header bg-success">
            <h3 class="modal-title" style="text-align:center; color: white; ">Crop New Image Before Upload</h3>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="img-container">
              <div class="row">
                <div class="col-md-8">
                  <img src="" id="sample_new_image" class="img_UPLOAD img-responsive" style="max-width: 100%; max-height: 200vh;"/>
                </div>
                <div class="col-md-4" style="max-height: 65vh; overflow: hidden;">
                  <div class="preview_UPLOAD img_sticky" name="avatar" style="overflow: hidden; max-width: 100%;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" id="crop_new" class="btn btn-success">Crop</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
    <!-- ADD NEW ADMIN PIC END -->

    {{-- update admin modal start --}}
    <div class="modal fade" id="EditAdminModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="EditAdminModalTitle" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
        <div class="modal-content">
          <div class="modal-header bg-primary">
            <h5 class="modal-title text-white">Update Accounts</h5>
            <button type="button" class="btn-close btn-link text-white p-3 fixed-plugin-close-button" data-bs-dismiss="modal" aria-label="Close">            
            </button>
          </div>
       
          <div class="modal-body">
            <form action="#" method="POST" id="account_edit_form" class="account_edit_form" enctype="multipart/form-data">
              @csrf
              <input type="hidden" name="edit_base64image" id="edit_base64image">
              <input type="hidden" name="temp_base64image" id="temp_base64image">
            <div class="row" >
              <div class="col-md-3 d-flex justify-content-center align-items-center">
                <div class="image_area_UPLOAD d-flex justify-content-center align-items-center">
                  <label for="edit_upload_new_image">
                    <img class="rounded-circle" id="edit_uploaded_image_new" src="" width="120" height="120" />
                      <div class="overlay_UPLOAD">
                        <div class="text_UPLOAD" style="font-size: 12px; line-height: 12px;">Click to Change Profile Image</div>
                      </div>
                    <input type="file" name="edit_image" accept=".png, .jpg, .jpeg" class="image_update_UPLOAD" id="edit_upload_new_image" style="display:none"  />

                  </label>
                </div>
              </div>
              <div class="col-md-9">
                <div class="form-row" >
                  <div class="col-md-8" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="edit_first_name" id="edit_first_name" placeholder="First Name" autocomplete="off" required/>
                        <label for="edit_first_name">First Name<span style="color: red">*</span></label>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="edit_ext_name" id="edit_ext_name" placeholder="Ext Name" autocomplete="off"/>
                        <label for="edit_ext_name">Ext Name</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-row" >
                  <div class="col" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="edit_middle_name" id="edit_middle_name" placeholder="Middle Name" autocomplete="off"/>
                        <label for="edit_middle_name">Middle Name</label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-row" >
                  <div class="col" style="width: 100%">
                    <div class="form-label-group in-border">
                      <div class="form-label-group in-border">
                        <input class="form-control" type="text" name="edit_last_name" id="edit_last_name" placeholder="Last Name" autocomplete="off" required/>
                        <label for="edit_last_name">Last Name<span style="color: red">*</span></label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
        
              <div class="col-md-6">
                <div class="form-label-group in-border">
                  <label class="form-label"></label>

                  <select class="form-select text-uppercase fa-select" name="edit_user_category" id="edit_user_category" required>
                    <option value="" style="font-weight: bold">Select Category</option>
                    <option value="ADMIN"> &#xf007; ADMIN</option>
                    <option value="USER"> &#xf2bd; USER</option>
                    <option value="VIEWER"> &#xf06e; VIEWER</option>
                  </select>
                  
                  <label for="edit_user_category">Category<font style="color: red">*</font></label>
                </div>   
             
        
                <div class="form-label-group in-border">
                  <input class="form-control" type="text" name="edit_email_address" placeholder="Email Address" id="edit_email_address" autocomplete="off" required="required"/>
                  <label for="edit_email_address">Email Address<font style="color: red">*</font></label>
                </div>
            
                <div class="form-label-group in-border">
                  <div class="form-label-group in-border">
                    <input class="form-control" type="text" name="edit_user_name" id="edit_user_name" placeholder="Username" autocomplete="off" required/>
                    <label for="edit_user_name">Username<span style="color: red">*</span></label>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="card">
                  <div class="card-header">
                    Permission
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="SC" id="edit_permission_sc" name="edit_permissions[]">
                        <label class="form-check-label" for="edit_permission_sc">
                          Sugarcane
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="AOM" id="edit_permission_aom" name="edit_permissions[]">
                        <label class="form-check-label" for="edit_permission_aom">
                          Audit Observation Memorandum (AOM)
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="CONSO" id="edit_permission_conso" name="edit_permissions[]">
                        <label class="form-check-label" for="edit_permission_conso">
                          Consolidation
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="WFP" id="edit_permission_wfp" name="edit_permissions[]">
                        <label class="form-check-label" for="edit_permission_wfp">
                          Work Financial Plan
                        </label>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="OS" id="edit_permission_os" name="edit_permissions[]">
                        <label class="form-check-label" for="edit_permission_os">
                          Organizational Structure
                        </label>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>

           
            </div>
            
          </div>

          <div class="modal-footer">
            <button type="button" id="edit_close_btn" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="submit" id="update_account_btn" class="btn btn-primary" rowid="">Update</button>
          </div>
          </form>
        </div>
      </div>
    </div>
    {{-- update admin end --}}

    <!-- UPDATE ADMIN PIC START -->
    <div class="modal fade" id="modal_update_UPLOADIMAGE" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal_update_UPLOADIMAGETitle" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-dialog-scrollable  modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
          <div class="modal-header card-header bg-primary">
            <h3 class="modal-title" style="text-align:center; color: white; ">Updated Crop New Image Before Upload</h3>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="img-container">
              <div class="row">
                <div class="col-md-8">
                  <img src="" id="sample_update_image" class="img_UPLOAD img-responsive" style="max-width: 100%; max-height: 200vh;"/>
                </div>
                <div class="col-md-4" style="max-height: 65vh; overflow: hidden;">
                  <div class="preview_UPLOAD img_sticky" name="avatar" style="overflow: hidden; max-width: 100%;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" id="crop_update" class="btn btn-primary">Crop</button>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
    <!-- UPDATE ADMIN PIC END -->




  </section>

</main>
@endsection('main-content')