@extends('backoffice.layout.master')
@section('setSectionTitle', __('Seleziona una o più skill.'))
@section('setSectionButton')
    <button type="submit" id="saveForm" class="btn btn-success shadow-lg">
        <i class="bi bi-check-circle me-2"></i> Salva Modifiche
    </button>
@endsection

@section('setContent')

    <div class="container-fluid px-0">
        <form action="{{ route('candidate.updateSkills') }}" method="POST" id="skillsForm">
            @csrf

            @php
                $grouped = $skills->groupBy('category');
            @endphp

            <div class="row g-4">
                @foreach($grouped as $category => $categorySkills)
                    <div class="col-12 col-md-6">
                        <div class="card shadow-sm border-0 h-100">
                            <div class="card-header bg-primary bg-gradient text-white py-3">
                                <h5 class="mb-0 fw-semibold">
                                    <i class="bi bi-tag-fill me-2"></i>{{ $category }}
                                </h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="d-flex flex-wrap gap-2" role="group" aria-label="Skills {{ $category }}">
                                    @foreach($categorySkills as $skill)
                                        <div>
                                            <input
                                                class="btn-check"
                                                type="checkbox"
                                                id="skill_{{ $skill['id'] }}"
                                                name="skills[]"
                                                value="{{ $skill['id'] }}"
                                                {{ $skill['checked'] ? 'checked' : '' }}
                                                autocomplete="off"
                                            >
                                            <label
                                                class="btn btn-outline-primary btn-sm rounded-pill"
                                                for="skill_{{ $skill['id'] }}"
                                            >
                                                {{ $skill['name'] }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row my-5">
                <div class="col">
                    <button type="submit" class="btn btn-success shadow-lg">
                        <i class="bi bi-check-circle me-2"></i> Salva Modifiche
                    </button>
                </div>
            </div>
        </form>
    </div>

    <style>
        .btn-check:checked + .btn-outline-primary {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }

        .card {
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        .btn-outline-primary {
            transition: all 0.15s ease-in-out;
        }

        .btn-outline-primary:hover {
            transform: scale(1.05);
        }

        .btn-floating-save {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease-in-out;
        }

        .btn-floating-save:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1.5rem rgba(25, 135, 84, 0.4) !important;
        }

        .btn-floating-save:active {
            transform: translateY(-1px);
        }
    </style>
@endsection

@section('setBodyEnd')
    <script>
        document.getElementById('saveForm').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('skillsForm').submit();
        });
    </script>
@endsection