@extends('layouts.admin_main')

@section('content')
<div class="content-wrapper">
    <div class="card">
        <div class="card-header">
            <span>General Settings</span>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            @if (session('status'))
            <h5 class="alert alert-success" id="status">{{ session('status') }}</h5>
            @endif
            <div id="success_message"></div>

            <div class="col-7">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title" style="color: #2590e4;font-weight:600;font-size: 16px">Skills Settings</h3>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('skills.store') }}" id="skillsForm">
                            @csrf

                            <div class="mb-3">
                                <div class="form-group">
                                    <label for="title">Title</label>
                                    <input type="text" name="skills[0][title]" class="form-control" placeholder="Skill Title" value="{{ $skills->isNotEmpty() ? $skills->first()->title : '' }}">
                                </div>

                                <!-- First Paragraph -->
                                <div class="form-group">
                                    <label for="description1">Description</label>
                                    <input name="skills[0][description]" class="form-control" value="{{ $skills->isNotEmpty() ? $skills->first()->description : '' }}" type="text" placeholder="Skill Description">
                                </div>
                                <div class="form-group">
                                    <h4>Add Single Skill</h4>
                                    <input type="text" name="name" class="form-control mb-2" placeholder="Skill Name">
                                    <input type="number" name="percentage" class="form-control mb-2" placeholder="Percentage" min="0" max="100">
                                </div>
                            </div>

                            <div id="skillsContainer">
                                <h4>Add Multiple Skills</h4>
                                @foreach($skills as $index => $skill)
                                    <div class="skill-item mb-3">
                                        <input type="text" name="skills[{{ $index }}][name]" class="form-control" value="{{ $skill->name }}" placeholder="Skill Name" required>
                                        <input type="number" name="skills[{{ $index }}][percentage]" class="form-control" value="{{ $skill->percentage }}" placeholder="Percentage" required min="0" max="100">
                                        <button type="button" class="btn btn-danger remove-skill">Remove</button>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-primary" id="addSkill">Add Another Skill</button>
                            <button type="submit" class="btn btn-success">Save Skills</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    let skillIndex = {{ count($skills) }}; // Set initial index based on existing skills
    document.getElementById('addSkill').addEventListener('click', function() {
        const skillsContainer = document.getElementById('skillsContainer');
        const skillItem = document.createElement('div');
        skillItem.classList.add('skill-item', 'mb-3');
        skillItem.innerHTML = `
            <input type="text" name="skills[${skillIndex}][name]" class="form-control" placeholder="Skill Name" required>
            <input type="number" name="skills[${skillIndex}][percentage]" class="form-control" placeholder="Percentage" required min="0" max="100">
            <button type="button" class="btn btn-danger remove-skill">Remove</button>
        `;
        skillsContainer.appendChild(skillItem);
        skillIndex++; // Increment the index for the next skill
    });

    // Event delegation for removing skills
    document.getElementById('skillsContainer').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-skill')) {
            e.target.parentElement.remove();
        }
    });
</script>
@endsection