@extends('backend.layouts.app')
@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3 ">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="h3">{{ translate('Create Account Type') }}</h1>
            </div>
        </div>
    </div>
    <div class="modal-content">
        <form action="{{ route('admin.accountType_added') }}" style="padding: 0 16px 16px 16px;" method="post"
            enctype="multipart/form-data" id="addFormData">
            @csrf
            <div class="page-content bg-white" style="margin: 1rem 0 0 0;">
                <div class="form-group my-3 error-text">
                    <label for="name" class="labelstyle">
                        Account Type
                        <span class="text-danger ml-1">*</span>
                    </label>
                    <input type="text" placeholder="Eg: Sale Assistant, Sale Representative etc" name="name" class="form-control" required
                        style="width: 70%" autocomplete="off">
                    <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;"
                        id="errorname"></span>
                </div>
                <div class="form-group mb-3 error-text">
                    <label for="name" class="labelstyle">
                        Description
                        <span class="text-danger ml-1">*</span>
                    </label>
                    <div>
                        <textarea style="width:70%" rows="4" class="subaccountTextarea" name="description" placeholder="Enter description"></textarea>
                    </div>
                    <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;"
                        id="description">
                    </span>
                    <p style="font-size: 80%;color:#4a4a4a;margin:0px">
                        *Indicate the department you belong to within your company, such as Sales, Marketing, Business Development, etc.  Show this text as helping text in light color after the deparment fields in seller sub account
                    </p>
                </div>
                <div class="form-group mb-3 error-text">
                    <label for="name" class="labelstyle">
                        <h5 class="mb-0 h6" name="permissions">{{ translate('Permissions') }} <span
                                class="text-danger ml-1">*</span></h5>

                    </label>
                    <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;"
                        id="permissions"></span>
                    <div class="permission-tbl" name="permission">
                        <div class="form-group">
                            <div class="permissionMenu">
                                <table class="table table-bordered table-sm">
                                    <thead>
                                        <tr>
                                            <th width="4%">Sr. No.</th>
                                            <th>Particulars</th>
                                            <th colspan="2">Modules</th>
                                            <th class="text-center">Permissions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $srNo = 1;
                                            $permissionIndex = 0; 
                                        @endphp
                                    
                                        @foreach($permissionList as $index => $permission)
                                            @php
                                                $rowSpan = $permission['rowspan'] ?? 1;
                                                $colSpan = $permission['colspan'] ?? 1;
                                                $parentClass = "parentTd{$index}";
                                            @endphp
                                    
                                            <tr>
                                                <td class="text-center" rowspan="{{ $rowSpan }}">{{ $srNo++ }}</td>
                                                <td rowspan="{{ $rowSpan }}" class="{{ $parentClass }} hoverable">{{ $permission['name'] }}</td>
                                    
                                                @if (!empty($permission['submenu']))
                                                    @foreach ($permission['submenu'] as $submenuIndex => $submenu)
                                                        @php
                                                            $nestedRowSpan = !empty($submenu['submenu']) ? count($submenu['submenu']) : 1;
                                                            $nestedColSpan = $submenu['colspan'] ?? 1;
                                                            $childClass = "childtd{$index}-{$submenuIndex}";
                                                        @endphp
                                    
                                                        <td rowspan="{{ $nestedRowSpan }}" colspan="{{ $nestedColSpan }}" class="{{ $childClass }} hoverable">{{ $submenu['name'] ?? 'N/A' }}</td>
                                                        @if (!empty($submenu['submenu']))
                                                            <td class="{{ $childClass }} hoverable">{{ $submenu['submenu'][0]['name'] ?? 'N/A' }}</td>
                                                            <td class="text-center {{ $childClass }} hoverable">
                                                                <label class="custom-checkbox m-0 p-0 d-inline">
                                                                    <input type="checkbox" name="permissions[{{ $permissionIndex }}][name]" value="{{ $submenu['submenu'][0]['name'] ?? 'N/A' }}">
                                                                    <input type="hidden" name="permissions[{{ $permissionIndex }}][slug]" value="{{ rtrim(config('app.front_url'), '/') . '/' . ltrim($submenu['submenu'][0]['slug'] ?? '', '/') }}">
                                                                    <input type="hidden" name="permissions[{{ $permissionIndex }}][class]" value="{{ $submenu['submenu'][0]['class'] ?? '' }}">
                                                                    <input type="hidden" name="permissions[{{ $permissionIndex }}][id]" value="{{ $submenu['submenu'][0]['id'] ?? '' }}">
                                                                    <span class="custom-checkmark"></span>
                                                                </label>
                                                            </td>
                                                            @php $permissionIndex++; @endphp
                                                        </tr>
                                                        @foreach ($submenu['submenu'] as $subIndex => $subsubmenu)
                                                            @if ($subIndex > 0)
                                                            @php
                                                             $subChildClass = "subchildtd{$index}-{$submenuIndex}-{$subIndex}";
                                                            @endphp
                                                                <tr>
                                                                    <td class="{{ $subChildClass }} hoverable">{{ $subsubmenu['name'] ?? 'N/A' }}</td>
                                                                    <td class="text-center {{ $subChildClass }} hoverable">
                                                                        <label class="custom-checkbox m-0 p-0 d-inline">
                                                                            <input type="checkbox" name="permissions[{{ $permissionIndex }}][name]" value="{{ $subsubmenu['name'] ?? 'N/A' }}">
                                                                            <input type="hidden" name="permissions[{{ $permissionIndex }}][slug]" value="{{ rtrim(config('app.front_url'), '/') . '/' . ltrim($subsubmenu['slug'] ?? '', '/') }}">
                                                                            <input type="hidden" name="permissions[{{ $permissionIndex }}][class]" value="{{ $subsubmenu['class'] ?? '' }}">
                                                                            <input type="hidden" name="permissions[{{ $permissionIndex }}][id]" value="{{ $subsubmenu['id'] ?? '' }}">
                                                                            <span class="custom-checkmark"></span>
                                                                        </label>
                                                                    </td>
                                                                    @php $permissionIndex++; @endphp
                                                                </tr>
                                                            @endif
                                                        @endforeach
                                                        @else
                                                            <td class="empty hoverable {{ $childClass }}"></td>
                                                            <td class="text-center  {{ $childClass }} hoverable">
                                                                <label class="custom-checkbox m-0 p-0 d-inline">
                                                                    <input type="checkbox" name="permissions[{{ $permissionIndex }}][name]" value="{{ $submenu['name'] ?? 'N/A' }}">
                                                                    <input type="hidden" name="permissions[{{ $permissionIndex }}][slug]" value="{{ rtrim(config('app.front_url'), '/') . '/' . ltrim($submenu['slug'] ?? '', '/') }}">
                                                                    <input type="hidden" name="permissions[{{ $permissionIndex }}][class]" value="{{ $submenu['class'] ?? '' }}">
                                                                    <input type="hidden" name="permissions[{{ $permissionIndex }}][id]" value="{{ $submenu['id'] ?? '' }}">
                                                                    <span class="custom-checkmark"></span>
                                                                </label>
                                                            </td>
                                                            @php $permissionIndex++; @endphp
                                                        </tr>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <td colspan="2" class="{{ $parentClass }} empty hoverable"></td>
                                                    <td class="text-center {{ $parentClass }} hoverable">
                                                        <label class="custom-checkbox m-0 p-0 d-inline">
                                                            <input type="checkbox" name="permissions[{{ $permissionIndex }}][name]" value="{{ $permission['name'] ?? 'N/A' }}">
                                                            <input type="hidden" name="permissions[{{ $permissionIndex }}][slug]" value="{{ rtrim(config('app.front_url'), '/') . '/' . ltrim($permission['slug'] ?? '', '/') }}">
                                                            <input type="hidden" name="permissions[{{ $permissionIndex }}][class]" value="{{ $permission['class'] ?? '' }}">
                                                            <input type="hidden" name="permissions[{{ $permissionIndex }}][id]" value="{{ $permission['id'] ?? '' }}">
                                                            <span class="custom-checkmark"></span>
                                                        </label>
                                                    </td>
                                                    @php $permissionIndex++; @endphp
                                                </tr>
                                                @endif
                                            @endforeach
                                    </tbody>
                                    
                                </table>
                            </div>


                        </div>
                        <div class="page-btn-ftr">
                            {{-- <button type="submit" class="btn btn-outline-secondary mr-2 ml-auto">Reset</button> --}}
                            <button id="formData" type="button"
                                class="btn btn-outline-primary mr-2 ml-auto">Submit</button>
                        </div>
                    </div>


                </div>
            </div>
        </form>
    </div>
    <script>
        $(document).ready(function() {
            $(document).on('click', '#formData', function() {
                var formData = new FormData($("#addFormData")[0]);
                let action = $(this).closest('.modal-content').find('form').attr('action');
                $("#errorname").css("display", "none").text('');
                $("#description").css("display", "none").text('');
                $("#permissions").css("display", "none").text('');

                $.ajax({
                    url: action,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.errors) {
                            $("#errorname").css("display", "block").text(data.errors.name);
                            $("#permissions").css("display", "block").text(data.errors
                                .permissions);
                            $("#description").css("display", "block").text(data.errors
                                .description);
                        } else {
                            AIZ.plugins.notify('success', 'Account Type created successfully');
                            var urls = "{{ url('admin/account_type') }}";
                            window.location.href = urls;
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            });


            $(document).on('keypress', '#addFormData', function(e) {
                if (e.which == 13) {
                    e.preventDefault();
                    $('#formData').click();
                }
            });

            $('#addFormData input[name="name"], #addFormData textarea[name="description"]').on('input', function() {
                var inputName = $(this).attr('name');
                if (inputName === 'name') {
                    $("#errorname").css("display", "none").text('');
                }
                if (inputName === 'description') {
                    $("#description").css("display", "none").text('');
                }
            });

            $('.permission-tbl').on('change', function() {
                $("#permissions").css("display", "none").text('');
            });

            $('.parent-menu').on('change', function() {
                var isChecked = $(this).is(':checked');
                $(this).closest('li').find('.subroot input[type="checkbox"]').prop('checked', isChecked);
            });

            $('.submenu').on('change', function() {
                var allChecked = $(this).closest('.subroot').find('input[type="checkbox"]').length === $(
                    this).closest('.subroot').find('input[type="checkbox"]:checked').length;
                $(this).closest('li').parents('li').find('.parent-menu').prop('checked', allChecked);
            });


            for (let i = 0; i <= 8; i++) {
                let parentClass = '.parentTd' + i;
                let childClass = '.childtd' + i;

                $(document).on('mouseover', parentClass + ':not(:first-child)', function() {
                    $(parentClass).not(':first-child').addClass('hoverbgcolorfortable');
                    $(parentClass).siblings().not(':first-child').addClass('hoverbgcolorfortable');
                    $(childClass).addClass('hoverbgcolorfortable');
                }).on('mouseout', parentClass + ':not(:first-child)', function() {
                    $(parentClass).not(':first-child').removeClass('hoverbgcolorfortable');
                    $(parentClass).siblings().not(':first-child').removeClass('hoverbgcolorfortable');
                    $(childClass).removeClass('hoverbgcolorfortable');
                });

                for (let j = 0; j <= 12; j++) {
                    let nestedChildClass = '.childtd' + i + '-' + j;
                    $(document).on('mouseover', nestedChildClass, function() {
                        $(parentClass).not(':first-child').addClass('hoverbgcolorfortable');
                        $(nestedChildClass).addClass('hoverbgcolorfortable');
                        $(nestedChildClass).siblings().not(':first-child').addClass('hoverbgcolorfortable');
                    }).on('mouseout', nestedChildClass, function() {
                        $(parentClass).not(':first-child').removeClass('hoverbgcolorfortable');
                        $(nestedChildClass).removeClass('hoverbgcolorfortable');
                        $(nestedChildClass).siblings().not(':first-child').removeClass(
                            'hoverbgcolorfortable');
                    });

                    for (let k = 0; k <= 12; k++) {
                        let subChildClass = '.subchildtd' + i + '-' + j + '-' + k;
                        $(document).on('mouseover', subChildClass, function() {
                            $(parentClass).not(':first-child').addClass('hoverbgcolorfortable');
                            $(nestedChildClass).addClass('hoverbgcolorfortable');
                            $(subChildClass).addClass('hoverbgcolorfortable');
                        }).on('mouseout', subChildClass, function() {
                            $(parentClass).not(':first-child').removeClass('hoverbgcolorfortable');
                            $(nestedChildClass).removeClass('hoverbgcolorfortable');
                            $(subChildClass).removeClass('hoverbgcolorfortable');
                        });
                    }
                }
            }
        });
    </script>
@endsection