@extends('layouts.backend')
@section('mainContentArea')
    <div class="card card-default">
        <div class="card-header">
            <h4>Manage Sub-Section</h4>
            <a href="{{ route('subsections.create') }}" class="btn btn-success float-right btn-sm" style="margin:10px;"><i class="fa fas fa-plus"></i> Add New Subsection</a> 
           
        </div>

        <div class="alert alert-default" >
            <form action="{{ route('subsections-list') }}" method="get">
               
                <h4>Filter </h4>
                <table class="table filterPosSo"> 
                    <tr>
                        <td >Sub-Sections</td>
                        <td >Status</td>
                        <td colspan="2">ACTION</td>
                    </tr>
                    <tr>
                        <td width="30%">
                            <select name="section[]"  class="input-md"  multiple="multiple" >                                
                                @foreach($data as $cname)
                                <option value="{{ $cname->id }}" {{ ( !empty(request("section")) && in_array($cname->id, request("section")) ? "selected" : "") }}>{{ $cname->name }}</option>
                                @endforeach
                            </select> 
                        </td>
                        <td>
                            <select name="status" id="status" class="form-control" >
                                <option value="">select</option>                               
                                <option value="1" {{  (request("status") == '1') ? "selected" : "" }}>Active</option>
                                <option value="0" {{  (request("status") == '0') ? "selected" : "" }}>Inactive</option>
                              
                            </select>
                        </td>
                        
                        <td><button class="btn btn-block btn-success"><i class="fa fas fa-search" id="submit"></i></button></td>
                        <td><button class="btn btn-block btn-warning" type="button" onclick="window.location.href='{{ route('subsections-list') }}';"><i class="fa fas fa-refresh"></i></button></td>
                   
                    </tr>
                </table>
            </form>
        </div>

        <div class="card-body">         
        <input type="button" style="font-size: 20px;float: right;margin-right: 20px;" class="btn btn-xs btn-info btn-sm" id="active" name="active" value="Active" />  
        <input type="button" style="font-size: 20px;float: right;margin-right: 20px;" class="btn btn-xs btn-danger btn-sm" id="deactive" name="deActive" value="InActive" /> 
        <br><br> <br><br>   
            <table class="table table-striped table-bordered" id="locationTables">
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>Name</th>
                        <th>Parent</th>                   
                        
                        <th><input type='checkbox' id='CheckAll'></th> 
                        <!-- <th>Status</th> -->
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($sections as $key => $group)
                        @php $color = '' ; 
                              if($group->is_active == 1)
                              {
                                 $color = 'green';
                              }else
                              {
                                 $color = 'red';
                              }                                
                                
                        @endphp
                        
                        <tr style="color:{{$color}}">
                            <td>{{$key + $sections->firstItem() }}</td> 
                            <td>{{ empty($group->name) ? 'N/A' : $group->name }}</td>                            
                            <td>{{ empty($group->parent) ? 'N/A' : $group->parent->name }}</td>                           
                           
                            <td><input type='checkbox' name="posID[]" class='checkboxes' value="{{ $group->id }}"></td>
                            <!-- <td>@if($group->approve_status == 1)
                            <label data-id="{{ $group->id }}" id="view-post" class="badge badge-success">Pending</label>
                            @else
                            <label data-id="{{ $group->id }}" id="view-post" class="badge badge-danger">approved</label>
                            @endif</td> -->
                            <td>
                              <a href="{{ route('subsections.edit', $group->id) }}" class="btn btn-success float-right btn-sm" style="margin:10px;"><i class="fa fas fa-pencil"></i> Edit</a> 
                            </td>
                           
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @php if($sections->count() > 0) { @endphp {!! $sections->appends(request()->input())->links() !!} @php } @endphp
    </div>

<!-- Modal -->






   
@endsection

@section('extraJs')
<script type="text/javascript" src=" https://www.gyrocode.com/articles/jquery-datatables-column-reordering-and-resizing"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" ></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js" ></script>

<script type="text/javascript">
i = 0;

$('#active').click(function () {      
    var arr = [];
    $('.checkboxes:checked').each(function () {
            arr[i++] = $(this).val();            
            setsubsection($(this).val(),1);
    });
    console.log(arr);
}); 

$('#deactive').click(function () {      
    var arr = [];
    $('.checkboxes:checked').each(function () {
            arr[i++] = $(this).val();            
            setsubsection($(this).val(),0);
    });
    console.log(arr);
});

function setsubsection(pos,status){
    
    var _token   = $('meta[name="csrf-token"]').attr('content'); 
    $.ajax({
        type: "get",
        url: "{{ route('subsection-status-update') }}",
        data: {
        pos: pos,            
        status:status,              
        _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');               
            
            }
        }
    });
   
} 

</script>

@endsection