@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold mb-0 text-gray-800">
        <i class="bi bi-laptop text-primary me-2"></i>My Skills
    </h4>
    <a href="{{route('skills.create')}}" class="btn btn-primary shadow-sm rounded-pill px-4">
        <i class="bi bi-plus-lg me-1"></i> Add New Skill
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show rounded-4 shadow-sm mb-4 border-0 p-3" role="alert">
        <div class="d-flex align-items-center">
            <div class="bg-success text-white rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                <i class="bi bi-check-lg"></i>
            </div>
            <div>
                <strong class="d-block">Success!</strong>
                <span class="small">{{ session('success') }}</span>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="px-4 py-3 text-secondary fw-semibold border-bottom-0 rounded-top-start-4">Skill Details</th>
                        <th class="px-4 py-3 text-secondary fw-semibold border-bottom-0">Category</th>
                        <th class="px-4 py-3 text-secondary fw-semibold border-bottom-0">Colors</th>
                        <th class="px-4 py-3 text-secondary fw-semibold border-bottom-0 text-center">Order</th>
                        <th class="px-4 py-3 text-secondary fw-semibold border-bottom-0 text-center">Status</th>
                        <th class="px-4 py-3 text-secondary fw-semibold border-bottom-0 text-end rounded-top-end-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Dummy Row 1 -->
                     @forelse($skills as $skill)
                    <tr>
                        <td class="px-4 py-3 border-bottom border-light">
                            <div class="d-flex align-items-center">
                                <div class="icon-box rounded-3 d-flex align-items-center justify-content-center me-3 shadow-sm" style="width: 48px; height: 48px; background: linear-gradient(135deg, {{$skill->color}}, {{$skill->color_alt}}); color: white;"><i class="{{ $skill->icon }} fs-4"></i>       
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold">{{$skill->name}}</h6>
                                    <small class="text-muted"><i class="bi bi-star-fill text-warning me-1" style="font-size: 0.75rem;"></i>{{$skill->icon}}</small>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 border-bottom border-light">
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fw-semibold">{{$skill->category}}</span>
                        </td>
                        <td class="px-4 py-3 border-bottom border-light">
                            <div class="d-flex align-items-center">
                                <div class="rounded-circle me-2 border border-2 border-white shadow-sm" style="width: 24px; height: 24px; background-color: {{$skill->color}};" data-bs-toggle="tooltip" title="Primary: #e34f26"></div>
                                <div class="rounded-circle border border-2 border-white shadow-sm" style="width: 24px; height: 24px; background-color: {{$skill->color_alt}};" data-bs-toggle="tooltip" title="Alt: #f76342"></div>
                            </div>
                        </td>
                        <td class="px-4 py-3 border-bottom border-light text-center">
                            <span class="fw-bold text-secondary bg-light px-2 py-1 rounded-3">{{$skill->sort_order}}</span>
                        </td>
                        
                        <td class="px-4 py-3 border-bottom border-light text-center">
                            @if($skill->status==1)
                              <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill fw-semibold"><i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i> Active</span>
                            @else
                                <span class="badge bg-success bg-opacity-10 text-success px-3 py-2 rounded-pill fw-semibold"><i class="bi bi-circle-fill me-1" style="font-size: 0.5rem;"></i>In Active</span>
                            @endif
                        </td>

                        <td class="px-4 py-3 border-bottom border-light text-end">
                            <div class="btn-group" role="group">
                                <a href="{{route('skills.show', $skill->id)}}" class="btn btn-sm btn-light text-primary shadow-sm me-2 rounded-3" data-bs-toggle="tooltip" title="View Details"><i class="bi bi-eye-fill"></i></a>
                                <a href="{{route('skills.edit', $skill->id)}}" class="btn btn-sm btn-light text-warning shadow-sm me-2 rounded-3" data-bs-toggle="tooltip" title="Edit Skill"><i class="bi bi-pencil-fill"></i></a>
                                <form action="{{ route('skills.destroy', $skill->id) }}"
                                    method="POST"
                                    class="d-inline">
                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                            class="btn btn-sm btn-light text-danger shadow-sm rounded-3"
                                            data-bs-toggle="tooltip"
                                            title="Delete Skill"
                                            onclick="return confirm('Are you sure you want to delete this skill?')">
                                        <i class="bi bi-trash3-fill"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                     <tr>
                        <td colspan="6" class="text-center py-4">
                            No skills found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>
@endsection
