@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')

<div class="row align-items-center justify-content-between mb-4">
    <div class="col-auto">
        <h5 class="fw-bold mb-0">Assign Role & Access</h5>
        <p class="text-muted small mb-0">Set roles and sidebar permissions for each staff</p>
    </div>
    <div class="col-auto">
        <a href="{{ route('staff_hub') }}" class="btn btn-label-secondary">
            <i class="ti tabler-arrow-left me-1"></i> Back
        </a>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-4">
        {{-- Staff List --}}
        <div class="card border-0 shadow-sm" style="border-radius:16px;">
            <div class="card-header py-3 border-0">
                <h6 class="fw-bold mb-0">Select Staff</h6>
            </div>
            <div class="card-body p-0">
                <div class="p-3">
                    <input type="text" id="staffSearchInput" class="form-control"
                           placeholder="Search staff...">
                </div>
                <div style="max-height:500px;overflow-y:auto;">
                    @foreach($employees as $emp)
                    <div class="staff-item px-3 py-2 d-flex align-items-center gap-3"
                         style="cursor:pointer;border-bottom:1px solid #f0f0f0;transition:0.15s;"
                         data-id="{{ $emp->id }}"
                         data-name="{{ $emp->name }}"
                         data-role="{{ $emp->role }}"
                         onmouseover="this.style.background='#f8f9ff'"
                         onmouseout="this.style.background=''">
                        <div style="width:40px;height:40px;background:#696cff20;border-radius:50%;
                                    display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            @if($emp->profile_photo)
                                <img src="{{ asset('storage/' . $emp->profile_photo) }}"
                                     style="width:40px;height:40px;border-radius:50%;object-fit:cover;">
                            @else
                                <i class="ti tabler-user" style="color:#696cff;"></i>
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <p class="fw-semibold mb-0" style="font-size:13px;">{{ $emp->name }}</p>
                            <p class="text-muted mb-0" style="font-size:11px;">
                                {{ $emp->designation ?? $emp->department ?? '-' }}
                                @if($emp->role)
                                    · <span class="text-primary">{{ $emp->role }}</span>
                                @endif
                            </p>
                        </div>
                        <i class="ti tabler-chevron-right text-muted"></i>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        {{-- Role Assignment Panel --}}
        <div class="card border-0 shadow-sm" style="border-radius:16px;" id="rolePanel">
            <div class="card-body p-5 text-center">
                <i class="ti tabler-shield-check" style="font-size:48px;color:#ccc;"></i>
                <p class="text-muted mt-2">Select a staff member to assign role</p>
            </div>
        </div>
    </div>
</div>

{{-- Role panel template (hidden) --}}
<div id="rolePanelContent" style="display:none;">
    <div class="card-header py-3 border-0 d-flex align-items-center justify-content-between">
        <div>
            <h6 class="fw-bold mb-0" id="panelStaffName"></h6>
            <p class="text-muted small mb-0" id="panelStaffRole">No role assigned</p>
        </div>
    </div>
    <div class="card-body p-4">

        <div class="mb-4">
            <label class="form-label fw-semibold">Select Role</label>
            <div class="row g-2" id="roleButtons">
                @foreach(array_keys($roles) as $role)
                <div class="col-md-4 col-6">
                    <div class="role-btn card border text-center p-3"
                         style="border-radius:12px;cursor:pointer;transition:0.2s;"
                         data-role="{{ $role }}"
                         onclick="selectRole('{{ $role }}')">
                        <p class="fw-semibold mb-0" style="font-size:13px;">{{ $role }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div class="mb-4">
            <label class="form-label fw-semibold">Sidebar Access</label>
            <p class="text-muted small">Auto-set by role. You can customize:</p>
            <div class="row g-2" id="permissionCheckboxes">
                @foreach($allPermissions as $perm)
                <div class="col-md-4 col-6">
                    <div class="form-check">
                        <input class="form-check-input perm-check" type="checkbox"
                               value="{{ $perm }}" id="perm_{{ $perm }}">
                        <label class="form-check-label" for="perm_{{ $perm }}" style="text-transform:capitalize;">
                            {{ str_replace('_', ' ', $perm) }}
                        </label>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <div id="saveAlert" style="display:none;"></div>

        <button type="button" class="btn btn-primary px-4" id="saveRoleBtn">
            <i class="ti tabler-device-floppy me-1"></i> Save Role
        </button>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        
const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    </script>

<script>
const roles = @json($roles);
let selectedStaffId   = null;
let selectedRole      = null;

// Staff item click
$(document).on('click', '.staff-item', function() {

    $('.staff-item').css('background', '');
    $(this).css('background', '#f0f0ff');

    selectedStaffId = $(this).data('id');
    const name      = $(this).data('name');
    const role      = $(this).data('role') || '';

    $('#panelStaffName').text(name);
    $('#panelStaffRole').text(role ? 'Current Role: ' + role : 'No role assigned');

    // Load role panel
    $('#rolePanel').html($('#rolePanelContent').html());
    $('#rolePanel').find('#panelStaffName').text(name);
    $('#rolePanel').find('#panelStaffRole').text(role ? 'Current Role: ' + role : 'No role assigned');

    // Highlight current role
    if (role) {
        selectRole(role);
    }
});

// Role select
function selectRole(role) {
    selectedRole = role;

    // Highlight selected role button
    $('#rolePanel .role-btn').css({
        'background': '',
        'border-color': ''
    });
    $('#rolePanel .role-btn[data-role="' + role + '"]').css({
        'background': '#696cff10',
        'border-color': '#696cff'
    });

    // Update panel role text
    $('#rolePanel #panelStaffRole').text('Role: ' + role);

    // Auto-check permissions based on role
    const perms = roles[role] || [];
    $('#rolePanel .perm-check').prop('checked', false);
    perms.forEach(function(p) {
        $('#rolePanel #perm_' + p).prop('checked', true);
    });
}

// Save role
$(document).on('click', '#saveRoleBtn', function() {
    if (!selectedStaffId || !selectedRole) {
        alert('Please select a staff and role.');
        return;
    }

    const btn = $(this);
    btn.prop('disabled', true).text('Saving...');
// Collect checked permissions
const permissions = [];
$('#rolePanel .perm-check:checked').each(function() {
    permissions.push($(this).val());
});

$.ajax({
    url: '{{ route("assign_role_update") }}',
    method: 'POST',
    data: {
        _token:      '{{ csrf_token() }}',
        employee_id: selectedStaffId,
        role:        selectedRole,
        permissions: permissions,
    },
        success: function(response) {
            btn.prop('disabled', false).html('<i class="ti tabler-device-floppy me-1"></i> Save Role');
            if (response.success) {
                $('#rolePanel #saveAlert')
                    .html('<div class="alert alert-success">' + response.message + '</div>')
                    .show();
                     Toast.fire({
    icon: 'success',
    title: response.message
});

                // Update staff list item
                $('.staff-item[data-id="' + selectedStaffId + '"]')
                    .data('role', selectedRole)
                    .find('.text-primary').text(selectedRole);

                setTimeout(function() {
                    $('#rolePanel #saveAlert').hide();
                }, 2000);
            }
        },
        error: function() {
            btn.prop('disabled', false).html('<i class="ti tabler-device-floppy me-1"></i> Save Role');
            $('#rolePanel #saveAlert')
                .html('<div class="alert alert-danger">Something went wrong.</div>')
                .show();
                Toast.fire({icon: 'error',title: response.message});
        }
    });
});

// Search staff
$('#staffSearchInput').on('keyup', function() {
    const val = $(this).val().toLowerCase();
    $('.staff-item').each(function() {
        const name = $(this).data('name').toLowerCase();
        $(this).toggle(name.includes(val));
    });
});
</script>

@endsection