{{-- resources/views/admin/coaches/index.blade.php --}}
@extends('admin.layouts.app')

@section('content')
<div class="page-inner">
    <div class="page-header d-flex justify-content-between align-items-center mb-3">
        <h4 class="page-title mb-0">Manajemen Pelatih</h4>
        <ul class="breadcrumbs mb-0">
            <li class="nav-home">
                <a href="{{ route('admin.dashboard') }}">
                    <i class="icon-home"></i>
                </a>
            </li>
            <li class="separator"><i class="icon-arrow-right"></i></li>
            <li class="nav-item"><a href="#">Personalia</a></li>
            <li class="separator"><i class="icon-arrow-right"></i></li>
            <li class="nav-item"><a href="#">Data Pelatih</a></li>
        </ul>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="card card-secondary h-100">
                <div class="card-body skew-shadow d-flex align-items-center justify-content-between">
                    <div>
                        <h1 class="fw-bold">{{ $totalCoaches }}</h1>
                        <h5 class="op-8 mb-0">Total Pelatih</h5>
                    </div>
                    <div class="pull-right">
                        <h3 class="fw-bold op-8 mb-0"><i class="fas fa-user-tie fa-2x"></i></h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4">
            <div class="card card-secondary bg-secondary-gradient h-100">
                <div class="card-body bubble-shadow d-flex align-items-center justify-content-between">
                    <div>
                        <div style="font-size: 1.2rem; margin-bottom: 5px;">
                            <strong>{{ $totalMale }}</strong> <small class="op-8">Putra</small>
                        </div>
                        <div style="font-size: 1.2rem;">
                            <strong>{{ $totalFemale }}</strong> <small class="op-8">Putri</small>
                        </div>
                    </div>
                    <div class="text-right">
                        <h3 class="fw-bold op-8 mb-0"><i class="fas fa-venus-mars fa-2x"></i></h3>
                        <h5 class="op-8 mt-2 mb-0">Gender</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4">
            <div class="card card-secondary bg-secondary-gradient h-100">
                <div class="card-body curves-shadow d-flex align-items-center justify-content-between">
                    <div>
                        @forelse($specializationStats as $stat)
                            <div class="text-sm fw-bold mb-1">
                                {{ $stat->name }}: <span class="op-8">{{ $stat->total }}</span>
                            </div>
                        @empty
                            <span class="text-sm">Belum ada data</span>
                        @endforelse
                    </div>
                    <div class="text-right ps-2">
                        <h3 class="fw-bold op-8 mb-0"><i class="fa fa-certificate fa-2x"></i></h3>
                        <h5 class="op-8 mt-2 mb-0">Top Spec</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">Daftar Pelatih Atletik</h4>
                    <a href="{{ route('admin.coaches.create') }}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> Tambah Pelatih
                    </a>
                </div>
                
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover align-top">
                            <thead class="bg-light align-middle">
                                <tr>
                                    <th width="5%" class="text-center">No</th>
                                    <th width="10%" class="text-center">Foto</th>
                                    <th width="30%">Identitas (NIK & Nama)</th>
                                    <th width="30%">Spesialisasi & Nomor</th>
                                    <th>Domisili & Kontak</th>
                                    <th width="10%" class="text-center">Aksi</th> {{-- Lebar sedikit ditambah agar tombol muat --}}
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($coaches as $key => $coach)
                                <tr>
                                    <td class="text-center py-3">{{ $loop->iteration }}</td>
                                    
                                    <td class="text-center py-3">
                                        <div class="avatar avatar-xxl" style="width: 100px; height: 100px;">
                                            @if($coach->photo)
                                                <img src="{{ asset('storage/' . $coach->photo) }}" 
                                                     alt="Foto" 
                                                     class="avatar-img rounded-circle border shadow-sm"
                                                     style="object-fit: cover; width: 100%; height: 100%;">
                                            @else
                                                <img src="{{ asset('assets/img/user.jpg') }}" 
                                                     alt="Default" 
                                                     class="avatar-img rounded-circle border shadow-sm"
                                                     style="object-fit: cover; width: 100%; height: 100%;">
                                            @endif
                                        </div>
                                    </td>

                                    <td class="py-3">
                                        <div class="d-flex flex-column">
                                            <div class="fw-bold text-dark mb-1" style="font-size: 1.1rem;">{{ $coach->name }}</div>
                                            <div class="text-muted small mb-2">
                                                <i class="far fa-id-card me-1"></i> {{ $coach->nik }}
                                            </div>
                                            
                                            <div class="mt-1">
                                                @if($coach->gender == 'male')
                                                    <span class="badge bg-primary me-1"><i class="fas fa-mars"></i> Putra</span>
                                                @else
                                                    <span class="badge bg-danger me-1"><i class="fas fa-venus"></i> Putri</span>
                                                @endif

                                                @php
                                                    $levelColor = 'secondary';
                                                    if($coach->coach_level == 'Level 1') $levelColor = 'success';
                                                    if($coach->coach_level == 'Level 2') $levelColor = 'warning text-dark';
                                                    if($coach->coach_level == 'Level 3') $levelColor = 'dark';
                                                @endphp
                                                <span class="badge bg-{{ $levelColor }}">{{ $coach->coach_level }}</span>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="py-3">
                                        @if($coach->disciplines->count() > 0)
                                            <div class="d-flex flex-column gap-2">
                                                @foreach($coach->disciplines->groupBy('category.name') as $categoryName => $disciplines)
                                                    <div class="border rounded p-2 bg-light">
                                                        <div class="fw-bold text-primary small text-uppercase mb-1" style="font-size: 0.75rem; letter-spacing: 0.5px;">
                                                            {{ $categoryName }}
                                                        </div>
                                                        <div style="line-height: 1.8;">
                                                            @foreach($disciplines as $disc)
                                                                <span class="badge bg-white text-dark border me-1">{{ $disc->name }}</span>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <span class="text-muted fst-italic small">Belum ada spesialisasi.</span>
                                        @endif
                                    </td>

                                    <td class="py-3">
                                        <div class="d-flex flex-column">
                                            <div class="fw-bold text-dark">{{ $coach->city->nama ?? '-' }}</div>
                                            <div class="text-muted small">{{ $coach->province->nama ?? '-' }}</div>
                                            <div class="mt-2">
                                                <a href="https://wa.me/{{ preg_replace('/^0/', '62', $coach->phone) }}" target="_blank" class="btn btn-xs btn-outline-success">
                                                    <i class="fab fa-whatsapp"></i> {{ $coach->phone }}
                                                </a>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center py-3">
                                        <div class="d-flex justify-content-center gap-1">
                                            <a href="{{ route('admin.coaches.show', $coach->id) }}" 
                                               class="btn btn-sm btn-info text-white" 
                                               data-bs-toggle="tooltip" 
                                               title="Lihat Detail">
                                                <i class="fa fa-eye"></i>
                                            </a>

                                            <a href="{{ route('admin.coaches.edit', $coach->id) }}" 
                                               class="btn btn-sm btn-warning text-white" 
                                               data-bs-toggle="tooltip" 
                                               title="Edit Data">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            
                                            <form action="{{ route('admin.coaches.destroy', $coach->id) }}" method="POST" class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" 
                                                        class="btn btn-sm btn-danger" 
                                                        data-bs-toggle="tooltip" 
                                                        title="Hapus">
                                                    <i class="fa fa-trash"></i> 
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center p-5">
                                        <div class="text-muted mb-3"><i class="fas fa-users-slash fa-4x text-light"></i></div>
                                        <h5 class="text-muted">Belum ada data pelatih yang terdaftar.</h5>
                                        <a href="{{ route('admin.coaches.create') }}" class="btn btn-primary btn-sm mt-2">
                                            <i class="fa fa-plus"></i> Tambah Pelatih Baru
                                        </a>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection