@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header border-bottom mb-4">
            <h5 class="card-title mb-0">Tambah Data {{ $tabel->label }}</h5>
        </div>
        
        <div class="card-body">
            <form id="addUpdateDataForm" action="{{ route('tabel.data.update', [$tabel->id, $value_id, 'program_id' => $program->id]) }}" method="POST" >
                @csrf
                @method('PUT')

                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
                @if (!$program)
                <div class="row">
                    <div class="col-md-3 mb-4 form-control-validation">
                        <label class="form-label" for="add-data-program">Program<span class="text-danger">*</span></label>
                        <select name="program_id" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                            <option value="">Pilih Program</option>
                            @foreach($programList as $prog)
                                <option value="{{ $prog->id }}" {{ request('program_id') == $prog->id ? 'selected' : '' }}>{{ $prog->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @endif
                <div class="row">
                    @foreach($kolom as $k)
                    <?php 
                        $value = $values->where('kolom_id', $k->id)->first();
                    ?> 
                    <div class="col-md-3 mb-4 form-control-validation">
                        <label class="form-label" for="add-data-{{ $k->kolom }}">{{ $k->label }}<span class="text-danger">*</span></label>
                        @if($k->tipe == 'varchar')
                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
                        @elseif($k->tipe == 'text')
                        <textarea class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}">{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}</textarea>
                        @elseif($k->tipe == 'integer')
                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="1" />
                        @elseif($k->tipe == 'float')
                        <input type="number" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" step="any"  />
                        @elseif($k->tipe == 'date')
                        <input type="date" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />    
                        @elseif($k->tipe == 'datetime') 
                        <input type="datetime" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />
                        @elseif($k->tipe == 'boolean')
                        <select class="form-select @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
                            <option value="1" {{ (old($k->kolom) ?? ($value['value_'.$k->tipe] ?? null)) == 1 ? 'selected' : '' }}>Ya</option>
                            <option value="0" {{ (old($k->kolom) ?? ($value['value_'.$k->tipe] ?? null)) == 0 ? 'selected' : '' }}>Tidak</option>
                        </select>
                        @else
                        <input type="text" class="form-control @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" 
                            name="{{ $k->kolom }}" placeholder="Cth: {{ $k->label }}" value="{{ old($k->kolom) ?? $value['value_'.$k->tipe] }}" />  
                        @endif
                        @error($k->kolom)<div class="error invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    @endforeach
                </div>
                    

                <div class="mt-4 text-end">
                    <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
                    <button type="submit" class="btn btn-success data-submit">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    'use strict';
    $(document).ready(function () {

        $('#addNewDataForm').validate({
            rules: {
                tabel: { required: true, snakecase: true },
                label: { required: true },
                menu: { required: true }
            },
            messages: {
                tabel: { required: "Nama tabel wajib diisi", snakecase: "Gunakan format snake_case (huruf kecil dan underscore)" },
                label: { required: "Label wajib diisi" },
                menu: { required: "Judul menu wajib diisi" }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-6, .form-control-validation').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>
@endpush