@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="addNewDataForm" action="{{ route('tabel.data.store', [$tabel->id, 'program_id' => $program->id]) }}" method="POST" >
                @csrf

                <h6 class="mb-3">Informasi {{ $tabel->label }}</h6>
                <div class="row">
                    @foreach($kolom as $k)
                    <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) }}" />
                        @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) }}</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) }}" 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) }}" 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) }}" />    
                        @elseif($k->tipe == 'datetime') 
                        <input type="datetime-local" 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) }}" />
                        @elseif($k->tipe == 'boolean')
                        <select class="form-select tipe-boolean @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
                            <option value="1" {{ old($k->kolom) == 1 ? 'selected' : '' }}>Ya</option>
                            <option value="0" {{ old($k->kolom) == 0 ? 'selected' : '' }}>Tidak</option>
                        </select>
                        @elseif($k->tipe == 'foreign_key')
                        <select class="form-select tipe-fk @error($k->kolom) is-invalid @enderror" id="add-data-{{ $k->kolom }}" name="{{ $k->kolom }}">
                            @if ($list_relasi->where('kolom_id', $k->id)->first() != null)
                            @foreach($list_relasi->where('kolom_id', $k->id)->first()['options'] as $opsi_relasi)
                            <option value="{{ $opsi_relasi->value }}" {{ old($k->kolom) == $opsi_relasi->value ? 'selected' : '' }}>{{ $opsi_relasi->label }}</option>
                            @endforeach 
                            @endif
                        </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) }}" />  
                        @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 () {
        $('#add-data-program,.tipe-boolean, .tipe-fk').select2();

        $('#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