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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <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 class="btn btn-primary mb-0" onclick="validateAndSubmit()">
                                <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 py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                        id="{{ $dmenu }}-form" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">ID Temuan</label>
                                        <input class="form-control" type="text" value="{{ $temuan->id_temuan }}"
                                            disabled>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Catering <code> *</code></label>
                                        <select class="form-select" name="id_catering" required>
                                            <option value="">Pilih Catering</option>
                                            @foreach ($katerings as $katering)
                                                <option value="{{ $katering->id_catering }}"
                                                    {{ $katering->id_catering == $temuan->id_catering ? 'selected' : '' }}>
                                                    {{ $katering->nama_catering }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Tanggal Temuan <code>*</code></label>
                                        <input type="date" class="form-control" name="tanggal_temuan"
                                            value="{{ $temuan->tanggal_temuan }}" required>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Shift <code>*</code></label>
                                        <select class="form-select" name="shift" required>
                                            <option value="">Pilih Shift</option>
                                            @foreach ($shifts as $shift)
                                                <option value="{{ $shift->value }}"
                                                    {{ $shift->value == $temuan->shift ? 'selected' : '' }}>
                                                    {{ $shift->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <div class="form-group">
                                        <label class="form-control-label">Menu</label>
                                        <select class="form-select" name="id_menu_utama">
                                            <option value="">Pilih Menu</option>
                                            @foreach ($menu_utamas as $menu)
                                                <option value="{{ $menu->id_menu_utama }}"
                                                    {{ $menu->id_menu_utama == $temuan->id_menu_utama ? 'selected' : '' }}>
                                                    {{ $menu->menu_utama }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Complain <code>*</code></label>
                                        <textarea class="form-control" name="complain" rows="3" required maxlength="150">{{ $temuan->complain }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Tindakan <code>*</code></label>
                                        <select class="form-select" name="tindakan" id="tindakan" onchange="updatePoin()">
                                            <option value="">Pilih Tindakan</option>
                                            <option value="Teguran" data-poin="1"
                                                {{ $temuan->tindakan == 'Teguran' ? 'selected' : '' }}>Teguran</option>
                                            <option value="SP" data-poin="2"
                                                {{ $temuan->tindakan == 'SP' ? 'selected' : '' }}>SP(Surat Peringatan)
                                            </option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Kategori <code>*</code></label>
                                        <select class="form-select" name="kategori" required id="tindakan"
                                            onchange="updatePoin()">
                                            <option value="">Pilih Kategori</option>
                                            @foreach ($kategoris as $kategori)
                                                <option value="{{ $kategori->value }}"
                                                    {{ $kategori->value == $temuan->kategori ? 'selected' : '' }}>
                                                    {{ $kategori->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label class="form-control-label">Poin <code>*</code></label>
                                        <input type="number" class="form-control" name="poin" id="poin"
                                            value="{{ $temuan->poin }}" required min="0" max="100" readonly>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class="mb-2" style="width: 300px;">
                                            <label class="form-label mb-1">Upload Gambar Temuan 1 <code>*</code></label>
                                            <div class="position-relative">
                                                <img id="preview_gambar_1"
                                                    src="{{ $temuan->file_gambar_temuan ? asset('storage/temuan_images/' . $temuan->file_gambar_temuan) : asset('storage/noimage.png') }}"
                                                    alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                    style="width: 150px; aspect-ratio: 4/3; object-fit: cover;">

                                                <label for="input_gambar_1"
                                                    class="btn btn-sm btn-primary position-absolute"
                                                    style="bottom: 10px; left: 110px; border-radius: 50%; padding: 6px 9px; cursor: pointer;">
                                                    <i class="fas fa-pen"></i>
                                                </label>

                                                <input type="file" id="input_gambar_1" name="file_gambar_temuan"
                                                    accept=".jpg,.jpeg,.png" class="d-none"
                                                    onchange="previewSelectedImage(this, 'preview_gambar_1')">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- gambar 2 --}}
                                    <div class="form-group">
                                        <div class="mb-2" style="width: 300px;">
                                            <label class="form-label mb-1">Upload Gambar Temuan 2</label>
                                            <div class="position-relative">
                                                <img id="preview_gambar_2"
                                                    src="{{ $temuan->gambar_2 ? asset('storage/temuan_images/' . $temuan->gambar_2) : asset('storage/noimage.png') }}"
                                                    alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                    style="width: 150px; aspect-ratio: 4/3; object-fit: cover;">

                                                <label for="input_gambar_2"
                                                    class="btn btn-sm btn-primary position-absolute"
                                                    style="bottom: 10px; left: 110px; border-radius: 50%; padding: 6px 9px; cursor: pointer;">
                                                    <i class="fas fa-pen"></i>
                                                </label>

                                                <input type="file" id="input_gambar_2" name="gambar_2"
                                                    accept=".jpg,.jpeg,.png" class="d-none"
                                                    onchange="previewSelectedImage(this, 'preview_gambar_2')">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- gambar 3 --}}

                                    <div class="form-group">
                                        <div class="mb-2" style="width: 300px;">
                                            <label class="form-label mb-1">Upload Gambar Temuan 3</label>
                                            <div class="position-relative">
                                                <img id="preview_gambar_3"
                                                    src="{{ $temuan->gambar_3 ? asset('storage/temuan_images/' . $temuan->gambar_3) : asset('storage/noimage.png') }}"
                                                    alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                    style="width: 150px; aspect-ratio: 4/3; object-fit: cover;">

                                                <label for="input_gambar_3"
                                                    class="btn btn-sm btn-primary position-absolute"
                                                    style="bottom: 10px; left: 110px; border-radius: 50%; padding: 6px 9px; cursor: pointer;">
                                                    <i class="fas fa-pen"></i>
                                                </label>

                                                <input type="file" id="input_gambar_3" name="gambar_3"
                                                    accept=".jpg,.jpeg,.png" class="d-none"
                                                    onchange="previewSelectedImage(this, 'preview_gambar_3')">
                                            </div>
                                        </div>
                                    </div>



                                    {{-- gambar 4 --}}
                                    <div class="form-group">
                                        <div class="mb-2" style="width: 300px;">
                                            <label class="form-label mb-1">Upload Gambar Temuan 4</label>
                                            <div class="position-relative">
                                                <img id="preview_gambar_4"
                                                    src="{{ $temuan->gambar_4 ? asset('storage/temuan_images/' . $temuan->gambar_4) : asset('storage/noimage.png') }}"
                                                    alt="Lampiran" class="border-radius-lg shadow-sm mb-2"
                                                    style="width: 150px; aspect-ratio: 4/3; object-fit: cover;">

                                                <label for="input_gambar_4"
                                                    class="btn btn-sm btn-primary position-absolute"
                                                    style="bottom: 10px; left: 110px; border-radius: 50%; padding: 6px 9px; cursor: pointer;">
                                                    <i class="fas fa-pen"></i>
                                                </label>

                                                <input type="file" id="input_gambar_4" name="gambar_4"
                                                    accept=".jpg,.jpeg,.png" class="d-none"
                                                    onchange="previewSelectedImage(this, 'preview_gambar_4')">
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="horizontal dark mt-0">
                                    <h6>Note : Maksimal Size: <b>3 MB</b> | Format File: <b>JPG, JPEG, PNG</h6>



                                </div>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <h6>Note : (<code>*</code>) Wajib diisi.</h6>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        function previewSelectedImage(input, previewId) {
            const file = input.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.getElementById(previewId);
                if (img) {
                    img.src = e.target.result;
                }
            };
            reader.readAsDataURL(file);
        }

        function validateAndSubmit() {
            const form = document.getElementById('{{ $dmenu }}-form');
            if (form.checkValidity()) {
                form.submit();
            } else {
                Swal.fire({
                    title: 'Error!',
                    text: 'Mohon isi semua field yang wajib diisi',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        }

        function updatePoin() {
            const tindakanSelect = document.getElementById('tindakan');
            const poinInput = document.getElementById('poin');

            const selectedOption = tindakanSelect.options[tindakanSelect.selectedIndex];

            if (selectedOption.value === "") {
                poinInput.value = "";
                poinInput.readOnly = false;
            } else {
                const poin = selectedOption.getAttribute('data-poin');
                poinInput.value = poin;
                poinInput.readOnly = true;
            }
        }
    </script>

    <script>
        function previewImage(input) {
            const preview = document.getElementById('preview');
            const previewDiv = document.getElementById('image-preview');

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    preview.src = e.target.result;
                    previewDiv.style.display = 'block';
                }

                reader.readAsDataURL(input.files[0]);
            } else {
                preview.src = '';
                previewDiv.style.display = 'none';
            }
        }
    </script>
@endsection