@extends('layouts.adminlte')
@section('title','Detail Audit')

@section('content')
<style>
    .repair-needed {
        background: #fff3cd;
    }
    .repair-needed td {
        border-color: #ffeeba;
    }
    .repair-badge {
        display: inline-block;
        padding: 2px 6px;
        font-size: 12px;
        color: #856404;
        background: #ffeeba;
        border-radius: 4px;
        margin-left: 6px;
    }
</style>
<div class="card">
    <div class="card-body">
        <div class="mb-2"><strong>User:</strong> {{ $audit->user?->nmr_finger }} - {{ $audit->user?->nama_orang }}</div>
        <form id="auditHeaderForm">
            @csrf
            @method('PATCH')
            <div class="form-row">
                <div class="col-md-3 mb-2">
                    <label class="mb-0">Periode</label>
                    <input type="month" class="form-control form-control-sm" name="periode" value="{{ $audit->periode }}">
                </div>
                <div class="col-md-3 mb-2">
                    <label class="mb-0">Tanggal Pelaksanaan</label>
                    <input type="date" class="form-control form-control-sm" name="tanggal_pelaksanaan" value="{{ $audit->tanggal_pelaksanaan }}">
                </div>
                <div class="col-md-3 mb-2">
                    <label class="mb-0">Auditor</label>
                    <input type="text" class="form-control form-control-sm" name="auditor" value="{{ $audit->auditor }}">
                </div>
                <div class="col-md-3 mb-2">
                    <label class="mb-0">Tim Checking</label>
                    <input type="text" class="form-control form-control-sm" name="tim_checking" value="{{ $audit->tim_checking }}">
                </div>
            </div>
            <div class="form-row">
                <div class="col-md-3 mb-2">
                    <label class="mb-0">Validasi</label>
                    <input type="text" class="form-control form-control-sm" name="validasi" value="{{ $audit->validasi }}">
                </div>
                <div class="col-md-9 mb-2">
                    <label class="mb-0">Catatan</label>
                    <input type="text" class="form-control form-control-sm" name="catatan" value="{{ $audit->catatan }}">
                </div>
            </div>
            <div class="d-flex align-items-center">
                <button class="btn btn-sm btn-success" type="submit">Simpan Header</button>
                <span class="ml-2 text-muted" id="headerSaveStatus"></span>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h5>Perangkat</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Item</th>
                    <th>Status</th>
                    <th>Kondisi</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($audit->items as $i => $item)
                    @php
                        $label = $item->hardware
                            ? ($item->hardware->kode_inventaris_local . ' - ' . $item->hardware->nama_barang)
                            : ($item->lisensiEng
                                ? ($item->lisensiEng->nama_produk . ' - ' . $item->lisensiEng->deskripsi)
                                : ($item->lisensiMicrosoft
                                    ? ($item->lisensiMicrosoft->nama_produk . ' - ' . $item->lisensiMicrosoft->deskripsi_produk)
                                    : '-'));
                        $needAction = in_array(strtolower((string) $item->status_perangkat), ['perlu servis', 'rusak'], true)
                            || in_array(strtoupper((string) $item->request_action), ['REPAIR', 'GANTI'], true);
                        $requestPhotos = $item->request_photos ? json_decode($item->request_photos, true) : [];
                        $repairPhotos = $item->repair_photos ? json_decode($item->repair_photos, true) : [];
                    @endphp
                    <tr data-item-id="{{ $item->id_audit_jadwal_item }}" class="{{ $needAction ? 'repair-needed' : '' }}">
                        <td>{{ $i + 1 }}</td>
                        <td>
                            {{ $label }}
                            @if ($needAction)
                                <span class="repair-badge">Butuh Perbaikan</span>
                            @endif
                        </td>
                        <td>
                            <select class="form-control form-control-sm inline-status">
                                <option value="">Status</option>
                                <option value="Baik" @selected(($item->status_perangkat ?? 'Baik') === 'Baik')>Baik</option>
                                <option value="Perlu Servis" @selected($item->status_perangkat === 'Perlu Servis')>Perlu Servis</option>
                                <option value="Rusak" @selected($item->status_perangkat === 'Rusak')>Rusak</option>
                            </select>
                        </td>
                        <td>
                            <input class="form-control form-control-sm inline-kondisi" value="{{ $item->kondisi }}">
                        </td>
                        <td>
                            <button class="btn btn-sm btn-success inline-save">Simpan</button>
                            @if ($needAction)
                                <button class="btn btn-sm btn-warning repair-btn"
                                        data-id="{{ $item->id_audit_jadwal_item }}"
                                        data-label="{{ $label }}">
                                    Lanjut Repair
                                </button>
                            @endif
                            <span class="ml-2 text-muted inline-status-msg"></span>
                        </td>
                    </tr>
                    <tr class="bg-light {{ $needAction ? 'repair-needed' : '' }}">
                        <td></td>
                        <td colspan="4">
                            <div class="mb-2"><strong>Detail Repair</strong></div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="font-weight-bold">Request</div>
                                    <div>Status: {{ $item->request_action ?: '-' }}</div>
                                    <div>Catatan: {{ $item->request_notes ?: '-' }}</div>
                                    <div class="mt-1">
                                        @if (!empty($requestPhotos))
                                            @foreach ($requestPhotos as $p)
                                                <a href="{{ \Illuminate\Support\Facades\Storage::url($p) }}" target="_blank">
                                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($p) }}" style="width:60px;height:60px;object-fit:cover;border:1px solid #ddd;margin-right:4px;">
                                                </a>
                                            @endforeach
                                        @else
                                            <span class="text-muted">Tidak ada foto.</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="font-weight-bold">Pengerjaan</div>
                                    <div>Status: {{ $item->repair_status ?: '-' }}</div>
                                    <div>Catatan: {{ $item->repair_notes ?: '-' }}</div>
                                    <div>Update: {{ $item->repair_updated_at ?: '-' }}</div>
                                    <div class="mt-1">
                                        @if (!empty($repairPhotos))
                                            @foreach ($repairPhotos as $p)
                                                <a href="{{ \Illuminate\Support\Facades\Storage::url($p) }}" target="_blank">
                                                    <img src="{{ \Illuminate\Support\Facades\Storage::url($p) }}" style="width:60px;height:60px;object-fit:cover;border:1px solid #ddd;margin-right:4px;">
                                                </a>
                                            @endforeach
                                        @else
                                            <span class="text-muted">Tidak ada foto.</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="text-muted text-center">Tidak ada data</td></tr>
                @endforelse
            </tbody>
        </table>
        <a href="{{ route('jadwal.index') }}" class="btn btn-secondary">Kembali</a>
    </div>
</div>

<div class="modal fade" id="modalRepair">
    <div class="modal-dialog modal-lg">
        <form method="POST" id="formRepair" enctype="multipart/form-data">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5>Lanjutan Repair</h5>
                </div>
                <div class="modal-body">
                    <div class="mb-2"><strong id="repairItemLabel"></strong></div>
                    <div class="form-row">
                        <div class="col-md-4">
                            <label>Status Repair</label>
                            <select class="form-control" name="repair_status">
                                <option value="Repair Selesai">Repair Selesai</option>
                                <option value="Perlu Servis">Perlu Servis</option>
                                <option value="Rusak">Rusak</option>
                                <option value="Rusak & Cant Repair">Rusak & Cant Repair</option>
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label>Catatan Repair</label>
                            <input class="form-control" name="repair_notes" placeholder="Catatan repair">
                        </div>
                    </div>
                    <div class="mt-2">
                        <label>Upload Foto Repair</label>
                        <input type="file" class="form-control-file" name="repair_photos[]" multiple accept="image/*">
                    </div>
                    <small class="text-muted d-block mt-2">
                        Jika status item Rusak/Ganti, sistem akan melepas hardware dari penggunaan aktif.
                    </small>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    $(document).on('click', '.repair-btn', function () {
        let id = $(this).data('id');
        let label = $(this).data('label');
        $('#repairItemLabel').text(label);
        $('#formRepair').attr('action', "{{ route('jadwal.item-repair', ['id' => '__id__']) }}".replace('__id__', id));
        $('#modalRepair').modal('show');
    });

    $('#auditHeaderForm').on('submit', function (e) {
        e.preventDefault();
        let $status = $('#headerSaveStatus');
        $status.text('Menyimpan...');
        $.ajax({
            url: "{{ route('jadwal.update', ['jadwal' => $audit->id_audit_jadwal]) }}",
            method: 'POST',
            data: $(this).serialize(),
            success: function () {
                $status.text('Tersimpan.');
            },
            error: function () {
                $status.text('Gagal menyimpan.');
            }
        });
    });

    $('.inline-save').on('click', function () {
        let $row = $(this).closest('tr');
        let id = $row.data('item-id');
        let payload = {
            _token: "{{ csrf_token() }}",
            status_perangkat: $row.find('.inline-status').val(),
            kondisi: $row.find('.inline-kondisi').val()
        };
        let $msg = $row.find('.inline-status-msg');
        $msg.text('Menyimpan...');
        $.post("{{ route('jadwal.item-inline-update', ['id' => '__id__']) }}".replace('__id__', id), payload)
            .done(function () {
                $msg.text('Tersimpan.');
                let statusVal = (payload.status_perangkat || '').toLowerCase();
                let needAction = statusVal === 'perlu servis' || statusVal === 'rusak';
                if (needAction) {
                    if (!$row.find('.repair-btn').length) {
                        let label = $row.find('td:nth-child(2)').clone().children().remove().end().text().trim();
                        let btn = `<button class="btn btn-sm btn-warning repair-btn" data-id="${id}" data-label="${label}">Lanjut Repair</button>`;
                        $row.find('td:last .inline-status-msg').before(btn + ' ');
                    } else {
                        $row.find('.repair-btn').show();
                    }
                } else {
                    $row.find('.repair-btn').remove();
                }
            })
            .fail(function () {
                $msg.text('Gagal.');
            });
    });
});
</script>
@endpush