@extends('layouts.user.main')

@section('content')

<script src="{{asset('assets/js/validation/admin/role/add.js')}}"></script>

@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-column gap-7 gap-lg-10">
                <form class="form" method="POST" action="{{route('role.store')}}" id="kt_add_role_form">
                    @csrf
                    <!--begin::Scroll-->
                    <div class="card card-flush py-4">
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Add Role</h2>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <!--begin::Input group-->
                            <div class="fv-row mb-10">
                                <!--begin::Label-->
                                <label class="fs-3 fw-bolder form-label mb-2">
                                    <span class="required">Role Name</span>
                                </label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid mb-2" name="name" placeholder="Name" value="{{ old('name') }}" id="name"/>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Permissions-->
                            <div class="fv-row">
                                <!--begin::Label-->
                                <label class="fs-1 fw-bolder form-label d-flex" id="permissions">Role Permissions</label>
                                <!--end::Label-->
                                <!--begin::Table wrapper-->
                                <div class="table-responsive">
                                    <!--begin::Table-->
                                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                                        <!--begin::Table body-->
                                        <tbody class="text-gray-600 fw-bold">
                                            <!--begin::Table row-->
                                            <tr>
                                                <td class="text-gray-800">Full Access
                                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Allows a full access to the system"></i>
                                                </td>
                                                <td>
                                                    <!--begin::Checkbox-->
                                                    <label class="form-check form-check-custom form-check-solid me-9">
                                                        <input class="form-check-input" type="checkbox" value="" id="kt_roles_select_all" />
                                                        <span class="form-check-label" for="kt_roles_select_all">Select all</span>
                                                    </label>
                                                    <!--end::Checkbox-->
                                                </td>
                                            </tr>
                                            <!--end::Table row-->
                                            <!--begin::Table row-->
                                            <tr>
                                                <td class="text-gray-800">Group Access
                                                <i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Allows group wise access to the system">
                                                </i>
                                                </td>
                                                <td>
                                                    <div class="d-flex">
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                            <input class="form-check-input group-checkbox" type="checkbox" value="" id="kt_roles_survilance" />
                                                            <span class="form-check-label" for="kt_roles_survilance">Survilance</span>
                                                        </label>
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                            <input class="form-check-input group-checkbox" type="checkbox" value="" id="kt_roles_monitoring" />
                                                            <span class="form-check-label" for="kt_roles_monitoring">Monitoring</span>
                                                        </label>
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                            <input class="form-check-input group-checkbox" type="checkbox" value="" id="kt_roles_tools" />
                                                            <span class="form-check-label" for="kt_roles_tools">Tools</span>
                                                        </label>
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                            <input class="form-check-input group-checkbox" type="checkbox" value="" id="kt_roles_billing" />
                                                            <span class="form-check-label" for="kt_roles_billing">Billing</span>
                                                        </label>
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                            <input class="form-check-input group-checkbox" type="checkbox" value="" id="kt_roles_settings" />
                                                            <span class="form-check-label" for="kt_roles_settings">Settings</span>
                                                        </label>
                                                        <label class="form-check form-check-sm form-check-custom form-check-solid me-5 me-lg-20">
                                                            <input class="form-check-input group-checkbox" type="checkbox" value="" id="kt_roles_other" />
                                                            <span class="form-check-label" for="kt_roles_other">Other</span>
                                                        </label>
                                                    </div>
                                                </td>
                                            </tr>
                                            <!--end::Table row-->
                                            @php
                                                // Grouping the permissions by role
                                                $groupedPermissions = $permissions->groupBy(function($permission) {
                                                    return explode('###', $permission->name)[0];
                                                });
                                            @endphp

                                            @foreach($groupedPermissions as $role => $permissionsForRole)
                                                <tr>
                                                    <!-- Display role -->
                                                    <td class="text-gray-800">{{ $role }}</td>
                                                    <td>
                                                        <div class="d-flex">
                                                            <!-- Display Read checkbox -->
                                                            @if (!in_array($role.'###Read', $unUsedPermissions))
                                                            <label class="form-check form-check-sm form-check-custom form-check-solid me-5">
                                                                <input class="form-check-input" type="checkbox" value="{{$role.'###Read'}}" 
                                                                   name="permissions[]" id="{{ strtolower(str_replace(' ', '_', $role)) . '_read' }}"
                                                                    @if($permissionsForRole->contains('###Read')) checked @endif />
                                                                <span class="form-check-label">Read</span>
                                                            </label>
                                                            @endif
                                                            <!-- Display Write checkbox -->
                                                            @if (!in_array($role.'###Write', $unUsedPermissions))
                                                            <label class="form-check form-check-sm form-check-custom form-check-solid me-5">
                                                                <input class="form-check-input" type="checkbox" value="{{$role.'###Write'}}" 
                                                                    name="permissions[]" id="{{ strtolower(str_replace(' ', '_', $role)) . '_write' }}"
                                                                    @if($permissionsForRole->contains('###Write')) checked @endif />
                                                                <span class="form-check-label">Write</span>
                                                            </label>
                                                            @endif
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Table-->
                                </div>
                                <!--end::Table wrapper-->
                            </div>
                            <!--end::Permissions-->
                        </div>
                        <div class="card-footer">
                            <div class="d-flex">
                                <a href="{{ route('role.index') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                                <button type="submit" class="btn btn-primary me-3">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
		</div>
	</div>
</div>
<script>
$(document).ready(function() {

    // List of permissions per group
    var permissions = {
        'Survilance': [
            'Chamka Report###Read', 'Chamka Report###Write',
            'Line Trade Report###Read', 'Line Trade Report###Write',
            'All In One Report###Read', 'All In One Report###Write',
            'Reverse Trade History###Read', 'Reverse Trade History###Write'
        ],
        'Monitoring': [
            'Ban Trade Report###Read', 'IP Report###Read', 'IP Report###Write',
            'Position###Read', 'Position Counter Report###Read', 'Profitable Position###Read', 
            'CMX Position###Read', 'Position Mismatch Report###Read'
        ],
        'Tools': [
            'Bulk Position###Read', 'Bulk Position###Write',
            'Flag & Alerts###Read', 'Flag & Alerts###Write',
            'Reverse Trade History###Read', 'Reverse Trade History###Write',
            'Break Intervals###Read', 'Break Intervals###Write',
            'Stopout Reopen###Read', 'Stopout Reopen###Write',
            'Position Square Off###Read', 'Position Square Off###Write',
            'Open Orders###Read', 'Open Orders###Write',
            'Telegram###Read', 'Telegram###Write', 'FMT v/s Vas###Read', 'FMT v/s Vas###Write',
            'Dividend###Read', 'Dividend###Write', 'Manual Reverse Trade###Read', 'Manual Reverse Trade###Write', 
            'Blacklist IP CID###Read', 'Blacklist IP CID###Write',
             'Dg Scanner###Read', 'Dg Scanner###Write',
        ],
        'Other': [
            'Dealer Trade Reports###Read', 'Intraday Report###Read', 'Most Traded Script of the Day###Read', 
            'Same Quantity Same Script Report###Read', 'Trade Validation Report###Read', 
            'Trade Validation Report###Write', 'Life Time Balance Report###Read', '3 Week P/L Report###Read'
        ],
        'Billing': [
            'Closing Price###Write', 'P/L Reports###Read', 'P/L Reports###Write',
            'Brokerage Report###Read', 'Brokerage Report###Write',
            'Billing Reports###Read', 'Managers###Read', 'Managers###Write',
            'Users###Read', 'Users###Write', 'Unassigned Brokerage Users###Read', 
            'Unassigned Brokerage Users###Write', 'Cutting Deal Mismatch Report###Read', 
            'Cutting Deal Mismatch Report###Write', 'Telegram###Read', 'Telegram###Write',
            'Custom Contract Size###Read', 'Custom Contract Size###Write',
            'Exclusion Groups for Billing###Read', 'Exclusion Groups for Billing###Write',
            'Disputed Users###Read', 'Disputed Users###Write',
            'Deposit Withdrawal###Read', 'Deposit Withdrawal###Write', 'Send to Telegram###Read', 'Send to Telegram###Write',
        ],
        'Settings': [
            'Settings###Write', 'Telegram###Read', 'Telegram###Write'
        ]
    };

    function updateGroupCheckbox(group) {
        var allChecked = permissions[group].every(function(permission) {
            return $('input[name="permissions[]"][value="' + permission + '"]').prop('checked');
        });    
        $('#' + group).prop('checked', allChecked);
    }

    $('input[name="permissions[]"]').change(function() {
        for (var group in permissions) {
            updateGroupCheckbox(group);
        }
    });

    $('#kt_roles_survilance').change(function() {
        var isChecked = $(this).prop('checked');        
        permissions['Survilance'].forEach(function(permission) {
            $('input[name="permissions[]"][value="' + permission + '"]').prop('checked', isChecked);
        });
    });

    $('#kt_roles_monitoring').change(function() {
        var isChecked = $(this).prop('checked');
        permissions['Monitoring'].forEach(function(permission) {
            $('input[name="permissions[]"][value="' + permission + '"]').prop('checked', isChecked);
        });
    });

    $('#kt_roles_tools').change(function() {
        var isChecked = $(this).prop('checked');
        permissions['Tools'].forEach(function(permission) {
            $('input[name="permissions[]"][value="' + permission + '"]').prop('checked', isChecked);
        });
    });

    $('#kt_roles_billing').change(function() {
        var isChecked = $(this).prop('checked');
        permissions['Billing'].forEach(function(permission) {
            $('input[name="permissions[]"][value="' + permission + '"]').prop('checked', isChecked);
        });
    });

    $('#kt_roles_settings').change(function() {
        var isChecked = $(this).prop('checked');
        permissions['Settings'].forEach(function(permission) {
            $('input[name="permissions[]"][value="' + permission + '"]').prop('checked', isChecked);
        });
    });

    $('#kt_roles_other').change(function() {
        var isChecked = $(this).prop('checked');
        permissions['Other'].forEach(function(permission) {
            $('input[name="permissions[]"][value="' + permission + '"]').prop('checked', isChecked);
        });
    });
    
    $('#kt_roles_select_all').change(function() {
        var isChecked = $(this).prop('checked');
        $('input[name="permissions[]"]').prop('checked', isChecked);
        $('.group-checkbox').prop('checked', isChecked);
    });

    $('#chamka_report_write, #line_trade_report_write').change(function() {
        var chamkaChecked   = $('#chamka_report_write').prop('checked');
        var lineChecked     = $('#line_trade_report_write').prop('checked');
    
        if (!chamkaChecked && !lineChecked) {
            $('#reverse_trade_history_read, #reverse_trade_history_write').prop('checked', false);
        } else {
            var isChecked = chamkaChecked || lineChecked;
            $('#reverse_trade_history_read, #reverse_trade_history_write').prop('checked', isChecked);
        }
    });

    $('input[type="checkbox"]').on('change', function() {
        var writeCheckbox = $(this);
        if (writeCheckbox.attr('value').includes('###Write')) {
            var checkWriteValue = writeCheckbox.attr('value').split('###')[0]+'###Read';
            isCheck             = $('input[name="permissions[]"][value="' + checkWriteValue + '"]').is(':checked');
            if (!isCheck) {
                $('input[name="permissions[]"][value="' + checkWriteValue + '"]').prop('checked', true)
            }
        }
    });

    for (var group in permissions) {
        updateGroupCheckbox(group);
    }
});

</script>
@endsection