@section('title', 'Laporan Bug')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4/dist/fancybox.min.css" rel="stylesheet">
@endsection
<div>
    <div class="row g-3 mb-3">
        <div class="col-12 col-lg-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="fw-semibold mb-0">Kirim Laporan Bug</h5>
                    <hr class="my-3">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-label">Judul <span class="text-danger">*</span></div>
                            <input class="form-control @error('title') is-invalid @enderror" placeholder="Contoh: Error saat simpan penelitian" required type="text" wire:model.live="title">
                            @error('title')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <div class="form-label">Deskripsi <span class="text-danger">*</span></div>
                            <textarea class="form-control @error('description') is-invalid @enderror" placeholder="Jelaskan langkah yang menyebabkan bug" required rows="4" wire:model.live="description"></textarea>
                            @error('description')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <div class="form-label">Menu <span class="text-danger">*</span></div>
                            <input class="form-control @error('menu') is-invalid @enderror" placeholder="Contoh: Penelitian" required type="text" wire:model.live="menu">
                            @error('menu')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12">
                            <div class="form-label">Link Video (Opsional)</div>
                            <input class="form-control @error('video_link') is-invalid @enderror" placeholder="URL publik dari Google Drive/Dropbox/Mega dll" type="url" wire:model.live="video_link">
                            <small class="text-muted">Pastikan link bersifat publik, bukan private</small>
                            @error('video_link')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-12" x-data="{ uploading: false, progress: 0 }" x-on:livewire-upload-error="uploading = false" x-on:livewire-upload-finish="uploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress" x-on:livewire-upload-start="uploading = true">
                            <div class="form-label">Screenshot <span class="text-danger">*</span></div>
                            <div class="input-group">
                                <input accept=".png,.jpg,.jpeg,.webp" class="form-control @error('screenshot') is-invalid @enderror" required type="file" wire:model.live="screenshot">
                                <button @if ($screenshot) data-fancybox data-src="{{ $screenshot->temporaryUrl() }}" @else disabled @endif class="btn {{ $screenshot ? 'btn-info' : 'btn-secondary' }}" type="button">Pratinjau <i class="fa-regular fa-eye fa-fw ms-2"></i></button>
                            </div>
                            <div x-show="uploading">
                                <progress max="100" x-bind:value="progress"></progress>
                            </div>
                            @error('screenshot')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button class="btn btn-primary" wire:click="save" wire:loading.attr="disabled">Kirim <i class="fa-solid fa-paper-plane fa-fw ms-2"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="fw-semibold mb-0">Laporan Saya</h5>
                    <hr class="my-3">
                    <div class="table-responsive scrollbar-x">
                        <table class="table-bordered table">
                            <thead class="table-light">
                                <tr>
                                    <th>Judul</th>
                                    <th>Menu</th>
                                    <th>Video</th>
                                    <th>Screenshot</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($reports as $result)
                                    <tr>
                                        <td>{{ $result->title }}</td>
                                        <td>{{ $result->menu }}</td>

                                        <td>
                                            @if ($result->video_link)
                                                <a class="btn btn-sm btn-primary" href="{{ $result->video_link }}" target="_blank">Buka</a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($result->screenshot)
                                                <a class="btn btn-sm btn-info text-white" data-fancybox data-src="{{ asset('storage/' . $result->screenshot) }}">Lihat <i class="fa-regular fa-eye fa-fw ms-2"></i></a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge {{ $result->status == 'fixed' ? 'bg-success' : 'bg-warning' }}">{{ Str::title($result->status) }}</span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-muted text-center" colspan="4">Belum ada laporan</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        {{ $reports->links('vendor.livewire.bootstrap') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4/dist/fancybox.umd.min.js"></script>
@endpush