@extends('layouts.admin')

@section('title', 'Kegiatan Monitoring')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Kegiatan Monitoring</h2>
    @role('guru')
    <a href="{{ route('monitorings.create') }}" class="btn btn-primary">+ Tambah Kegiatan</a>
    @endrole
</div>

<x-alert />

@hasanyrole('admin|kaprog|kepsek')
<div class="d-flex gap-2 mb-3">
    <a href="{{ route('monitorings.export.zip') }}" class="btn btn-success" data-no-loading>Unduh ZIP + Excel</a>
</div>
@endhasanyrole

<form method="GET" class="mb-3">
    <div class="input-group" style="max-width:400px;">
        <input type="text" name="search" class="form-control" placeholder="Cari guru/kegiatan..." value="{{ request('search') }}">
        <button class="btn btn-outline-secondary" type="submit">Cari</button>
        @if(request('search'))
        <a href="{{ route('monitorings.index') }}" class="btn btn-outline-danger">Reset</a>
        @endif
    </div>
</form>

<div class="card">
    <div class="card-body">
        <div class="table-responsive table-mobile-cards">
        <table class="table table-bordered table-hover align-middle text-center">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th class="text-start">Guru</th>
                    <th class="text-start">Perusahaan</th>
                    <th>Kegiatan</th>
                    <th>Tanggal</th>
                    <th>Catatan</th>
                    <th>Dokumentasi</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($monitorings as $monitoring)
                <tr>
                    <td data-label="No">{{ $loop->iteration }}</td>
                    <td data-label="Guru" class="text-start">{{ $monitoring->teacher->user->name }}</td>
                    <td data-label="Perusahaan" class="text-start">{{ $monitoring->company?->name ?? '-' }}</td>
                    <td data-label="Kegiatan">
                        <span class="badge bg-{{ $monitoring->activity_type === 'pengantaran' ? 'primary' : ($monitoring->activity_type === 'monitoring' ? 'warning' : 'success') }}">
                            {{ ucfirst($monitoring->activity_type) }}
                        </span>
                    </td>
                    <td data-label="Tanggal">{{ $monitoring->activity_date->format('d/m/Y') }}</td>
                    <td data-label="Catatan" class="text-start" style="max-width:250px;">{{ Str::limit($monitoring->notes, 80) }}</td>
                    <td data-label="Dokumentasi">
                        @forelse ($monitoring->photos as $photo)
                        <a href="{{ route('photos.show', $photo->photo) }}" target="_blank" data-bs-toggle="tooltip" title="Lihat foto">
                            <img src="{{ route('photos.show', $photo->photo) }}" width="60" height="60" style="object-fit:cover;border-radius:6px;border:1px solid #ddd;" alt="Foto">
                        </a>
                        @empty
                        <span class="text-muted">-</span>
                        @endforelse
                    </td>
                    <td data-label="Aksi">
                        @can('update monitorings')
                        <a href="{{ route('monitorings.edit', $monitoring) }}" class="btn btn-sm btn-warning">Edit</a>
                        @endcan
                        @can('delete monitorings')
                        <form method="POST" action="{{ route('monitorings.destroy', $monitoring) }}" class="d-inline" onsubmit="return confirm('Yakin hapus?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                        </form>
                        @endcan
                        @cannot('update monitorings')
                        <span class="text-muted small">-</span>
                        @endcannot
                    </td>
                </tr>
                @empty
                <tr>
                    <td data-label="" colspan="8" class="text-center text-muted">Belum ada data monitoring.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
        </div>
    </div>
</div>
{{ $monitorings->links() }}
@endsection