@extends('admin.layout.template')

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

@section('content')

<div class="page-content">
    <div class="container-xxl">

        <form id="addRoleForm">
            @csrf

            {{-- Role Info --}}
            <div class="card mb-4">
                <div class="card-header">
                    <h4>Create Role</h4>
                </div>
                <div class="card-body row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label">Role Name</label>
                        <input type="text" name="role_name" class="form-control" required>
                    </div>
                    <!-- <div class="col-md-2 mb-3">
                        <label class="form-label">Price Percentage</label>
                      <div class="input-group mb-3">
                            <input type="number"
                                name="price_percentage"
                                class="form-control" min="0" max="100" step="0.01"
                                required>
                            <span class="input-group-text fs-20">
                                %
                            </span>

                        </div>
                    </div> -->
                    <div class="col-md-8 mb-3">
                        <label class="form-label">Departments</label>
                        <select name="department_ids[]" class="form-control" multiple data-choices>
                            @foreach($departments as $dept)
                            <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12 mt-2">
                        <div class="form-check">
                            <input type="checkbox" name="is_locked" class="form-check-input" id="is_locked">
                            <label class="form-check-label" for="is_locked">Lock this role (System Role)</label>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Permissions Table --}}
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Permissions</h4>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="selectAllModules">
                        <label class="form-check-label">Select All Modules</label>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Module</th>
                                    <th class="text-center">Add</th>
                                    <th class="text-center">View</th>
                                    <th class="text-center">Edit</th>
                                    <th class="text-center">Delete/ Reject</th>
                                </tr>
                            </thead>
                            <tbody>

                                @php
                                $actions = ['add','view','update','delete'];
                                @endphp

                                @foreach($permissions as $module => $perms)
                                <tr>

                                    <td class="fw-bold text-capitalize">
                                        <input type="checkbox"
                                            class="form-check-input select-module"
                                            data-module="{{ $module }}">
                                        {{ str_replace(['-','_'], ' ', $module) }}
                                    </td>

                                    @foreach($actions as $action)

                                    <td class="text-center">

                                        @if(isset($perms[$action]))

                                        <input type="checkbox"
                                            class="form-check-input permission-checkbox module-{{ $module }}"
                                            name="permissions[]"
                                            value="{{ $perms[$action] }}">

                                        @endif

                                    </td>

                                    @endforeach

                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="text-end mb-5">
                <button type="submit" class="btn btn-primary">Save Role</button>
            </div>
        </form>
    </div>
</div>

<script>
    // Select All Modules
    $('#selectAllModules').on('change', function() {
        $('.permission-checkbox').prop('checked', this.checked);
        $('.select-module').prop('checked', this.checked);
    });

    // Select Module
    $('.select-module').on('change', function() {

        let module = $(this).data('module');
        $('.module-' + module).prop('checked', this.checked);
    });
    /* Submit Edit */
    $('#addRoleForm').on('submit', function(e) {
        e.preventDefault();

        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to update this role?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Yes, update it',
            cancelButtonText: 'Cancel'
        }).then((result) => {

            if (!result.isConfirmed) return;

            $.ajax({
                url: "{{ route('roles.store') }}",
                type: 'POST',
                data: $(this).serialize(),
                success: function(res) {
                    if (res.status) {
                        Swal.fire('Updated!', res.message, 'success')
                            .then(() => {
                                window.location.href = "{{ route('roles.index') }}";
                            });
                    } else {
                        Swal.fire('Error', res.message, 'error');
                    }
                },
                error: function(xhr) {
                    console.log('AJAX ERROR:', xhr); // 👈 DEBUG

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let msg = Object.values(errors).flat().join('<br>');
                        Swal.fire('Validation Error', msg, 'error');
                    } else if (xhr.status === 419) {
                        Swal.fire('Session Expired', 'Please refresh the page', 'warning');
                    } else {
                        Swal.fire(
                            'Error',
                            xhr.responseJSON?.message || 'Server error',
                            'error'
                        );
                    }
                }
            });
        });
    });
</script>

@endsection