@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 add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" {{ $parameter_sets->isEmpty() ? 'disabled' : '' }}
                                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">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            <div class="alert alert-info text-white text-sm" role="alert">
                                Komponen yang dibuat di sini menjadi struktur global Parameter Set. Pengaitan ke gedung,
                                line, item, atau profil dilakukan melalui menu Profil Parameter.
                            </div>
                            @if ($parameter_sets->isEmpty())
                                <div class="alert alert-warning text-white text-sm" role="alert">
                                    Semua Parameter Set aktif sudah memiliki struktur. Gunakan menu Edit Komponen pada
                                    daftar untuk mengubahnya, atau buat Parameter Set baru terlebih dahulu.
                                </div>
                            @endif

                            <div class="row">
                                <div class="col-md-12 mb-4">
                                    <label for="parameter_set_id" class="form-label font-weight-bold">Parameter Set</label>
                                    <select class="form-control" id="parameter_set_id" name="parameter_set_id" required>
                                        <option value="">Pilih Parameter Set</option>
                                        @foreach ($parameter_sets as $set)
                                            <option value="{{ $set->id }}" {{ old('parameter_set_id', request('parameter_set_id')) == $set->id ? 'selected' : '' }}>{{ $set->nama_parameter_set }}</option>
                                        @endforeach
                                    </select>
                                </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: #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
                                                        <span class="text-danger">*</span></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>
                                                <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="">
                                                        <input type="hidden" name="sub_header[]" value="">
                                                        <input type="text" class="form-control form-control-sm"
                                                            name="nama_parameter[]" placeholder="Contoh: Shift, Operator"
                                                            list="nama_parameter_list" autocomplete="off">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control form-control-sm"
                                                            name="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 }}">{{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control form-control-sm js-source-data"
                                                            name="source_data[]"
                                                            placeholder="table:tbl_name:... atau enum:..."
                                                            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>
                                            </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
                                                        <span class="text-danger">*</span></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>
                                                <tr class="parameter-row">
                                                    <td>
                                                        <input type="hidden" name="is_header[]" value="0">
                                                        <input type="text" class="form-control form-control-sm"
                                                            name="nama_parameter[]" placeholder="Masukkan Nama Parameter"
                                                            list="nama_parameter_list" autocomplete="off">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control form-control-sm"
                                                            name="urut[]" placeholder="1, 2, 3" autocomplete="off">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control form-control-sm"
                                                            name="unit_parameter[]" 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 }}">{{ $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 }}">{{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control form-control-sm"
                                                            name="sub_header[]" placeholder="Contoh: Tension"
                                                            autocomplete="off">
                                                    </td>
                                                    <td>
                                                        <input type="text" class="form-control form-control-sm js-source-data"
                                                            name="source_data[]"
                                                            placeholder="table:tbl_name:... atau enum:..."
                                                            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>
                                            </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>
                        </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