@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
        <!-- 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>
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button save --}}
                                <button type="submit" class="btn btn-primary mb-0"><i class="fas fa-floppy-disk me-1">
                                    </i><span class="font-weight-bold">Simpan</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', 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') }}" 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') == $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 d-flex justify-content-between align-items-center py-2">
                        <a data-bs-toggle="collapse" href="#kat-{{ $kat->value }}" role="button"
                            class="fw-bold text-white text-decoration-none collapsed d-flex justify-content-between w-100">
                            <span>{{ $kat->name }}</span>
                            <i class="fa fa-angle-down text-white"></i>
                        </a>
                    </div>

                    <div class="collapse" id="kat-{{ $kat->value }}">
                        <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)
                                            <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") == $j->value ? 'selected' : '' }}>
                                                                {{ $j->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    <textarea name="catatan[{{ $kat->value }}][{{ $q->value }}]" class="form-control form-control-sm" rows="2"
                                                        placeholder="Tulis catatan di sini...">{{ old("catatan.$kat->value.$q->value") }}</textarea>
                                                </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="{{ 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>
                </div>
            @endforeach

            <!-- Kesimpulan & Tindak Lanjut (juga collapsible) -->
            <div class="card shadow-sm border-0 mt-4">
                <div class="card-header bg-primary py-2">
                    <a class="d-flex justify-content-between align-items-center text-white text-decoration-none"
                        data-bs-toggle="collapse" href="#kesimpulanCard" role="button" aria-expanded="false"
                        aria-controls="kesimpulanCard">
                        <h6 class="mb-0 text-white">Kesimpulan & Tindak Lanjut</h6>
                        <i class="fa fa-angle-down"></i>
                    </a>
                </div>
                <div class="collapse" id="kesimpulanCard">
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Kesimpulan</label>
                            <textarea name="kesimpulan" rows="3" class="form-control">{{ old('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') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <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>
                            {{-- check authorize add --}}
                            @if ($authorize->add == '1')
                                {{-- button save --}}
                                <button type="submit" class="btn btn-primary mb-0"><i class="fas fa-floppy-disk me-1">
                                    </i><span class="font-weight-bold">Simpan</button>
                            @endif
                        </div>
                    </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
            if (file.size > maxSize) {
                Swal.fire({
                    icon: 'error',
                    title: 'Ukuran File Terlalu Besar',
                    text: 'Ukuran file maksimal 3 MB!',
                    confirmButtonText: 'OK'
                });
                input.value = ""; // reset input file
                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);

            const $btnSubmit = $(this).find('button[type="submit"]');
            $btnSubmit.prop('disabled', true);
            $btnSubmit.html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

            $.ajax({
                url: "{{ URL::to($url_menu) }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sukses',
                        text: 'Data genba berhasil disimpan',
                    }).then(() => {
                        window.location.href = "{{ url($url_menu) }}";
                    });
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        // ini error validasi dari Laravel
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors)
                            .map(errArr => errArr.join('<br>'))
                            .join('<hr>');

                        Swal.fire({
                            icon: 'error',
                            title: 'Validasi Gagal',
                            html: errorMessages
                        });
                    } else {
                        Swal.fire('Gagal', 'Terjadi kesalahan saat menyimpan', 'error');
                    }

                    // enable tombol lagi
                    $btnSubmit.prop('disabled', false);
                    $btnSubmit.html(
                        '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>'
                    );
                }
            });
        });

        // 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