@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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 back --}}
                        <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</button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            {{-- check status active --}}
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                            {{-- button edit --}}
                            <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit"><i class="fas fa-edit me-1">
                                </i><span class="font-weight-bold">Edit</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form role="form" method="POST"
                        action="{{ url($url_menu . '/' . $idencrypt) . '?page=' . request()->get('page', 1) }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')
                        <div class="card-body">
                            <input type="hidden" name="page" value="{{ request('page', 1) }}">
                            <p class="text-uppercase text-sm">View {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="row">
                                    <label for="id_mst_inventaris">ID Inventaris</label>
                                    <div class="form-group col-md-12">
                                        <input class="form-control" type="text" id="id_mst_inventaris"
                                            name="id_mst_inventaris" value="{{ $key['id_mst_inventaris'] }}" readonly>
                                    </div>
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="id_mst_inventaris">Tanggal Pengecekan</label>
                                    <input class="form-control" type="datetime" id="tgl_pengecekan" name="tgl_pengecekan"
                                        value="{{ $key['tgl_pengecekan'] }}" readonly>
                                </div>
                                @php
                                    // ambil item "Tanggal Expired" (anti beda spasi/case)
                                    $tanggal_expired = $list->first(function ($item) {
                                        return trim(strtolower((string) $item->deskripsi)) === 'tanggal expired';
                                    });
                                @endphp

                                @if ($tanggal_expired)
                                    @php
                                        // master exp dari mst_inventaris (type date)
                                        $masterExpDate = !empty($inventaris->exp)
                                            ? \Carbon\Carbon::parse($inventaris->exp)->format('Y-m-d')
                                            : '';

                                        // value yang tersimpan (bisa Y-m-d / Y-m-d H:i:s)
                                        $inputExpDate = !empty($tanggal_expired->value)
                                            ? \Carbon\Carbon::parse($tanggal_expired->value)->format('Y-m-d')
                                            : '';

                                        $expMismatch =
                                            $masterExpDate && $inputExpDate && $inputExpDate !== $masterExpDate;

                                        // foto bukti
                                        $fotoPath = trim((string) ($tanggal_expired->foto ?? ''));
                                        $fotoBase = $fotoPath !== '' ? basename($fotoPath) : '';
                                        $expHasFoto = $fotoPath !== '' && $fotoBase !== 'noimage.png';

                                        $expHasKeterangan = !empty($tanggal_expired->keterangan);

                                        // tampilkan bukti kalau mismatch ATAU memang sudah ada foto/keterangan
                                        $expBukti = $expMismatch || $expHasFoto || $expHasKeterangan ? '' : 'hidden';

                                        $expFoto = $expHasFoto ? $fotoPath : 'noimage.png';
                                        $expWarning = $expMismatch ? '' : 'hidden';
                                    @endphp

                                    <div class="form-group col-md-12">
                                        <label for="{{ $tanggal_expired->id }}">Tanggal Expired</label>

                                        <input class="form-control" type="date" id="{{ $tanggal_expired->id }}"
                                            name="{{ $tanggal_expired->id }}" value="{{ $inputExpDate }}"
                                            data-master-exp="{{ $masterExpDate }}">

                                        <small class="text-danger" id="{{ $tanggal_expired->id }}_warning"
                                            {{ $expWarning }}>
                                            <i class="fas fa-exclamation-triangle"></i>
                                            Tanggal Expired tidak sesuai dengan data Master Inventaris.
                                        </small>

                                        <div class="form-group mt-3 ml-4" id="{{ $tanggal_expired->id }}_bukti"
                                            style="margin-left: 30px; margin-right: 30px;" {{ $expBukti }}>
                                            <div class="col-sm-auto">
                                                <div class="position-relative">
                                                    <h4>INPUT BUKTI</h4>

                                                    <div class="image-container"
                                                        style="position: relative; display: inline-block;">
                                                        <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                            <img src="{{ asset('storage/' . ltrim($expFoto, '/')) }}"
                                                                id="{{ $tanggal_expired->id }}_preview" alt="image"
                                                                class="w-30 border-radius-lg shadow-sm">
                                                        </span>

                                                        <label for="{{ $tanggal_expired->id }}_file"
                                                            class="btn btn-icon-only bg-gradient-primary"
                                                            style="position: absolute; bottom: -20px; left: -5px; z-index: 10;">
                                                            <i class="fa fa-pen"></i>
                                                        </label>
                                                    </div>

                                                    <input class="form-control d-none" type="file"
                                                        id="{{ $tanggal_expired->id }}_file"
                                                        name="{{ $tanggal_expired->id }}_file">

                                                    <p class='text-primary text-xs pt-3 mb-0'>Max Size: <b>10000 KB</b></p>
                                                    <p class='text-primary text-xs pt-1'>Image Format: <b>PNG, JPG, JPEG</b>
                                                    </p>
                                                </div>
                                            </div>

                                            <label
                                                for="{{ $tanggal_expired->id }}_notes">{{ $tanggal_expired->deskripsi }}_NOTES</label>
                                            <input class="form-control" type="text"
                                                name="{{ $tanggal_expired->id }}_notes"
                                                value="{{ $tanggal_expired->keterangan }}">
                                        </div>
                                    </div>
                                @endif
                                <div id="dynamic_field">
                                    @foreach ($list as $item)
                                        @php
                                            $bukti = '';
                                            $foto = 'noimage.png';
                                            if ($item->keterangan == '') {
                                                $bukti = 'hidden';
                                            } else {
                                                $foto = $item->foto;
                                            }
                                        @endphp
                                        @if ($item->deskripsi != 'Tanggal Expired')
                                            <div class="form-group col-md-12" id="form_group_${index}">
                                                <label for="{{ $item->id_mst_pengecekan }}"> {{ $item->deskripsi }}
                                                </label>
                                                <select class="form-select dynamic-select"
                                                    id="{{ $item->id_mst_pengecekan }}"
                                                    name="{{ $item->id_mst_pengecekan }}">
                                                    <option value=""></option>
                                                    @php
                                                        $data_query = DB::table('sys_enum')
                                                            ->where([
                                                                'isactive' => '1',
                                                                'idenum' => $item->jawaban,
                                                            ])
                                                            ->select('value', 'name')
                                                            ->get();
                                                    @endphp
                                                    @foreach ($data_query as $q)
                                                        <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjpatrol/resources/views/transc/trspen/show.blade.php</b> on line <b>173</b><br />
                                                        <option value="{{ $sAsArray[0] }}"
                                                            {{ $sAsArray[0] == $item->value ? 'selected' : '' }}>
                                                            {{ $sAsArray[1] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <div class="form-group mt-3 ml-4" id="{{ $item->id_mst_pengecekan }}_bukti"
                                                    style="margin-left: 30px; margin-right: 30px;" {{ $bukti }}>
                                                    <div class="col-sm-auto">
                                                        <div class="position-relative">
                                                            <h4>INPUT BUKTI</h4>
                                                            <div class="image-container"
                                                                style="position: relative; display: inline-block;">
                                                                <span
                                                                    class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                    <img src="{{ asset('/storage' . '/' . $foto) }}"
                                                                        id="{{ $item->id_mst_pengecekan }}_preview"
                                                                        alt="image"
                                                                        class="w-30 border-radius-lg shadow-sm">
                                                                </span>
                                                                <label for="{{ $item->id_mst_pengecekan }}_file"
                                                                    class="btn btn-icon-only bg-gradient-primary"
                                                                    style="position: absolute; bottom: -20px; left: -5px; z-index: 10;">
                                                                    <i class="fa fa-pen"></i>
                                                                </label>
                                                            </div>
                                                            <input class="form-control d-none" type="file"
                                                                id="{{ $item->id_mst_pengecekan }}_file"
                                                                name="{{ $item->id_mst_pengecekan }}_file">
                                                            <p class='text-primary text-xs pt-3 mb-0'>Max Size: <b>2000
                                                                    KB</b>
                                                            </p>
                                                            <p class='text-primary text-xs pt-1'>Image Format: <b>PNG,
                                                                    JPG,
                                                                    JPEG</b></p>
                                                        </div>
                                                    </div>
                                                    <label for="{{ $item->id_mst_pengecekan }}">_NOTES</label>
                                                    <input class="form-control" type="text"
                                                        name="{{ $item->id_mst_pengecekan }}_notes"
                                                        value="{{ $item->keterangan }}">
                                                </div>

                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            <div class="row px-2 py-2">
                                <div class="col-lg">
                                    <div class="nav-wrapper"><code>Note : <i aria-hidden="true" style=""
                                                class="fas fa-circle text-dark"></i> Data primary key</code></div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            //set disable all input form
            $('#{{ $dmenu }}-form').find('label').addClass('disabled');
            $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
            $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                '');
            $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                '');
            $('.icon-modal-search').css('display', 'none');
            // function enable input form
            function enable_text() {
                $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                    'none');
                $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                    'none');
                $('.icon-modal-search').css('display', '');
            }
            //event button edit
            $('#{{ $dmenu }}-edit').click(function() {
                enable_text();
                $(this).css('display', 'none');
                $('#{{ $dmenu }}-save').css('display', '');
            });
        });

        // Handle Tanggal Expired comparison with master exp
        $("input[type='datetime-local'][data-master-exp]").on("change", function() {
            const masterExp = $(this).data("master-exp");
            if (!masterExp) return;

            const idPengecekan = $(this).attr("id");
            const inputVal = $(this).val();
            if (!inputVal) return;

            const inputDate = inputVal.slice(0, 10);
            const masterDate = masterExp;

            if (inputDate !== masterDate) {
                $(`#${idPengecekan}_warning`).removeAttr("hidden");
                $(`#${idPengecekan}_bukti`).removeAttr("hidden");
            } else {
                $(`#${idPengecekan}_warning`).attr("hidden", true);
                $(`#${idPengecekan}_bukti`).attr("hidden", true);
            }
        });

        // Handle file preview dynamically
        $(document).on("change", "input[type='file']", function() {
            const fileInput = this;
            const previewId = $(this).attr("id").replace("_file", "_preview");
            const file = fileInput.files[0];

            if (file) {
                const maxSize = 10 * 1024 * 1024;
                if (file.size > maxSize) {
                    Swal.fire({
                        title: "File Terlalu Besar!",
                        text: "Ukuran file tidak boleh lebih dari 10MB. Silakan pilih file yang lebih kecil.",
                        icon: "warning",
                        confirmButtonColor: "#d33",
                        confirmButtonText: "OK"
                    });
                    fileInput.value = "";
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    $(`#${previewId}`).attr("src", e.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
@endpush