@extends('layouts/contentLayoutMaster')

@section('title', 'Edit Role')

@section('content')
    <link rel="stylesheet" href="{{ asset('vendors/css/forms/select/select2.min.css') }}">
    <style>
        .row_checkbox {
            background-size: 65%;
        }

        .select2-selection__arrow b {
            display: none;
        }
    </style>
    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Edit Role</h4>
                    </div>
                    <div class="card-body">
                        @if ($message = Session::get('success'))
                            <div class="demo-spacing-0 my-2">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <div class="alert-body">{{ $message }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <!-- Add role form -->
                        <form action="{{ route('rolesUpdate', $role->id) }}" class="row" method="POST">
                            @csrf
                            {{-- @method('PUT') --}}
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="modalRoleName">Role Name</label>
                                <input type="text" id="role" name="role" required class="form-control"
                                    placeholder="Enter role name" tabindex="-1" data-msg="Please enter role name"
                                    value="{{ old('role', $role->name) }}" />
                                @error('role')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="modalRoleName">Role Access Level</label>
                                <select class="select2 form-select" name="access_level">
                                    <option value="" selected disabled>Select Access Level</option>
                                    <option value="1"
                                        {{ old('access_level', $role->access_level) == 1 ? 'selected' : '' }}>Collection
                                        Points (FFL)</option>
                                    <option value="2"
                                        {{ old('access_level', $role->access_level) == 2 ? 'selected' : '' }}>Area Office
                                    </option>
                                    <option value="3"
                                        {{ old('access_level', $role->access_level) == 3 ? 'selected' : '' }}>Zones</option>
                                    <option value="4"
                                        {{ old('access_level', $role->access_level) == 4 ? 'selected' : '' }}>Sections
                                    </option>
                                    <option value="5"
                                        {{ old('access_level', $role->access_level) == 5 ? 'selected' : '' }}>Departments
                                    </option>
                                    <option value="6"
                                        {{ old('access_level', $role->access_level) == 6 ? 'selected' : '' }}>Plant
                                    </option>
                                </select>
                                @error('access_level')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 col-12 mt-1">
                                <label for="">Is Single Level?</label><br>
                                <div class="form-check form-check-inline mt-1">
                                    <input class="form-check-input" type="checkbox" id="is_single" name="is_single"
                                        value="1" @if ($role->is_single == 1) checked @endif>
                                    <label class="form-check-label" for="is_single">Single Level</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <h4 class="mt-2 pt-50">Give Permissions to Role</h4><br>
                                <span class="btn btn-primary cursor-pointer" id="check_all">Check All</span>
                                <!-- Permission table -->
                                {{-- <div class="table-responsive"> --}}
                                    <div class="mt-2 permission-table" style="border-bottom:2px solid #dcd9fe">
                                    <table class="table table-flush-spacing">
                                        <tbody>
                                                                                        @foreach ($permissions as $key => $permission)
                                                @php
                                                    if ($key == 'Permissions') {
                                                        continue;
                                                    }
                                                @endphp
                                                <div class="row m-0 p-0" style="border-top:2px solid #dcd9fe; border-left:2px solid #dcd9fe; border-right:2px solid #dcd9fe">
                                                    <div class="col-12 d-flex align-items-center p-0 m-0">
                                                        <div class="d-flex justify-content-start align-items-center h-100 py-1 pe-1" style="border-right:1px solid #dcd9fe; width: 300px; background-color: #eceaff;">

                                                            <div class="p-0 ms-1 me-1">
                                                                <input title="check all row elements"
                                                                    id="row_checkbox_{{ $iteration_no }}"
                                                                    onclick="setRow('{{ $iteration_no }}')"
                                                                    class="cursor-pointer form-check-input row_checkbox"
                                                                    type="checkbox" style="width:20px; height:20px"/>
                                                            </div>
                                                            <div class="text-wrap fw-bolder" style="font-size:14px">{{ $key }}</div>
                                                        </div>
                                                        <div class="d-flex flex-wrap ps-2 py-1 w-75">
                                                            @foreach ($permission as $specificPermission)
                                                                @php
                                                                    try {
                                                                        $rolePermission = $role->permissions
                                                                            ->where('name', $specificPermission['name'])
                                                                            ->first()
                                                                            ->toArray();
                                                                    } catch (\Throwable $th) {
                                                                        $rolePermission = [];
                                                                    }
                                                                @endphp
                                                                {{-- <td>
                                                                    <div class="row"> --}}
                                                                        <div class="form-check" style=" margin: 8px 0px;">
                                                                            <input
                                                                                class="form-check-input row_fields_{{ $iteration_no }}"
                                                                                type="checkbox"
                                                                                id="{{ $specificPermission['name'] }}"
                                                                                name="permissions[]"
                                                                                value="{{ $specificPermission['name'] }}"
                                                                                @if (!empty($rolePermission) && $rolePermission['name'] == $specificPermission['name']) checked @endif />
                                                                            <label class="form-check-label me-4"
                                                                                for="{{ $specificPermission['name'] }}">
                                                                                {{ $specificPermission['name'] }} </label>
                                                                        </div>
                                                                    {{-- </div>
                                                                </td> --}}
                                                            @endforeach
                                                        </div>  
                                                    </div>
                                                </div>
                                                @php($iteration_no++)
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <!-- Permission table -->
                            </div>
                            <div class="col-12 mt-2">
                                <button type="submit" class="btn btn-primary me-1">Update</button>
                                <button type="reset" class="btn btn-outline-secondary waves-effect me-1">Reset</button>
                                <a class="btn btn-outline-secondary cancel-btn"
                                    href="{{ route('roles.index') }}">Cancel</a>
                            </div>
                        </form>
                        <!--/ Add role form -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Basic Floating Label Form section end -->
@endsection
@section('page-script')
    <script src="{{ asset('vendors/js/forms/select/select2.full.min.js') }}"></script>
    <script>
        var count = 1;
        $(document).on('click', '#check_all', function() {
            checked = true;
            if (count % 2 == 0) {
                checked = false;
                $('#check_all').text('Check all')
            } else {
                $('#check_all').text('Un Check all')
            }
            $('.permission-table :checkbox').each(function() {
                this.checked = checked;
            });
            count++;
        });

        function setRow(row_num) {
            let isChecked = $('#row_checkbox_' + row_num).is(':checked');
            $('.row_fields_' + row_num).each(function() {
                this.checked = isChecked
            });
        }

        $('.select2').select2();
    </script>
@endsection