@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <form id="form-genba" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <!-- Tombol Aksi -->
        <div class="card shadow-lg mx-4 mb-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- button back --}}
                            <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                                <i class="fas fa-circle-left me-1"></i>
                                <span class="font-weight-bold">Kembali</span>
                            </button>

                            @if ($authorize->edit == '1')
                                <button type="submit" class="btn btn-primary mb-0">
                                    <i class="fas fa-floppy-disk me-1"></i>
                                    <span class="font-weight-bold">Simpan</span>
                                </button>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid pb-4">
            <!-- Informasi Umum -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-primary py-2">
                    <h6 class="mb-0 text-white">Informasi Umum</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Tanggal Genba <span class="text-danger">*</span></label>
                            <input type="date" name="tanggal" id="tanggal" class="form-control"
                                value="{{ old('tanggal', $list->tanggal ?? date('Y-m-d')) }}" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Area <span class="text-danger">*</span></label>
                            <input list="areaOptions" name="area" id="area" class="form-control"
                                value="{{ old('area', $list->area ?? '') }}" oninput="this.value=this.value.toUpperCase()"
                                required>
                            <datalist id="areaOptions">
                                @foreach ($historyArea as $area)
                                    <option value="{{ $area }}"></option>
                                @endforeach
                            </datalist>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">PIC Area <span class="text-danger">*</span></label>
                            <select name="pic" id="pic" class="form-select" required>
                                <option value="">-- Pilih PIC Area--</option>
                                @foreach ($pic as $p)
                                    <option value="{{ $p->nik }}"
                                        {{ old('pic', $list->pic ?? '') == $p->nik ? 'selected' : '' }}>
                                        {{ $p->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Checklist -->
            @foreach ($kategori as $kat)
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-primary py-2">
                        <h6 class="mb-0 text-white">{{ $kat->name }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-sm align-middle table-bordered mb-0">
                                <thead class="table-secondary">
                                    <tr>
                                        <th style="width: 35%">Pertanyaan</th>
                                        <th style="width: 15%">Jawaban</th>
                                        <th style="width: 25%">Catatan</th>
                                        <th style="width: 25%">Temuan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($pertanyaan[$kat->value] ?? [] as $q)
                                        @php
                                            $detailRow = $detail[$kat->value][$q->value] ?? null;
                                        @endphp
                                        <tr>
                                            <td class="text-wrap">{{ $q->name }}</td>
                                            <td>
                                                <select name="jawaban[{{ $kat->value }}][{{ $q->value }}]"
                                                    class="form-select form-select-sm" required>
                                                    <option value="">-- Pilih --</option>
                                                    @foreach ($jawaban as $j)
                                                        <option value="{{ $j->value }}"
                                                            {{ old("jawaban.$kat->value.$q->value", $detailRow->jawaban ?? '') == $j->value ? 'selected' : '' }}>
                                                            {{ $j->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text"
                                                    name="catatan[{{ $kat->value }}][{{ $q->value }}]"
                                                    class="form-control form-control-sm" placeholder="Catatan"
                                                    value="{{ old("catatan.$kat->value.$q->value", $detailRow->catatan ?? '') }}">
                                            </td>
                                            <td class="text-center">
                                                <input type="file" id="temuan-{{ $kat->value }}-{{ $q->value }}"
                                                    name="temuan[{{ $kat->value }}][{{ $q->value }}]" class="d-none"
                                                    accept="image/png,image/jpeg"
                                                    onchange="previewImage(this, 'preview-{{ $kat->value }}-{{ $q->value }}')">

                                                <div class="position-relative d-inline-block">
                                                    <img src="{{ !empty($detailRow->temuan) ? asset('storage/' . $detailRow->temuan) : asset('storage/noimage.png') }}"
                                                        id="preview-{{ $kat->value }}-{{ $q->value }}"
                                                        alt="Preview" class="rounded shadow-sm"
                                                        style="width:120px;height:90px;object-fit:cover;">

                                                    <label for="temuan-{{ $kat->value }}-{{ $q->value }}"
                                                        class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 start-0 m-1"
                                                        data-bs-toggle="tooltip" title="Upload / Ganti Gambar">
                                                        <i class="fa fa-pen text-white"></i>
                                                    </label>
                                                </div>

                                                <p class="text-primary text-xs pt-2 mb-0">Maksimal Size: <b>3072 KB (3
                                                        MB)</b></p>
                                                <p class="text-primary text-xs pt-1">Format Image: <b>PNG, JPG, JPEG</b></p>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            @endforeach

            <!-- Kesimpulan & Tindak Lanjut -->
            <div class="card shadow-sm border-0 mt-4">
                <div class="card-header bg-primary py-2">
                    <h6 class="mb-0 text-white">Kesimpulan & Tindak Lanjut</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Kesimpulan</label>
                        <textarea name="kesimpulan" rows="3" class="form-control">{{ old('kesimpulan', $list->kesimpulan ?? '') }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tindak Lanjut</label>
                        <textarea name="tindak_lanjut" rows="3" class="form-control">{{ old('tindak_lanjut', $list->tindak_lanjut ?? '') }}</textarea>
                    </div>
                </div>
            </div>

        </div>
    </form>
@endsection

@push('js')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#pic').select2({
                tags: false, // bisa ketik manual
                placeholder: "-- Pilih PIC Area--",
                allowClear: true,
                width: '100%'
            });
        });

        function previewImage(input, previewId) {
            const file = input.files[0];
            if (!file) return;

            // Validasi size (max 3 MB)
            const maxSize = 3 * 1024 * 1024; // 3MB dalam byte
            if (file.size > maxSize) {
                alert("Ukuran file maksimal 3 MB!");
                input.value = ""; // reset
                return;
            }

            // Preview image
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById(previewId).setAttribute('src', e.target.result);
            }
            reader.readAsDataURL(file);
        }
        // Set default tanggal = hari ini
        var today = new Date().toISOString().split('T')[0];
        document.getElementById('tanggal').value = today;

        $("#form-genba").submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            formData.append('_method', 'PUT');

            $.ajax({
                url: "{{ URL::to($url_menu . '/' . $idencrypt) }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    Swal.fire({
                            icon: 'success',
                            title: 'Sukses',
                            text: 'Data berhasil diupdate'
                        })
                        .then(() => {
                            window.location.href = "{{ url($url_menu) }}";
                        });
                },
                error: function() {
                    Swal.fire('Gagal', 'Terjadi kesalahan', 'error');
                }
            });
        });


        // Semua collapse dalam card
        $('.card .collapse').each(function() {
            const collapseId = $(this).attr('id');
            const $icon = $(this).siblings('.card-header').find('i.fa');

            $('#' + collapseId).on('show.bs.collapse', function() {
                $icon.removeClass('fa-angle-down').addClass('fa-angle-up');
            });

            $('#' + collapseId).on('hide.bs.collapse', function() {
                $icon.removeClass('fa-angle-up').addClass('fa-angle-down');
            });

            $('#kesimpulanCard').on('show.bs.collapse', function() {
                $(this).siblings('.card-header').find('i.fa')
                    .removeClass('fa-angle-down').addClass('fa-angle-up');
            });
            $('#kesimpulanCard').on('hide.bs.collapse', function() {
                $(this).siblings('.card-header').find('i.fa')
                    .removeClass('fa-angle-up').addClass('fa-angle-down');
            });

        });
    </script>
    <style>
        .table td {
            white-space: normal !important;
            /* biar teks bisa kebawah */
            word-wrap: break-word;
            /* pecah kalau kepanjangan */
        }
    </style>
@endpush