@extends('layout')

@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">Add New Role</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li><a href="{{ route('roles.index') }}">Roles & Permission</a></li>
                    <li><span>Add New Role</span></li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <div class="switcher">
                    <label>
                        <span class="text">Inactive</span>
                        <input type="checkbox" id="statusSwitch" />
                        <span class="slider"></span>
                        <span class="text">Active</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="dashboard_main-body">
            <form action="{{ route('roles.store') }}" id="roleForm" method="POST">
                @csrf

                <input type="hidden" name="status" id="statusInput" value="inactive">

                <div class="accordion-list">
                    <div class="accordion-item">
                        <h3 class="accordion-title">
                            Add New Role
                            <span class="icon">
                                <img loading="lazy" src="{{ asset('assets/images/icons/angle.svg') }}" alt="icon"
                                    class="svg" />
                            </span>
                        </h3>
                        <div class="accordion-body">
                            <div class="body-content">
                                <div class="form-grid">

                                    {{-- Role Name --}}
                                    <div class="form-group full-w">
                                        <label class="form-label">Role Name</label>
                                        <input type="text" name="name"
                                            class="form-control @error('name') is-invalid @enderror" placeholder="Role Name"
                                            value="{{ old('name') }}" required />
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div id="permissions" class="full-w">
                                        <div class="form-grid">
                                            {{-- Dynamic Permissions --}}
                                            @php
                                                use Illuminate\Support\Str;
                                                $groupedPermissions = $permissions->groupBy(function ($perm) {
                                                    return explode('.', $perm->name)[0];
                                                });
                                            @endphp

                                            @foreach ($groupedPermissions as $module => $perms)
                                                <div class="form-group full-w">
                                                    <h4 class="group-title">{{ Str::headline($module) }}</h4>
                                                    <div class="form-checkboxs grid">
                                                        @foreach ($perms as $permission)
                                                            <div class="form-checkbox">
                                                                <label>
                                                                    <input type="checkbox" name="permissions[]"
                                                                        value="{{ $permission->name }}"
                                                                        {{ in_array($permission->name, old('permissions', [])) ? 'checked' : '' }} />
                                                                    <span class="mark">
                                                                        <i class="fas fa-check"></i>
                                                                    </span>
                                                                    <span
                                                                        class="text">{{ Str::headline(explode('.', $permission->name)[1] ?? $permission->name) }}</span>
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                </div>

                                {{-- Buttons --}}
                                <div class="form-buttons">
                                    <button type="submit" class="btn btn-primary">
                                        Save Changes
                                    </button>
                                    <a href="{{ route('roles.index') }}" class="btn btn-reset">
                                        Cancel
                                    </a>
                                </div>

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

    {{-- Scripts --}}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
        integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
    </script>
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script>
        // Handle status switch
        const switcher = document.getElementById('statusSwitch');
        const statusInput = document.getElementById('statusInput');

        switcher.addEventListener('change', function() {
            statusInput.value = this.checked ? 'active' : 'inactive';
        });
    </script>

    {{-- Include JustValidate --}}
    <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const validation = new JustValidate("#roleForm", {
                validateBeforeSubmitting: true,
                focusInvalidField: true,
                errorFieldCssClass: "is-invalid",
                errorLabelStyle: {
                    color: "#fe3b29",
                    paddingTop: "4px",
                    fontSize: "12px",
                },
            });

            // Role title
            validation.addField('[name="name"]', [{
                    rule: "required",
                    errorMessage: "Role name is required."
                },
                {
                    rule: "minLength",
                    value: 3,
                    errorMessage: "Role name must be at least 3 characters."
                },
                {
                    rule: "maxLength",
                    value: 255,
                    errorMessage: "Role name cannot exceed 255 characters."
                },
            ]);

            validation
                .addField('[name="permissions[]"]', [{
                    validator: () => {
                        const checked = document.querySelectorAll('[name="permissions[]"]:checked');
                        return checked.length > 0;
                    },
                    errorMessage: "You must select at least one permission.",
                }, ], {
                    errorsContainer: document.getElementById('permissions'),
                });

            // Expand accordion section if invalid
            validation.onFail((fields) => {
                expandInvalidFields(fields);
            });

            const form = document.getElementById("roleForm");
            form.addEventListener("input", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });
            form.addEventListener("change", () => {
                const invalidFields = document.querySelectorAll(".is-invalid");
                invalidFields.forEach((elem) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            });

            function expandInvalidFields(fields) {
                Object.values(fields).forEach(({
                    elem
                }) => {
                    const parent = elem.closest(".accordion-body");
                    if (parent) parent.style.maxHeight = parent.scrollHeight + "px";
                });
            }
            // On success → submit the form
            validation.onSuccess((event) => {
                event.target.submit();
            });
        });
    </script>
@endsection