@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')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="{{ $dmenu }}-save"
                                onclick="event.preventDefault(); if (validateForm()) { document.getElementById('{{ $dmenu }}-form').submit(); }"><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 py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @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="alert alert-warning text-white text-sm" role="alert">
                                Perubahan komponen ini berlaku untuk seluruh Profil Parameter yang menggunakan Parameter
                                Set tersebut. Konteks gedung, line, dan item tidak diubah dari menu ini.
                            </div>
                            <div class="row">
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">Parameter Set</label>
                                        <input type="text" class="form-control" value="{{ $parameter_set->nama_parameter_set }}" disabled readonly>
                                        <small class="text-muted">Parameter disimpan pada set ini.</small>
                                    </div>
                                </div>
                                <datalist id="nama_parameter_list">
                                    @foreach ($parameter as $p)
                                        <option value="{{ $p->nama_parameter }}">
                                    @endforeach
                                </datalist>
                                {{-- Section 1: Parameter Header --}}
                                <div class="card shadow-none border mb-4" style="border-color: #00b8d44d !important;">
                                    <div class="card-header pb-0" style="background-color: #f0faff;">
                                        <h6 class="text-uppercase text-xs font-weight-bolder text-info mb-3">
                                            <i class="fas fa-list-check me-1"></i> 1. Parameter Header
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <button type="button" class="btn btn-xs btn-outline-info mb-3 py-1 px-2"
                                            data-bs-toggle="modal" data-bs-target="#modalPanduanSource">
                                            <i class="fas fa-circle-info me-1"></i> Panduan Source Data
                                        </button>
                                        <div class="table-responsive">
                                            <table
                                                class="table table-bordered table-striped table-hover align-items-center mb-0"
                                                id="headerTable">
                                                <thead class="thead-light" style="background-color: #e9ecef;">
                                                    <tr>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">Nama
                                                            Parameter <span class="text-danger">*</span></th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Urutan</th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Tipe Input <span class="text-danger">*</span></th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Source Data</th>
                                                        <th
                                                            class="text-uppercase text-dark text-xs font-weight-bolder text-center">
                                                            Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($parameter_existing->where('is_header', 1) as $param)
                                                        <tr class="header-row">
                                                            <td>
                                                                <input type="hidden" name="is_header[]" value="1">
                                                                <input type="hidden" name="jenis_parameter[]"
                                                                    value="">
                                                                <input type="hidden" name="unit_parameter[]"
                                                                    value="{{ $param->unit }}">
                                                                <input type="hidden" name="sub_header[]" value="">
                                                                <input type="hidden" name="parameter_id[]"
                                                                    value="{{ $param->id }}">
                                                                <input type="text" class="form-control form-control-sm"
                                                                    name="nama_parameter[]"
                                                                    value="{{ $param->nama_parameter }}"
                                                                    list="nama_parameter_list" autocomplete="off">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm"
                                                                    name="urut[]" value="{{ $param->urut }}"
                                                                    placeholder="1, 2, 3" autocomplete="off">
                                                            </td>
                                                            <td>
                                                                <select class="form-select form-select-sm js-tipe-input"
                                                                    name="tipe_input[]">
                                                                    <option value="">-- Pilih --</option>
                                                                    @foreach ($tipe_input as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ $param->tipe_input == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm js-source-data"
                                                                    name="source_data[]" value="{{ $param->source_data }}"
                                                                    placeholder="table:..." autocomplete="off">
                                                                <small class="text-muted source-data-help">Opsional, sesuaikan dengan tipe input.</small>
                                                            </td>
                                                            <td class="text-center">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-outline-danger btn-hapus-header mb-0">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <button type="button" class="btn btn-sm btn-info mt-2"
                                                id="btn-tambah-header">
                                                <i class="fas fa-plus-circle me-1"></i> Tambah Baris Header
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                {{-- Section 2: Parameter Sebenarnya --}}
                                <div class="card shadow-none border mb-4" style="border-color: #0082844d !important;">
                                    <div class="card-header pb-0" style="background-color: #f5fcfc;">
                                        <h6 class="text-uppercase text-xs font-weight-bolder text-primary mb-3">
                                            <i class="fas fa-microchip me-1"></i> 2. Parameter Sebenarnya (Measurement)
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table
                                                class="table table-bordered table-striped table-hover align-items-center mb-0"
                                                id="parameterTable">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Nama Parameter <span class="text-danger">*</span></th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Urutan</th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Unit</th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Jenis Parameter</th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Tipe Input <span class="text-danger">*</span></th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">Sub
                                                            Header</th>
                                                        <th class="text-uppercase text-dark text-xs font-weight-bolder">
                                                            Source Data</th>
                                                        <th
                                                            class="text-uppercase text-dark text-xs font-weight-bolder text-center">
                                                            Aksi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($parameter_existing->where('is_header', 0) as $param)
                                                        <tr class="parameter-row">
                                                            <td>
                                                                <input type="hidden" name="is_header[]" value="0">
                                                                <input type="hidden" name="parameter_id[]"
                                                                    value="{{ $param->id }}">
                                                                <input type="text" class="form-control form-control-sm"
                                                                    name="nama_parameter[]"
                                                                    value="{{ $param->nama_parameter }}"
                                                                    list="nama_parameter_list" autocomplete="off">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm"
                                                                    name="urut[]" value="{{ $param->urut }}"
                                                                    placeholder="1, 2, 3" autocomplete="off">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm"
                                                                    name="unit_parameter[]" value="{{ $param->unit }}"
                                                                    placeholder="Unit" autocomplete="off">
                                                            </td>
                                                            <td>
                                                                <select class="form-select form-select-sm"
                                                                    name="jenis_parameter[]">
                                                                    <option value="">-- Pilih --</option>
                                                                    @foreach ($jenis_param as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ $param->jenis_parameter == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <select class="form-select form-select-sm js-tipe-input"
                                                                    name="tipe_input[]">
                                                                    <option value="">-- Pilih --</option>
                                                                    @foreach ($tipe_input as $item)
                                                                        <option value="{{ $item->value }}"
                                                                            {{ $param->tipe_input == $item->value ? 'selected' : '' }}>
                                                                            {{ $item->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm"
                                                                    name="sub_header[]"
                                                                    value="{{ $param->sub_header ?? '' }}"
                                                                    placeholder="Contoh: Tension" autocomplete="off">
                                                            </td>
                                                            <td>
                                                                <input type="text" class="form-control form-control-sm js-source-data"
                                                                    name="source_data[]"
                                                                    value="{{ $param->source_data }}"
                                                                    placeholder="table:..." autocomplete="off">
                                                                <small class="text-muted source-data-help">Opsional, sesuaikan dengan tipe input.</small>
                                                            </td>
                                                            <td class="text-center">
                                                                <button type="button"
                                                                    class="btn btn-sm btn-outline-danger btn-hapus mb-0">
                                                                    <i class="fas fa-trash"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <button type="button" class="btn btn-sm btn-primary mt-2" id="btn-tambah">
                                                <i class="fas fa-plus-circle me-1"></i> Tambah Baris Parameter
                                            </button>
                                        </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
    {{-- Modal Panduan Source Data --}}
    <div class="modal fade" id="modalPanduanSource" tabindex="-1" role="dialog"
        aria-labelledby="modalPanduanSourceLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-info py-3">
                    <h6 class="modal-title text-white font-weight-bolder" id="modalPanduanSourceLabel">
                        <i class="fas fa-info-circle me-1"></i> Panduan Penulisan Source Data
                    </h6>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="list-group list-group-flush border-0">
                        <div class="list-group-item px-0 py-3 border-0">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">1. Sumber Enum (sys_enum)</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Mengambil data dari tabel system enum berdasarkan
                                identitas enum.</p>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border">enum:[idenum]</code>
                            <small class="text-xxs text-muted mt-1">Contoh: <code>enum:shift</code> atau
                                <code>enum:grup_shift</code></small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">2. Sumber Tabel (Database)</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Mengambil data secara dinamis dari tabel database
                                manapun.</p>
                            <code
                                class="d-block p-2 bg-gray-100 rounded text-info border">table:[nama_tabel]:[kolom_id]:[kolom_teks]</code>
                            <small class="text-xxs text-muted mt-1">Contoh:
                                <code>table:tbl_mst_mesin:id:nama_mesin</code></small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">3. Sumber Statis</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Mendefinisikan pilihan secara manual (dipisahkan koma).
                            </p>
                            <code
                                class="d-block p-2 bg-gray-100 rounded text-info border">static:[opsi1],[opsi2],[opsi3]</code>
                            <small class="text-xxs text-muted mt-1">Contoh: <code>static:A,B,C</code> atau
                                <code>static:Ya,Tidak</code></small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">4. Hubungan Tipe Input dan Source Data</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Tipe kontrol dipilih pada kolom
                                <strong>Tipe Input</strong>. Source Data hanya berisi sumber pilihan atau aturan tambahan.
                            </p>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border mb-2">Tipe Input: Dropdown |
                                Source Data: enum:shift</code>
                            <small class="text-xxs text-muted mt-1 d-block">• Jangan menulis <code>type:</code> di Source
                                Data.</small>
                            <small class="text-xxs text-muted d-block">• Untuk Dropdown multi-select, tambahkan
                                <code>:multiple</code>, misalnya <code>enum:shift:multiple</code> atau
                                <code>static:A,B,C:multiple</code>.</small>
                            <small class="text-xxs text-muted d-block">• Number dan Text boleh tidak memiliki Source Data
                                jika tidak memerlukan aturan tambahan.</small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">5. Aturan Tambahan Number dan Text</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Aturan ini digunakan ketika kolom Tipe Input dipilih
                                <strong>Number</strong>.</p>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border mb-2">Number: min:0; max:100;
                                format:2; allow_negative:false</code>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border mb-2">Text: min_length:1;
                                max_length:50; pattern:[regex]</code>
                            <small class="text-xxs text-muted mt-1 d-block">• Setiap aturan bersifat opsional dan
                                dipisahkan dengan titik koma.</small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">6. Integrasi API (Otomatis Fetch Data)
                                </h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Digunakan untuk mengambil data dari sistem eksternal
                                (contoh: SAP) secara dinamis. Membutuhkan 2 konfigurasi pada parameter yang berbeda:</p>
                            <code
                                class="d-block p-2 bg-gray-100 rounded text-info border mb-2">resource_api:[nama_api]</code>
                            <small class="text-xxs text-muted mt-1 d-block">• Ditaruh pada parameter
                                <strong>Header</strong> yang menjadi kata kunci (input). Contoh:
                                <code>resource_api:zfmaterialroll</code> pada parameter "No Roll Asal".</small>
                            <br>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border mb-2">from_api:[nama_api]</code>
                            <small class="text-xxs text-muted mt-1 d-block">• Ditaruh pada parameter
                                <strong>Measurement/Detail</strong> yang akan diisi otomatis hasilnya. Contoh:
                                <code>from_api:zfmaterialroll</code> pada parameter "Item".</small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">7. Generate Penomoran Urut (Range)</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Digunakan untuk membuat nomor urut otomatis berdasarkan
                                jumlah yang dimasukkan di header.</p>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border mb-2">is_range:1;
                                range_source:[Nama Parameter Header]; prefix_format:[Format Prefix]</code>
                            <small class="text-xxs text-muted mt-1 d-block">• <code>range_source</code>: Nama parameter
                                header yang berisi angka jumlah (Contoh: "Jumlah Roll").</small>
                            <small class="text-xxs text-muted d-block">• <code>prefix_format</code>: Pola awalan nomor.
                                Dapat berisi variabel dinamis seperti <code>{tahun}</code>, <code>{bulan}</code>,
                                <code>{tanggal}</code>, <code>{proc}</code>, <code>{spec}</code> atau dari nama parameter
                                header lain (Contoh: <code>{shift}</code>).</small>
                            <small class="text-xxs text-muted d-block">• Contoh Lengkap: <code>is_range:1;
                                    range_source:Jumlah Roll; prefix_format:{tahun}{bulan}{tanggal}-{shift}-</code></small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-top bg-light">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-primary font-weight-bold">8. Cara Menggabungkan Lebih Dari
                                    Satu Konfigurasi</h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Gunakan tanda titik koma (<code>;</code>) untuk
                                menggabungkan dua atau lebih pengaturan source data.</p>
                            <code class="d-block p-2 bg-gray-200 rounded text-primary border border-primary mb-2">config1;
                                config2; config3</code>
                            <small class="text-xxs text-muted mt-1 d-block">• Contoh untuk Tipe Input Number:
                                <code>format:2; min:0; max:100</code></small>
                            <small class="text-xxs text-muted d-block">• Contoh hasil API:
                                <code>from_api:zfmaterialroll; format:2</code></small>
                        </div>

                        <div class="list-group-item px-0 py-3 border-0">
                            <div class="d-flex w-100 justify-content-between mb-1">
                                <h6 class="mb-1 text-sm text-dark font-weight-bold">9. Sub Header (Nama Card / Grup Utama)
                                </h6>
                            </div>
                            <p class="text-xs text-secondary mb-2">Isi kolom <strong>Sub Header</strong> pada tabel
                                Parameter Sebenarnya. Parameter dengan <code>Sub Header</code> yang sama akan dikelompokkan
                                menjadi satu card yang labelnya sesuai nilai Sub Header (misal: Tension, Rider Roll Press).
                            </p>
                            <code class="d-block p-2 bg-gray-100 rounded text-info border mb-2">Sub Header: Tension</code>
                            <small class="text-xxs text-muted mt-1 d-block">• Card ditampilkan mengikuti urutan
                                <code>urut</code> di master.</small>
                            <small class="text-xxs text-muted d-block">• Parameter tanpa <code>Sub Header</code> akan
                                ditampilkan sebagai baris biasa (tanpa card).</small>
                            <small class="text-xxs text-muted d-block">• Contoh: Buat 3 parameter dengan <code>Sub
                                    Header</code> = <strong>Tension</strong>: Tension Settings, Tension High, Tension
                                Low.</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-sm btn-secondary w-100 mb-0"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {});
    </script>
@endpush