@extends('layouts.backend')
@section('mainContentArea')
<div class="card card-default pt-4">
    <div class="card-header">
        <h4>
            Manage Sections
            <a href="{{ route('category-create') }}" class="btn btn-info float-right btn-sm"> Add Category</a>
        </h4>
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th width="100px">S.No.</th>
                    <th>Name</th>
                    <th>Shortcode</th>
                    <th width="100px">Status</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
                @php $dash = ''; @endphp
                @foreach ($categories as $k => $c)
                <tr>
                    <td></td>
                    <td>@if(isset($c['children'])&&(count($c['children'])))<label class="dropdown">&#x25BE;</label>@endif{{$c['name']}}</td>
                    <td>{{$c['shortcode']}}</td>
                    <td>
                      @if($c['is_active']==1)
                      <a href="#" class="badge badge-success" data-id="{{$c['id']}}" data-status="{{$c['is_active']}}" onclick="updateStatus(this)">Active</a>
                      @else
                      <a href="#" class="badge badge-danger" data-id="{{$c['id']}}" data-status="{{$c['is_active']}}" onclick="updateStatus(this)">InActive</a>
                      @endif
                    </td>
                    <td><a data-id="{{$c['id']}}" href="categories/edit/{{$c['id']}}" class="badge badge-dark text-white"><i class="fa fas fa-pencil"></i></a></td>
                </tr>
                  @if(isset($c['children'])&&(count($c['children'])))
                    @include('backend.sections.listsubcategory',['subcategories' => $c['children']])
                  @endif
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<!-- The Modal -->
<div class="modal" id="catModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <form action="{{ route('sections.store') }}" method="post" name="catFrm" enctype="multipart/form-data">
              @csrf
              <input type="hidden" name="catid" id="catid" value="0">
              <input type="hidden" name="photo" id="photo" value="none.jpg">
              <div class="row">
                <div class="col-md-12">
                    <div class="form-group"><label for="catname">Name</label><input class="form-control" name="name" id="catname" required value="" placeholder="Enter Section Name"/></div>
                    <div class="form-group"><label for="photo">Code</label><input type="file" class="form-control" name="photoFile" id="photoFile"/></div>
                    <div class="form-group"><button class="btn btn-block btn-primary">Save Section</button></div>
                </div>
              </div>
          </form>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
@endsection

@section('extraJs')
<script>
$(document).ready(function() {
  $('.data-table').DataTable( {
    "rowCallback": function (nRow, aData, iDisplayIndex) {
        var oSettings = this.fnSettings ();
        $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
        return nRow;
    },
    "lengthChange": false,
    "pageLength": 50
  });
});
function updateStatus(elem) {
  if(confirm('Are you sure want to change status?')) {
  event.preventDefault();
  $(elem).replaceWith("<span id='spinner'><img src='{{ asset(BACKEND_THEME_IMAGES_PATH . 'input-spinner.gif') }}'></span>");
  var _token   = $('meta[name="csrf-token"]').attr('content');
  var s   = ($(elem).attr('data-status')=='1')?0:1;
  var id   = $(elem).attr('data-id');
  var text   = ($(elem).attr('data-status')=='1')?'<a href="#" class="badge badge-danger" data-id="'+id+'" data-status="'+s+'" onclick="updateStatus(this)">InActive</a>':'<a href="#" class="badge badge-success" data-id="'+id+'" data-status="'+s+'" onclick="updateStatus(this)">Active</a>';
  $.ajax({
      type: "get",
      url: "{{ route('subsection-status-update') }}",
      data: {
        pos: id,
        status: s,              
        _token: _token
      },
      dataType: "json",                       
      success: function(response) { 
          var reason = JSON.stringify(response);
          var parsed = JSON.parse(reason);            
          console.log(parsed);
          if (parsed.status == false) {
          //toastr.error(parsed.info);
          //$('.submitBtn').removeAttr("disabled");
          } else {
          //toastr.success(parsed.info);
          
          //window.location.reload('true');               
          
          }
        $('#spinner').replaceWith(text);
      }
  });
  }
}
</script>
@endsection