@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 Program Baru</h5>
        </div>
        
        <div class="card-body">
            <form id="addNewProgramForm" action="{{ route('program.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <h6 class="mb-3">Informasi Program</h6>
                <div class="row">
                    <div class="col-md-12 mb-4 form-control-validation">
                        <label class="form-label" for="add-program-nama">Nama Program<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="add-program-nama" name="nama" placeholder="Cth: Program Pertanian" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-program-nama-singkat">Nama Singkat<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="add-program-nama-singkat" name="nama_singkat" placeholder="Cth: PP" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 mb-4 form-control-validation">
                        <label class="form-label" for="add-program-subdomain">Sub Domain<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="add-program-subdomain" name="sub_domain" placeholder="Cth: budi@email.com" />
                    </div>
                    <div class="col-md-3 mb-4 form-control-validation">
                        <label class="form-label" for="add-program-tahun">Tahun<span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="add-program-tahun" name="tahun" placeholder="Cth: 2023" />
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="add-program-instansi">Instansi</label>
                        <input type="text" class="form-control" id="add-program-instansi" name="instansi" placeholder="Cth: Dinas Pertanian" />
                    </div>
                </div>

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

@push('scripts')
<script>
    'use strict';
    $(document).ready(function () {
        $('#addNewProgramForm').validate({
            rules: {
                nama: { required: true },
                sub_domain: { required: true },
                tahun: { required: true },
                nama_singkat: { required: true }
            },
            messages: {
                nama: { required: "Nama program wajib diisi" },
                sub_domain: { required: "Subdomain wajib diisi" },
                tahun: { required: "Tahun wajib diisi" },
                nama_singkat: { required: "Nama singkat 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