@extends('layouts.main')

@section('content')
    <div class="pagetitle">
        <h1>Worker Disetujui</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('data-worker.index') }}">Data Worker</a></li>
                <li class="breadcrumb-item active">Worker Disetujui</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
        <div class="row">
            <div class="col-xl-12">
                @if (session()->has('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="bi bi-check-circle me-1"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @elseif (session()->has('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-exclamation-octagon me-1"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>

            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body pt-3">
                        <div class="d-flex align-items-center justify-content-between m-3">
                            <div>
                                <h5 class="card-title">Total : {{ $workers->count() }} Worker Disetujui</h5>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('data-worker.index') }}" class="btn btn-outline-primary">
                                        Semua
                                    </a>
                                    <a href="{{ route('data-worker.approved') }}" class="btn btn-outline-success active">
                                        Disetujui
                                    </a>
                                    <a href="{{ route('data-worker.pending') }}" class="btn btn-outline-warning">
                                        Pending
                                    </a>
                                </div>
                            </div>
                            <a href="{{ route('data-worker.create') }}" class="btn btn-primary">
                                <i class="bi bi-plus"></i> Tambah Worker
                            </a>
                        </div>

                        <div class="table-responsive">
                            <table class="table datatable" id="approvedWorkersTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Nama</th>
                                        <th>No HP</th>
                                        <th>Kategori Jasa</th>
                                        <th>Status</th>
                                        <th>Profile</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($workers as $worker)
                                    <tr>
                                        <td>{{ $no++ }}</td>
                                        <td>{{ $worker->name }}</td>
                                        <td>{{ $worker->username }}</td>
                                        <td>{{ $worker->categoryJasa->name ?? '-' }}</td>
                                        <td>
                                            <span class="badge bg-success">Disetujui</span>
                                        </td>
                                        <td>
                                            @if($worker->profile)
                                                <img src="{{ asset('uploads/user/' . $worker->id . '/' . $worker->profile) }}" 
                                                     alt="Profile" 
                                                     class="img-fluid" 
                                                     style="max-width: 80px; max-height: 80px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;"
                                                     data-bs-toggle="modal" 
                                                     data-bs-target="#profileModal" 
                                                     onclick="showProfileModal('{{ asset('uploads/user/' . $worker->id . '/' . $worker->profile) }}', '{{ $worker->name }}')">
                                            @else
                                                <span class="text-muted">No Image</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('data-worker.show', $worker->id) }}" class="btn btn-info btn-sm">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                <a href="{{ route('data-worker.edit', $worker->id) }}" class="btn btn-primary btn-sm">
                                                    <i class="bi bi-pencil-fill"></i>
                                                </a>
                                                <form action="{{ route('data-worker.destroy', $worker->id) }}" method="POST" style="display:inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus worker ini?');">
                                                        <i class="bi bi-trash-fill"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Profile Modal -->
    <div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="profileModalLabel">Profile Image</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalProfileImage" src="" alt="Profile" class="img-fluid" style="max-width: 100%; height: auto;">
                    <p id="modalProfileName" class="mt-2 fw-bold"></p>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
function showProfileModal(imageSrc, workerName) {
    document.getElementById('modalProfileImage').src = imageSrc;
    document.getElementById('modalProfileName').textContent = workerName;
}
</script>
@endpush