@extends('layouts.app')

@section('title', 'Detail Cek Alat')
@section('page-title', 'Detail Cek Alat')

@section('content')
<div class="container-fluid">
    <div class="mb-3">
        <a href="{{ route('admin.cek-alat-montir.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Kembali ke Daftar
        </a>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Informasi Cek Alat</h5>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td class="text-muted" width="35%">Montir</td>
                            <td><strong>{{ $cekAlat->montir->name }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Nama Alat</td>
                            <td>{{ $cekAlat->nama_alat }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Tanggal Cek</td>
                            <td>{{ $cekAlat->created_at->format('d M Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Kondisi</td>
                            <td>
                                @if($cekAlat->kondisi === 'baik')
                                <span class="badge bg-success">Baik</span>
                                @else
                                <span class="badge bg-danger">Rusak</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Catatan</td>
                            <td>{{ $cekAlat->catatan ?: '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Media Bukti</h5>
                </div>
                <div class="card-body">
                    @php
                        $photos = is_string($cekAlat->foto) ? json_decode($cekAlat->foto, true) : $cekAlat->foto;
                    @endphp

                    @if(!empty($photos))
                        <div class="row g-2">
                            @foreach($photos as $photo)
                            <div class="col-6">
                                <a href="{{ asset('storage/' . $photo) }}" target="_blank">
                                    <img src="{{ asset('storage/' . $photo) }}" class="img-fluid rounded border" alt="Foto Alat">
                                </a>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="fas fa-image fa-3x mb-2"></i>
                            <p>Tidak ada foto</p>
                        </div>
                    @endif

                    @if($cekAlat->video)
                        <hr>
                        <h6>Video:</h6>
                        <video width="100%" controls class="rounded border">
                            <source src="{{ asset('storage/' . $cekAlat->video) }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection