@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">Edit Kerangka Kerja</h5>
        </div>
        
        <div class="card-body">
            <form id="updateFrameworkForm" action="{{ route('framework.update', $framework->id) }}" method="POST" >
                @csrf
                @method('PUT')
                
                <h6 class="mb-3">Informasi Kerangka Kerja</h6>
                <div class="row">
                    <div class="col-md-3 mb-4 form-control-validation">
                        <label class="form-label" for="update-framework-nama">Nama Kerangka Kerja<span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('nama') is-invalid @enderror" id="update" name="nama" placeholder="Cth: Tabel Pertanian" value="{{ old('nama', $framework->nama) }}" />
                        @error('nama')<div class="error invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-3 mb-4 form-control-validation">
                        <label class="form-label" for="update-framework-tahun">Tahun Implementasi<span class="text-danger">*</span></label>
                        <input type="number" step="1" min="2026" class="form-control @error('tahun') is-invalid @enderror" id="update-framework-tahun" name="tahun" placeholder="Cth: 2023" value="{{ old('tahun', $framework->tahun) ?? now()->year }}" />
                        @error('tahun')<div class="error invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="update-framework-program">Untuk Program</label>
                        <select class="form-select @error('program_id') is-invalid @enderror" id="update-framework-program" name="program_id">
                            <option value="">--- Pilih Program ---</option>
                            @foreach ($program as $prg)
                                <option value="{{ $prg->id }}" {{ old('program_id', $framework->program_id) == $prg->id ? 'selected' : '' }}>{{ $prg->nama }}</option>
                            @endforeach
                        </select>
                        @error('program_id')<div class="error invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mt-4 text-end">
                    <a href="{{ route('framework.index') }}" class="btn btn-label-secondary me-2">Kembali</a>
                    <button type="submit" class="btn btn-success data-submit">Simpan Kerangka Kerja</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

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

        $('#update-framework-program').select2();

        $('#updateFrameworkForm').validate({
            rules: {
                nama: { required: true },
                tahun: { required: true, number: true },
                program_id: { required: true }
            },
            messages: {
                nama: { required: "Nama kerangka kerja wajib diisi" },
                tahun: { required: "Tahun implementasi wajib diisi", number: "Masukkan nilai yang valid" },
                program_id: { required: "Program wajib dipilih" }
            },
            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