@extends('settings.layouts.master')
@section('styles')
  <link rel="stylesheet" href="{{asset('admin/plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
    <link rel="stylesheet" href="{{asset('admin/plugins/toastr/toastr.min.css')}}">
  <link rel="stylesheet" href="{{asset('admin/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css')}}">
  <style type="text/css">
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 14px;
  }
  
.nav-tabs .nav-link {
     color: #343a40;
    background-color: #ffffff;
    border-color: #ebedf2 #ebedf2 #ffffff;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
   
    background: #f6f8fa;
    color: #000000;
    border-radius: 0;
    border: 1px solid #ebedf2;
    padding: 0.75rem 1.5rem;
     border-right: #fff;
}
  </style>
@endsection
@section('contents')
<div class="content-wrapper pb-0">
<div class="page-header flex-wrap">
  <h3 class="mb-0">{{$category}}</h3>
</div>
<div class="row">
  <div class="col-md-12 stretch-card grid-margin">
    <div class="card">
         <div class="card-body">
            <h4>Asset Groups
            </h4>
            <div class="row">
              <div class="col-5 col-sm-3">
                <div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab" role="tablist" aria-orientation="vertical">
                  @if(count($data)>0)
                  @foreach($data as $key=>$value)
                    <a class="nav-link @if($value->id == $catType) active @endif" data-toggle="pill"     href="#vert-tabs-{{$key}}" role="tab" id="vert-tabs-home-tab" aria-controls="vert-tabs-home" aria-selected="true">
                      {{$value->description}}  
                    </a>
                  @endforeach
                  @else
                  @endif
                  <button type="button" class="btn btn-info btn-icon-text" onclick="addNewCategory()"> Add Group <i class="mdi menu-arrow"></i></button>
                </div>
              </div>
              <div class="col-7 col-sm-9">
                <div class="tab-content" id="vert-tabs-tabContent">
                  @if(count($data)>0)
                  @for($i=0;$i < count($data);$i++)
                  <div class="tab-pane @if($data[$i]->id == $catType) text-left fade active show @else fade @endif " id="vert-tabs-{{$i}}" role="tabpanel" aria-labelledby="vert-tabs-home-tab">
                    <h3 class="text-center">{{$data[$i]->description}} <button type="button" class="btn btn-outline-secondary btn-rounded btn-icon " onclick="editCategory('{{$data[$i]->id}}','{{$data[$i]->description}}')"> <i class="mdi mdi-table-edit"></i></button></h3>  
                    <div class="table-responsive">
                    <table class="table">
                      <tr><th>Name</th><th>User</th><th>Total Asset</th><th>Map User</th><th>Edit</th></tr>
                      @foreach($data[$i]->assetType as $key=>$value2)
                        <tr><td>{{$value2->name}}</td><td>{{$value2->users}}</td><td>{{$value2->total}}</td><td>
                          <button type="button" class="btn btn btn-info btn-rounded btn-icon" onclick="mapUserAsset('{{$data[$i]->id}}','{{$value2->name}}','{{$value2->users}}','{{$data[$i]->id}}')">
                            <i class="mdi mdi-table-add"></i>
                          </button>
                        </td><td>
                          <button type="button" class="btn btn btn-info btn-rounded btn-icon" onclick="editNewlistCat('{{$data[$i]->id}}','{{$value2->name}}','{{$value2->users}}','{{$data[$i]->id}}')">
                            <i class="mdi mdi-table-edit"></i>
                          </button>
                        </td></tr>
                      @endforeach
                    </table>
                    <button type="button" class="btn btn-info btn-icon-text" onclick="addNewlistCat('{{$data[$i]->id}}','{{$data[$i]->description}}')"> Add Asset Type for {{$data[$i]->description}}<i class="mdi menu-arrow"></i></button>
                    </div>
                  </div>
                  @endfor
                  @else
                  @endif
                </div>
              </div>
            </div>
           
          </div>
          <!-- /.card -->
      
    </div>
  </div>
</div>
<div class="modal modal-add-category fade show" id="add-modal-made" aria-modal="true" role="dialog" style="padding-right: 17px; display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title"><span id="type_category"></span> Category <span id="type"></span></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
        <form id="modal-add-form" action="{{ route('save_employee_assets') }}" method="post" >
          @csrf
          <div class="form-group">
            <div class="add-id">
            </div>
              <input type="hidden" name="listId" id="listId" value="">
            <input type="hidden" name="type" id="type" value="category">
            <label for="recipient-name" class="control-label mb-10">{{$category}} Description *:</label>
            <input type="text" class="form-control all-clean"  name="description" id="description" value="{{old('description')}}" placeholder="Please Enter description" required>
          </div>
        
        </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="$('#modal-add-form').submit()"><span id="bank-button" >Save</span></button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal modal-add-list fade show" id="add-modal-made" aria-modal="true" role="dialog" style="padding-right: 17px; display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title"><span id="type_list"></span> <span id="cat_name"></span> Asset </h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
        <form id="modal-add-form-list" action="{{ route('save_employee_assets') }}" method="post" >
          @csrf
          <div class="form-group">
            <div class="add-id">
            </div>
              <input type="hidden" name="listCatId" id="listCatId" value="">
              <input type="hidden" name="type" id="type" value="list">
              <input type="hidden" name="cat_id" id="cat_id" value="">
        
            <label for="recipient-name" class="control-label mb-10"> Name *:</label>
            <input type="text" class="form-control all-clean"  name="name2" id="name2" value="{{old('name2')}}" placeholder="Please Enter name" required>
          </div>
         
        </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="$('#modal-add-form-list').submit()"><span id="bank-button" >Save</span></button>
        </div>
      </div>
    </div>
  </div>  
  <div class="modal map-user-asset fade show" id="" aria-modal="true" role="dialog" style="padding-right: 17px; display: none;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title"><span id="type_category"></span> Map Asset User for <span id="typeAsset"></span></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
        <form id="modal-add-form-asset" action="{{ route('save_employee_assets') }}" method="post" >
          @csrf
          <div class="form-group">
            <div class="add-id">
            </div>
            <input type="hidden" name="assetID" id="assetID" value="">
            <input type="hidden" name="type" id="type" value="map">
            <input type="hidden" name="assetTypeId" id="assetTypeId" value="">
           
            <label for="recipient-name" class="control-label mb-10">Assign Asset to User *:</label>
            <select class="select2" multiple="multiple" id="data" name ="data[]" data-placeholder="Available Categories" style="width: 100%;">
              @foreach($employee as $key=>$value)
               <option value="{{$value->name}}">{{$value->name}}</option>
              @endforeach
            </select>
          </div>
        
        </form>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" onclick="$('#modal-add-form-asset').submit()"><span id="bank-button" >Save</span></button>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.0.0/index.global.min.js'></script>
<script src="{{asset('admin/plugins/select2/js/select2.full.min.js')}}"></script>
<!-- Toastr -->
<script src="{{asset('admin/plugins/sweetalert2/sweetalert2.min.js')}}"></script>
<script src="{{asset('admin/plugins/toastr/toastr.min.js')}}"></script>
<script type="text/javascript">
  function mapUserAsset(id,type,user,id2) {
    if(user != '')
    {
      var user2 = jQuery.parseJSON(user);
      var data2 = user2.toString();
      var array = data2.split(',');
      console.log(array.length);
      $("#data").val(array).select2();
    }
    $('#assetID').val(id2);
    
    $('#typeAsset').html(type);
    $('#assetTypeId').val(id);
    $('.map-user-asset').modal('toggle');
  }
  function addNewlistCat(id,cat) {
    var type = 'Add';
    $('#cat_name').html(cat);
    $('#cat_id').val(id);
    $('#type_list').html(type);
    $('.modal-add-list').modal('toggle');
  }
  function editNewlistCat(id,type2,user,id2) {
    var type = 'Edit';
    $('#cat_name').html(type2);
    $('#cat_id').val(id2);
    $('#listCatId').val(id);
    $('#name2').val(type2);
    $('#type_list').html(type);
    $('.modal-add-list').modal('toggle');
  }
  function addNewCategory() {
    var type = 'Add';
    $('#type_category').html(type);
    $('#type').html('');
    $('.modal-add-category').modal('toggle');
  }
  function editCategory(id,description) {
    var type = 'Edit';
    $('#listId').val(id);
    $('#type_category').html(type);
    $('#description').val(description);
    $('#type').html('');
    $('.modal-add-category').modal('toggle');
  }
  function addCompanyBank(type) {
    $('#listId').val('');
    $('#name').val('');
    $('#capital').val('');
    $('#description').val('');
    $('#bank-button').html('Add');
    $('#add-modal-made').modal('toggle');

  }
  $('.select2').select2();

  $(document).ready(function(){

 });
  
  function addBankBranch(type) {

    $('#bank-button').html(type);
    $('#type').html(type);
    $('#add-modal-made').modal('toggle');

  }
  function editDetails(id,name,capital,description) {
   
    $('#listId').val(id);
    $('#name').val(name);
    $('#capital').val(capital);
    $('#description').val(description);

    $('#bank-button').html('Edit');
    $('#add-modal-made').modal('toggle');
  }
 
  function getListBox(){

    var list_box = $('#list_box').val();
    console.log(list_box);
    reqUrl = "{{route('ifsc_save')}}";
    $('.global-loader').css('display','block');
        $.ajax({
          type: "get",
          url: reqUrl,
          data: {'list_box':list_box},
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function() {
          },
          complete: function() {
          },
          success: function(response) {
            $('#list_value').html(response.success);
            $('.global-loader').css('display','none');
              // console.log(response);
          }
        });
  }
  function callSaveMessage(message){
    var Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });
    Toast.fire({
        icon: 'success',
        title: message
    })
    $('.global-loader').css('display','none');
  }
</script>
@endsection