@extends('user.layouts.template')

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- DateTime picker CSS CDN -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <style>
        #assign-role_paginate {
            margin-top: 15px !important;
        }

        .form-check .form-check-input {
            border: 1px solid grey;
        }

        .dataTables_wrapper .dataTables_info {
            top: 40% !important;
        }
    </style>
@endsection

@section('content')
    <!-- Content Start -->

    <div class="content__boxed">
        <div class="content__wrap">
            @php
                $permission = session('permissions');
            @endphp

            <div id="page-titl">
                Team Management <i class="ri-arrow-right-s-line"></i> Assign Role
            </div>

            <div class="card">

                <!-- Custom style form wizard -->
                <div class="card-body">

                    <div class="row">

                        <div class="col-lg-12">
                            <div class="row mb-3 d-flex align-items-center
                            @if($permission == "Admin" || $permission['Team Management']['edit'])
                            @else
                            justify-content-between
                            @endif
                            ">
                                <div class="col-2">
                                    <h4 class="fs-16 fw-semibold mb-0" style="float:left;">Assign Roles</h4>
                                </div>
                                <div class="col-5"></div>
                                <div class="col-3">
                                    <select class="form-select" id="role"
                                        style="float:right; position:relative;font-size:15px;">
                                        <option value="" selected>Select Role Name</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @if($permission == "Admin" || $permission['Team Management']['edit'])
                                    <div class="col-2">
                                        <button class="btn btn-success creat_role" style="position:relative;left:33%;">Assign
                                            new role</button>
                                    </div>
                                @endif
                            </div>

                            <table class="table table-hover align-middle" id="assign-role">
                                <thead>
                                    <tr>

                                        <th scope="col">Permission</th>
                                        {{-- <th scope="col">View</th> --}}
                                        <th scope="col">View</th>
                                        <th scope="col">Create</th>
                                        <th scope="col">Edit</th>
                                        <th scope="col">Delete</th>
                                        <th scope="col">Import</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($modules as $module)
                                        @php
                                            $permissions = array('view', 'view_own', 'creat', 'edit', 'delet', 'import');
                                            foreach ($permissions as $permission) {
                                                $stat[$permission] = DB::table('assign_roles')
                                                    ->where('module_id', $module->id)
                                                    ->where($permission, 1)
                                                    ->get();
                                                $val[$permission] = ($stat[$permission]->isNotEmpty()) ? $stat[$permission][0]->$permission : 0;
                                            }
                                        @endphp
                                        <tr>
                                            <td scope="row">{{ $module->name }}</td>
                                            <td>
                                                @if($module->view_own == 1)
                                                    <div class="form-check">
                                                        <input class="form-check-input permisn" type="checkbox"
                                                            data-module="{{ $module->id }}" data-type="view_own"
                                                            name="permission_view_own[]" value="{{ $val['view_own'] }}"
                                                            id="flexCheckDefault">

                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                @if($module->creat == 1)
                                                    <div class="form-check">
                                                        <input class="form-check-input permisn" type="checkbox"
                                                            data-module="{{ $module->id }}" data-type="creat"
                                                            name="permission_creat[]" value="{{ $val['creat'] }}"
                                                            id="flexCheckDefault">

                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                @if($module->edit == 1)
                                                    <div class="form-check">
                                                        <input class="form-check-input permisn" type="checkbox"
                                                            data-module="{{ $module->id }}" data-type="edit"
                                                            name="permission_edit[]" value="{{ $val['edit'] }}"
                                                            id="flexCheckDefault">

                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                @if($module->delet == 1)
                                                    <div class="form-check">
                                                        <input class="form-check-input permisn" type="checkbox"
                                                            data-module="{{ $module->id }}" data-type="delet"
                                                            name="permission_delet[]" value="{{ $val['delet'] }}"
                                                            id="flexCheckDefault">

                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                @if(isset($module->import) && $module->import == 1)
                                                    <div class="form-check">
                                                        <input class="form-check-input permisn" type="checkbox"
                                                            data-module="{{ $module->id }}" data-type="import"
                                                            name="permission_import[]" value="{{ $val['import'] }}"
                                                            id="flexCheckDefault">

                                                    </div>
                                                @endif
                                            </td>

                                        </tr>
                                    @endforeach

                                </tbody>
                            </table>

                        </div>
                    </div> <!-- end #horizontalwizard-->
                    <!-- END : Form sections -->


                </div>
                <!-- END : Custom style form wizard -->

            </div>




        </div>
    </div>
    <!-- Content End -->
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var myTable = $('#assign-role').DataTable({
                "paging": true,             // Enable pagination
                "searching": true,          // Enable search box
                "ordering": false,           // Enable sorting
                "info": true,               // Show table info
                "lengthMenu": [11],  // Page size options
                "pageLength": 11           // Default page size
            });

            var allPages = myTable.rows().nodes().to$();

            $('#role').change(function () {
                $('.permisn').prop('checked', false);
                var role = $('#role').val();
                if (role != '') {
                    $.ajax({
                        url: '{{ route("getModuleRoles") }}',
                        type: 'POST',
                        data: {
                            role: role,
                        },
                        success: function (data) {
                            //console.log(data);
                            for (let i = 0; i < data.length; i++) {
                                let module = `${data[i].module_id}`;
                                if (data[i].view == 1) {
                                    $('.permisn[data-module=' + module + '][data-type="view"]').prop('checked', true)
                                }
                                if (data[i].view_own == 1) {
                                    $('.permisn[data-module=' + module + '][data-type="view_own"]').prop('checked', true)
                                }
                                if (data[i].creat == 1) {
                                    $('.permisn[data-module=' + module + '][data-type="creat"]').prop('checked', true)
                                }
                                if (data[i].edit == 1) {
                                    $('.permisn[data-module=' + module + '][data-type="edit"]').prop('checked', true)
                                }
                                if (data[i].delet == 1) {
                                    $('.permisn[data-module=' + module + '][data-type="delet"]').prop('checked', true)
                                }
                            }
                        }
                    });
                }
            });

            $('.creat_role').click(function () {
                var permission_view = {};
                var permission_view_own = {};
                var permission_creat = {};
                var permission_edit = {};
                var permission_delet = {};
                var role = $('#role').val();

                $('.permisn', allPages).each(function () {
                    let module = $(this).data('module');
                    let mod = `${module}`;

                    if ($(this).is(':checked')) {
                        var modval = 1;
                    } else {
                        var modval = 0;
                    }
                    if ($(this).data('type') == 'view') {
                        permission_view[mod] = modval;
                    }
                    if ($(this).data('type') == 'view_own') {
                        permission_view_own[mod] = modval;
                    }
                    if ($(this).data('type') == 'creat') {
                        permission_creat[mod] = modval;
                    }
                    if ($(this).data('type') == 'edit') {
                        permission_edit[mod] = modval;
                    }
                    if ($(this).data('type') == 'delet') {
                        permission_delet[mod] = modval;
                    }
                });

                if (role != '') {
                    Swal.fire({
                        title: 'Warning',
                        text: 'Are you sure to update?',
                        icon: 'warning',
                        showCancelButton: true,
                        customClass: {
                            confirmButton: 'btn btn-danger',
                            cancelButton: 'btn btn-secondary'
                        },
                        confirmButtonText: 'Yes'
                    }).then((result) => {
                        if (result.isConfirmed) {

                            $.ajax({
                                url: '{{ route("assignRolePermission") }}',
                                type: 'POST',
                                data: {
                                    permission_view: permission_view,
                                    permission_view_own: permission_view_own,
                                    permission_creat: permission_creat,
                                    permission_edit: permission_edit,
                                    permission_delet: permission_delet,
                                    role: role,
                                },
                                success: function (response) {
                                    console.log(response);
                                    Swal.fire('Role Assigned Successfully');
                                    // location.reload();
                                }
                            });
                        }
                    });
                } else {
                    Swal.fire('Please select a role');
                }
            });


            // live view check support
            $('#assign-role').on('change', '.permisn', function () {
                let $this = $(this);
                let moduleId = $this.data('module');
                let type = $this.data('type');
                let checked = $this.is(':checked');

                // keep value synced
                $this.val(checked ? 1 : 0);

                if (checked) {
                    // If user selects create/edit/delete → force view
                    if (type === 'creat' || type === 'edit' || type === 'delet') {
                        $('.permisn[data-module="' + moduleId + '"][data-type="view_own"]').prop('checked', true).val(1);
                    }
                } else {
                    // If view_own unchecked → clear all in that row
                    if (type === 'view_own') {
                        $('.permisn[data-module="' + moduleId + '"]').prop('checked', false).val(0);
                    }
                }
            });
        });
    </script>
@endsection