@extends('admin.default')
@section('title', 'Admin | Permissions')
@section('content')
<style>
.accordion .card-header:after {
    font-family: 'FontAwesome';  
    content: "\f068";
    float: right; 
}
.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067"; 
}
.card .card-title {
    margin-bottom:-0.8rem;
}
.accordion > .card .card-header {
    padding:0.5rem 2rem;
}
.accordion .card-header.collapsed:after {
        margin-top: -5px;
}
.interior-permision-option .interior-card-title:after {
    margin-top: -23px !important;
}
.interior-permision-option .interior-interior-card-title:after {
    margin-top: -40px !important;
}
.inlineList {
   display: inline-block;
  list-style: none;
  
 }
 .accordion  .card-header.icon-removed.collapsed:after
{
    content:"" !important;

 }
 .accordion .card-header.icon-removed.interior-interrior-card-title.collapsed:after{
    content:"" !important;
    margin-left: 50px;
 }
 .card .card-title {
    text-transform: capitalize;
 }
 .accordion .icon-position.card-header:after {
    margin-top: -15px;
}
.accordion .card-header.interrior-card-title.card-header.collapsed:after{
    margin-top: -16px;
}
.accordion .card-header.collapsed:after {
    margin-top: -16px;
}
.accordion .card-header:after {
    margin-top: -16px;
}
</style>
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
        <li class="breadcrumb-item active" aria-current="page">Permissions</li>
    </ol>
</nav>
<div class="container-fluid">
    <div id="accordion" class="accordion">
        <div class="card">
            <div class="card-body">
                <h6>Permissions</h6><br>
                <form method="post" action="{{ route('permissionsStore', $id) }}">
                    <ul>
                        <li style="list-style-type: none;">
                            <div class="card mb-0">
                                <input class="form-check-input" type="checkbox" style="margin-left: 20px; top: 10px;">
                                <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne" aria-expanded="true">
                                    <a class="card-title" style="margin-left: 20px; padding-top: 5px;">
                                        All
                                    </a>
                                </div>
                                <div id="collapseOne" class="card-body collapse show" data-parent="#accordion">
                                    <div id="accordionOne" class="accordion">
                                        <div class="card mb-0">
                                            <div class="card-body">
                                                @foreach ($data->id as $strip)
                                                    <ul >
                                                        <li style="list-style-type: none;">
                                                            <input class="form-check-input" type="checkbox" name="route_id[]" value="{{ $strip }}" {{ (isset($data->strip->$strip->f_id) && $data->strip->$strip->f_id == $strip) ? 'checked' : '' }} style="margin-left: -60px; position: relative; top: 15px;">
                                                            <div class="card-header interior-card-title collapsed" data-toggle="collapse" href="#collapse{{ $strip }}">
                                                                <a class="card-title" style="margin-left: -70px; top: -17px; position: relative;">
                                                                    {{ $data->strip->$strip->name }}
                                                                </a>
                                                            </div>
                                                            <div id="collapse{{ $strip }}" class="card-body collapse" data-parent="#accordion{{ $strip }}">
                                                                <div id="accordion{{ $strip }}" class="accordion" style="margin-left: -77px; margin-right: -38px;">
                                                                    <div class="card ">
                                                                        <div class="card-body">
                                                                            @foreach ($data->strip->$strip->id as $dropdown)
                                                                                <ul >
                                                                                    <li style="list-style-type: none;">
                                                                                        <input class="form-check-input" type="checkbox" name="route_id[]" value="{{ $dropdown }}" {{ (isset($data->strip->$strip->dropdown->$dropdown->f_id) && $data->strip->$strip->dropdown->$dropdown->f_id == $dropdown) ? 'checked' : '' }} style="margin-left: -60px; position: relative; top: 27px;">
                                                                                        <div class="card-header icon-position collapsed" data-toggle="collapse" href="#collapse{{ $dropdown }}">
                                                                                            <a class="card-title" style="margin-left: -70px; top: -4px; position: relative;">
                                                                                                {{ $data->strip->$strip->dropdown->$dropdown->name }}
                                                                                            </a>
                                                                                        </div>
                                                                                        <div id="collapse{{ $dropdown }}" class="card-body collapse" data-parent="#accordion{{ $dropdown }}" style="margin-left: -77px; margin-right: -38px;">
                                                                                            <div id="accordion{{ $dropdown }}" class="accordion">
                                                                                                <div class="card">
                                                                                                    <div class="card-body">
                                                                                                        @if (!isset($data->strip->$strip->dropdown->$dropdown->route))
                                                                                                            @foreach ($data->strip->$strip->dropdown->$dropdown->id as $link)
                                                                                                                <ul >
                                                                                                                    <li style="list-style-type:none;">
                                                                                                                        <input class="form-check-input" type="checkbox" name="route_id[]" value="{{ $link }}" {{ (isset($data->strip->$strip->dropdown->$dropdown->link->$link->f_id) && $data->strip->$strip->dropdown->$dropdown->link->$link->f_id == $link) ? 'checked' : '' }} style="margin-left: -45px; position: relative; top: 20px;">
                                                                                                                        <div class="card-header collapsed" data-toggle="collapse" href="#collapse{{ $link }}">
                                                                                                                            <a class="card-title" style="top:-12px; margin-left:-60px">
                                                                                                                            
                                                                                                                                {{ $data->strip->$strip->dropdown->$dropdown->link->$link->name }}
                                                                                                                            </a>
                                                                                                                        </div>
                                                                                                                        <div id="collapse{{ $link }}" class="card-body collapse" data-parent="#accordion{{ $link }}">
                                                                                                                            <div id="accordion{{ $link }}" class="accordion" style="margin-left: -77px; margin-right: -38px;">
                                                                                                                                <div class="card">
                                                                                                                                    <div class="card-body">
                                                                                                                                        @if (isset($data->strip->$strip->dropdown->$dropdown->link->$link->role))
                                                                                                                                            <ul>
                                                                                                                                                <li style="list-style-type: none;" class="card-header icon-removed collapsed">
                                                                                                                                                    <input class="form-check-input" type="checkbox" style="top:30px;">
                                                                                                                                                    <div class="card-header collapsed" data-toggle="collapse">
                                                                                                                                                        <a class="card-title" style="margin-left:-12px; top:-5px">
                                                                                                                                                            Mark All Checked
                                                                                                                                                        </a>
                                                                                                                                                    </div>
                                                                                                                                                    @foreach ($data->strip->$strip->dropdown->$dropdown->link->$link->id as $index)
                                                                                                                                                        <ul class="inlineList">
                                                                                                                                                            <li style="list-style-type: none;"style="position:relative;margin:10px">
                                                                                                                                                                <input class="form-check-input" type="checkbox" name="route_id[]" value="{{$index}}" {{ (isset($data->strip->$strip->dropdown->$dropdown->link->$link->role->$index->f_id) && $data->strip->$strip->dropdown->$dropdown->link->$link->role->$index->f_id == $index) ? 'checked' : '' }} style="margin-left:-95px;top:30px;position:relative">
                                                                                                                                                                <div class="card-header icon-removed interior-interrior-card-title collapsed" data-toggle="collapse" href="#collapse{{ $index }}" style="margin-left: 90px; position: relative;">
                                                                                                                                                                    <a class="card-title" style="top:-4px; margin-left:-200px;position:relative ">
                                                                                                                                                                        {{ $data->strip->$strip->dropdown->$dropdown->link->$link->role->$index->name ?? '' }}
                                                                                                                                                                    </a>
                                                                                                                                                                </div>
                                                                                                                                                            </li>
                                                                                                                                                        </ul>
                                                                                                                                                    @endforeach
                                                                                                                                                </li>
                                                                                                                                            </ul>
                                                                                                                                        @endif
                                                                                                                                    </div>
                                                                                                                                </div>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    </li>
                                                                                                                </ul>
                                                                                                            @endforeach
                                                                                                        @else
                                                                                                            @if (isset($data->strip->$strip->dropdown->$dropdown->id))
                                                                                                                <ul>
                                                                                                                    <li style="list-style-type: none;" class="card-header icon-removed collapsed">
                                                                                                                        <input class="form-check-input" type="checkbox" style="top:30px; margin-left:px">
                                                                                                                        <div class="card-header collapsed" data-toggle="collapse">
                                                                                                                            <a class="card-title"style="margin-left: -25px; top:-5px">
                                                                                                                                Mark All Checked
                                                                                                                            </a>
                                                                                                                        </div>
                                                                                                                        @foreach ($data->strip->$strip->dropdown->$dropdown->id as $set)
                                                                                                                            <ul  class="inlineList">
                                                                                                                                <li style="list-style-type: none;">
                                                                                                                                    <input class="form-check-input" type="checkbox" name="route_id[]" value="{{ $set }}" {{ (isset($data->strip->$strip->dropdown->$dropdown->link->$set->f_id) && $data->strip->$strip->dropdown->$dropdown->link->$set->f_id == $set) ? 'checked' : '' }} style="margin-left: -100px; top: 45px; position:relative">
                                                                                                                                    <div class="card-header icon-removed collapsed" data-toggle="collapse" href="#collapse{{ $set }}" style="margin:12px">
                                                                                                                                        <a class="card-title" style="margin-left:-122px">
                                                                                                                                            {{ $data->strip->$strip->dropdown->$dropdown->link->$set->name ?? '' }}
                                                                                                                                        </a>
                                                                                                                                    </div>
                                                                                                                                </li>
                                                                                                                            </ul>
                                                                                                                        @endforeach
                                                                                                                    </li>
                                                                                                                </ul>
                                                                                                            @endif
                                                                                                        @endif
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                </ul>
                                                                            @endforeach
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-info text-white float-right " id="save" value="Save">
                                            <span class="mr-2" id="save_text">Save </span>
                                            <div class="spinner-border spinner-border-sm text-primary float-right" id="loader" style="display:none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('li :checkbox').on('click', function () {
            var $chk = $(this),
                $li = $chk.closest('li'),
                $ul, $parent;
            if ($li.has('ul')) {
                $li.find(':checkbox').not(this).prop('checked', this.checked)
            }
            do {
                $ul = $li.parent();
                $parent = $ul.siblings(':checkbox');
                if ($chk.is(':checked')) 
                $parent.prop('checked', $ul.has(':checkbox:not(:checked)'))
                $chk = $parent;
                $li = $chk.closest('li');
            } while ($ul.is(':not(.someclass)'));
        });
    });
   
</script>


@stop