@extends('layouts.master')
@section('title',trans('dashboard.add_slider'))
@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('dashboard_assets/app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('dashboard_asstes/app-assets/vendors/css/forms/selects/select2.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('dashboard_assets/app-assets/vendors/css/ui/prism.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('dashboard_assets/app-assets/vendors/css/file-uploaders/dropzone.min.css')}}">
@endsection
@section('page-content')

<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">@lang('dashboard.sliders')</h3>
                <div class="row breadcrumbs-top d-inline-block">
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">@lang('dashboard.sliders')</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{route('admin.sliders.index')}}">@lang('dashboard.show_sliders')</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{route('admin.sliders.create')}}">@lang('dashboard.add_slider')</a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <div class="row match-height">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title" id="basic-layout-form-center">@lang('dashboard.add_slider')</h4>
                            <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                    <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                    <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                    <li><a data-action="close"><i class="ft-x"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        @if (count($errors) > 0)
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-danger alert-dismissible mb-2 mr-5 ml-5 " role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    {{$error}}
                                </div>
                            @endforeach
                        @endif
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="ml-4 mt-16 w-9/12">
                                    <form action="{{route('admin.roles.store')}}" method="POST">
                                        @csrf

                                        <h1 class="text-3xl mt-4 mb-8"> Create Role </h1>

                                        <div class="mb-6">
                                            <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Role Name</label>
                                            <input type="text" value="{{old('name')}}" name="name" id="email" class="bg-gray-50 w-80 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 " placeholder="User, Editor, Author ... " >

                                            @foreach ($errors->get('name') as $error)
                                                <p class="text-red-600">{{$error}}</p>
                                            @endforeach
                                        </div>

                                        <table class="permissionTable border rounded-md bg-white overflow-hidden shadow-lg my-4 p-4">
                                            <th class="px-4 py-4">
                                                {{__('Section')}}
                                            </th>

                                            <th class="px-4 py-4">
                                                <label>
                                                    <input class="grand_selectall" type="checkbox">
                                                    {{__('Select All') }}
                                                </label>
                                            </th>

                                            <th class="px-4 py-4">
                                                {{__("Available permissions")}}
                                            </th>



                                            <tbody>
                                            @foreach($permissions as $key => $group)
                                                <tr class="py-8">
                                                    <td class="p-6">
                                                        <b>{{ ucfirst($key) }}</b>
                                                    </td>
                                                    <td class="p-6" width="30%">
                                                        <label>
                                                            <input class="selectall" type="checkbox">
                                                            {{__('Select All') }}
                                                        </label>
                                                    </td>
                                                    <td class="p-6">

                                                        @forelse($group as $permission)

                                                            <label style="width: 30%" class="">
                                                                <input name="permissions[]" class="permissioncheckbox" class="rounded-md border" type="checkbox" value="{{ $permission->id }}">
                                                                {{$permission->name}} &nbsp;&nbsp;
                                                            </label>

                                                        @empty
                                                            {{ __("No permission in this group !") }}
                                                        @endforelse

                                                    </td>

                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>


                                        <button type="submit" class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 ">
                                            Create Role
                                        </button>

                                    </form>
                                </div>                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('js')
<!-- BEGIN VENDOR JS-->
<script src="{{asset('dashboard_assets/app-assets/vendors/js/vendors.min.js')}}" type="text/javascript"></script>
<!-- BEGIN VENDOR JS-->
<!-- BEGIN PAGE VENDOR JS-->
<script src="{{asset('dashboard_assets/app-assets/vendors/js/extensions/dropzone.min.js')}}" type="text/javascript"></script>
<script src="{{asset('dashboard_assets/app-assets/vendors/js/ui/prism.min.js')}}" type="text/javascript"></script>
<!-- END PAGE VENDOR JS-->
<!-- BEGIN MODERN JS-->
<script src="{{asset('dashboard_assets/app-assets/js/core/app-menu.js')}}" type="text/javascript"></script>
<script src="{{asset('dashboard_assets/app-assets/js/core/app.js')}}" type="text/javascript"></script>
<script src="{{asset('dashboard_assets/app-assets/js/scripts/customizer.js')}}" type="text/javascript"></script>
<!-- END MODERN JS-->
<!-- BEGIN PAGE LEVEL JS-->
<script src="{{asset('dashboard_assets/app-assets/js/scripts/extensions/dropzone.js')}}" type="text/javascript"></script>
<!-- END PAGE LEVEL JS-->

    <script>
$(".permissionTable").on('click', '.selectall', function () {

    if ($(this).is(':checked')) {
        $(this).closest('tr').find('[type=checkbox]').prop('checked', true);

    } else {
        $(this).closest('tr').find('[type=checkbox]').prop('checked', false);

    }

    calcu_allchkbox();

});

$(".permissionTable").on('click', '.grand_selectall', function () {
    if ($(this).is(':checked')) {
        $('.selectall').prop('checked', true);
        $('.permissioncheckbox').prop('checked', true);
    } else {
        $('.selectall').prop('checked', false);
        $('.permissioncheckbox').prop('checked', false);
    }
});

$(function () {

    calcu_allchkbox();
    selectall();

});

function selectall(){

    $('.selectall').each(function (i) {

        var allchecked = new Array();

        $(this).closest('tr').find('.permissioncheckbox').each(function (index) {
            if ($(this).is(":checked")) {
                allchecked.push(1);
            } else {
                allchecked.push(0);
            }
        });

        if ($.inArray(0, allchecked) != -1) {
            $(this).prop('checked', false);
        } else {
            $(this).prop('checked', true);
        }

    });
}

function calcu_allchkbox(){

    var allchecked = new Array();

    $('.selectall').each(function (i) {


        $(this).closest('tr').find('.permissioncheckbox').each(function (index) {
            if ($(this).is(":checked")) {
                allchecked.push(1);
            } else {
                allchecked.push(0);
            }
        });


    });

    if ($.inArray(0, allchecked) != -1) {
        $('.grand_selectall').prop('checked', false);
    } else {
        $('.grand_selectall').prop('checked', true);
    }

}



$('.permissionTable').on('click', '.permissioncheckbox', function () {

    var allchecked = new Array;

    $(this).closest('tr').find('.permissioncheckbox').each(function (index) {
        if ($(this).is(":checked")) {
            allchecked.push(1);
        } else {
            allchecked.push(0);
        }
    });

    if ($.inArray(0, allchecked) != -1) {
        $(this).closest('tr').find('.selectall').prop('checked', false);
    } else {
        $(this).closest('tr').find('.selectall').prop('checked', true);

    }

    calcu_allchkbox();

});

    </script>
@endsection