@extends('layouts.index')
@section('title')
Add Program
@endsection
@section('css')
<link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/jquery-steps/jquery.steps.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/jquery-steps/steps.css" rel="stylesheet" />
<link href="{{ asset('back') }}/libs/select2/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .l2 {
        padding-left: 1em;
    }

    .l3 {
        padding-left: 2em;
    }

    label.error {
        color: #F94687;
        font-size: 13px;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 5px;
        padding: 0;
    }

    input.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    select.error {
        color: #F94687;
        border: 1px solid #F94687;
    }

    .colored-toast.swal2-icon-success {
        background-color: #a5dc86 !important;
    }

    .colored-toast.swal2-icon-error {
        background-color: #f27474 !important;
    }

    .colored-toast.swal2-icon-warning {
        background-color: #f8bb86 !important;
    }

    .colored-toast.swal2-icon-info {
        background-color: #3fc3ee !important;
    }

    .colored-toast.swal2-icon-question {
        background-color: #87adbd !important;
    }

    .colored-toast .swal2-title {
        color: white;
    }

    .colored-toast .swal2-close {
        color: white;
    }

    .colored-toast .swal2-html-container {
        color: white;
    }
</style>
@endsection
@section('content')
<div class="page-titles">
    <div class="row">
        <div class="col-lg-8 col-md-6 col-12 align-self-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 d-flex align-items-center">
                    <li class="breadcrumb-item">
                        <a href="index.html" class="link"><i class="ri-home-3-line fs-5"></i></a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a href="{{ route('program.index') }}">Program</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Add
                    </li>

                </ol>
            </nav>
            <h1 class="mb-0 fw-bold">Add Program</h1>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================= -->
<div class="container-fluid">
    <!-- ============================================================= -->
    <!-- Start Page Content -->
    <!-- ============================================================= -->
    <form method="POST" enctype="multipart/form-data" id="createForm">
        @csrf

        <input type="hidden" name="validate_jquery" id="validate-jquery">

        <div class="row">

            <section id="tabs">
                <div class="card">
                    <div class="card-body">
                        <!-- Nav tabs -->
                        <div class="d-flex">
                            <h4>Add Program</h4>
                        </div>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="">
                                <div class="col-12 col-sm-12 mb-2">
                                    <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                    <div class="row">
                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Type <span class="text-danger">*</span></label>
                                                    <select name="program_type" class="form-select"
                                                        onchange="programType(this.value)">
                                                        <option value="">-Choose Program Type-</option>
                                                        <option value="initiation">Initiation</option>
                                                        <option value="formulation">Formulation</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_program_type" class="error" style="display: none;"></label>
                                        </div>
                                    </div>
                                    <div class="row" id="initiationWrap" style="display: none;">
                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Name <span class="text-danger">*</span></label>
                                                    <input type="text" id="name_initiation" name="name_initiation"
                                                        value="{{ old('name_initiation') }}" class="form-control"
                                                        placeholder="Program Name">
                                                </div>
                                            </div>
                                            <label id="error_name_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Category <span class="text-danger">*</span></label>
                                                    <select name="ref_kategori_program_id_initiation" class="form-select">
                                                        <option value="">Choose Category</option>
                                                        @foreach ($ref_kategori_program as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_ref_kategori_program_id_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Start Date <span class="text-danger">*</span></label>
                                                    <input type="date" id="start_date_initiation" name="start_date_initiation"
                                                        value="{{ old('start_date_initiation') }}" class="form-control "
                                                        placeholder="Start Date">
                                                </div>
                                            </div>
                                            <label id="error_start_date_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>End Date <span class="text-danger">*</span></label>
                                                    <input type="date" id="end_date_initiation" name="end_date_initiation"
                                                        value="{{ old('end_date_initiation') }}" class="form-control "
                                                        placeholder="End Date">
                                                </div>
                                            </div>
                                            <label id="error_end_date_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Description <span class="text-danger">*</span></label>
                                                    <textarea name="description_initiation" id="description_initiation" class="form-control" cols="30" rows="5"
                                                        placeholder="Description"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_description_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Sustainability
                                                        Impact Focus </label>
                                                    <textarea name="sustainability_impact_focus_initiation" id="sustainability_impact_focus_initiation" class="form-control" cols="30"
                                                        rows="5" placeholder="Sustainability Impact Focus"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_sustainability_impact_focus_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Support Needed
                                                    </label>
                                                    <textarea name="support_needed_initiation" id="support_needed_initiation" class="form-control" cols="30" rows="5"
                                                        placeholder="Support Needed"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_support_needed_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Funding
                                                        Model</label>
                                                    <textarea name="funding_models_initiation" id="funding_models_initiation" class="form-control" cols="30" rows="5"
                                                        placeholder="Funding Model"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_funding_models_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Program
                                                        Stakeholders</label>
                                                    <textarea name="stakholders_initiation" id="stakholders_initiation" class="form-control" cols="30" rows="5"
                                                        placeholder="Program Stakeholders"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_stakholders_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Risk
                                                        Management</label>
                                                    <textarea name="risk_management_initiation" id="risk_management_initiation" class="form-control" cols="30" rows="5"
                                                        placeholder="Risk Management"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_risk_management_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Further
                                                        Exploration For Discussion</label>
                                                    <textarea name="further_exploration_for_discussion_initiation" id="further_exploration_for_discussion_initiation" class="form-control"
                                                        cols="30" rows="5" placeholder="Further Exploration For Discussion"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_further_exploration_for_discussion_initiation"
                                                class="error" style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Decision
                                                        Making</label>
                                                    <textarea name="decision_making_initiation" id="decision_making_initiation" class="form-control" cols="30" rows="5"
                                                        placeholder="Decision Making"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_decision_making_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Partner <span class="text-danger">*</span></label>
                                                    <select name="ref_program_partner_id_initiation" class="form-select">
                                                        <option value="">Choose Program Partner</option>
                                                        @foreach ($ref_program_partner as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_ref_program_partner_id_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Unit Lead <span class="text-danger">*</span></label>
                                                    <select name="unit_lead_id_initiation" class="form-select">
                                                        <option value="">Choose Program Unit Lead
                                                        </option>
                                                        @foreach ($ref_unit_kerja as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_unit_lead_id_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>
                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Person In Charge <span class="text-danger">*</span></label>
                                                    <select name="person_in_charge_initiation" class="form-select">
                                                        <option value="">Choose Person In Charge</option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_person_in_charge_initiation" class="error"
                                            style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Team <span class="text-danger">*</span></label>
                                                    <select name="team_id_initiation[]" id=""
                                                        class="select2 form-control custom-select"
                                                        style="width: 100%; height: 36px" multiple>
                                                        <option value="">-- Choose Team --</option>
                                                        @foreach ($pegawai as $item)
                                                            <option value="{{ $item->id }}">
                                                                {{ $item->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_team_id_initiation" class="error"
                                            style="display: none;"></label>
                                        </div>


                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Proposed <span class="text-danger">*</span></label>
                                                    <select name="proposed_by_initiation" id="proposed"
                                                        class="form-select">
                                                        <option value="">-Choose Proposed-</option>
                                                        <@foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                            @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_proposed_by_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Acknowledged By <span class="text-danger">*</span></label>
                                                    <select name="acknowledged_by_initiation" id="acknowledged_by_initiation"
                                                        class="form-select">
                                                        <option value="">-Choose Acknowledged By-
                                                        </option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_acknowledged_by_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Approved By <span class="text-danger">*</span></label>
                                                    <select name="approved_by_initiation" id="approved_by"
                                                        class="form-select">
                                                        <option value="">-Choose Approved By-</option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_approved_by_initiation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                    </div>
                                    <div class="row" id="formulationWrap" style="display: none;">
                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Name <span class="text-danger">*</span></label>
                                                    <input type="text" id="name_formulation" name="name_formulation"
                                                        value="{{ old('name_formulation') }}" placeholder="Program Name"
                                                        class="form-control">
                                                </div>
                                            </div>
                                            <label id="error_name_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Client Name <span class="text-danger">*</span></label>
                                                    <select name="ref_program_client_formulation" class="form-select">
                                                        <option value="">-Choose Client-</option>
                                                        @foreach ($ref_program_client as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_ref_program_client_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Start Date <span class="text-danger">*</span></label>
                                                    <input type="date" id="start_date_formulation" name="start_date_formulation"
                                                        value="{{ old('start_date_formulation') }}" class="form-control "
                                                        placeholder="Start Date">
                                                </div>
                                            </div>
                                            <label id="error_start_date_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>End Date <span class="text-danger">*</span></label>
                                                    <input type="date" id="end_date_formulation" name="end_date_formulation"
                                                        value="{{ old('end_date_formulation') }}" class="form-control"
                                                        placeholder="End Date">
                                                </div>
                                            </div>
                                            <label id="error_end_date_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Description <span class="text-danger">*</span></label>
                                                    <textarea name="description_formulation" class="form-control" cols="30" rows="5" placeholder="Program Brief Description"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_description_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>
                                        
                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Timeline And Total Commited Dates</label>
                                                    <textarea name="timeline_and_total_commited_dates_formulation" class="form-control" cols="30" rows="5"
                                                        placeholder="Timeline & Total Commited Dates"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_timeline_and_total_commited_dates_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Financial Scheme</label>
                                                    <textarea name="financial_scheme_formulation" id="financial_scheme_formulation" class="form-control" cols="30" rows="5"
                                                        placeholder="Financial Scheme"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_financial_scheme_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Value
                                                        Considerations (Impact) To UID </label>
                                                    <textarea name="value_considerations_formulation" id="value_considerations_formulation" class="form-control" cols="30" rows="5"
                                                        placeholder="Value Considerations"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_value_considerations_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Resource
                                                        Allocation </label>
                                                    <textarea name="resource_allocation_formulation" id="resource_allocation_formulation" class="form-control" cols="30" rows="5"
                                                        placeholder="Resource Allocation"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_resource_allocation_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Sustainability
                                                        Impact Focus</label>
                                                    <textarea name="sustainability_impact_focus_formulation" id="sustainability_impact_focus_formulation" class="form-control" cols="30"
                                                        rows="5" placeholder="Sustainability Impact Focus"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_sustainability_impact_focus_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Risk
                                                        Management</label>
                                                    <textarea name="risk_management_formulation" id="risk_management_formulation" class="form-control" cols="30" rows="5"
                                                        placeholder="Risk Management"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_risk_management_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-12 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label><i class="feather icon-map-pin"></i> Supporting
                                                        Document</label>
                                                    <textarea name="supporting_documents_formulation" id="supporting_documents_formulation" class="form-control" cols="30" rows="5"
                                                        placeholder="Supporting Document"></textarea>
                                                </div>
                                            </div>
                                            <label id="error_supporting_documents_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Partner</label>
                                                    <select name="ref_program_partner_id_formulation" class="form-select">
                                                        <option value="">Choose Program Partner</option>
                                                        @foreach ($ref_program_partner as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_ref_program_partner_id_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Program Unit Lead <span class="text-danger">*</span></label>
                                                    <select name="unit_lead_id_formulation" class="form-select">
                                                        <option value="">Choose Program Unit Lead
                                                        </option>
                                                        @foreach ($ref_unit_kerja as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_unit_lead_id_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Person In Charge <span class="text-danger">*</span></label>
                                                    <select name="person_in_charge_formulation" class="form-select">
                                                        <option value="">Choose Person In Charge</option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_person_in_charge_formulation" class="error"
                                            style="display: none;"></label>
                                        </div>

                                        <div class="col-md-6 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Team <span class="text-danger">*</span></label>
                                                    <select name="team_id_formulation[]" id="" class="select2 form-control custom-select" style="width: 100%; height: 36px" multiple>
                                                        <option value="">-- Choose Team --</option>
                                                        @foreach ($pegawai as $item)
                                                          <option value="{{$item->id}}">{{$item->nama_lengkap}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_team_id_formulation" class="error"
                                            style="display: none;"></label>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Proposed By <span class="text-danger">*</span></label>
                                                    <select name="proposed_by_formulation" id="proposed_by_formulation"
                                                        class="form-select">
                                                        <option value="">-Choose Proposed-</option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_proposed_by_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Acknowledged By <span class="text-danger">*</span></label>
                                                    <select name="acknowledge_by_formulation" id="acknowledge_by_formulation"
                                                        class="form-select">
                                                        <option value="">-Choose Acknowledged By-
                                                        </option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_acknowledge_by_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>

                                        <div class="col-md-4 mt-3">
                                            <div class="form-group">
                                                <div class="controls">
                                                    <label>Approved By <span class="text-danger">*</span></label>
                                                    <select name="approved_by_formulation" id="approved_by_formulation"
                                                        class="form-select">
                                                        <option value="">-Choose Approved By-</option>
                                                        @foreach ($pegawai as $data)
                                                            <option value="{{ $data->id }}">
                                                                {{ $data->nama_lengkap }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <label id="error_approved_by_formulation" class="error"
                                                style="display: none;"></label>
                                        </div>



                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="border-bottom title-part-padding">
                        <h4 class="mb-0">Budgeting</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-2">
                                <h5>Description</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Volume</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Unit Cost</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Total (IDR)</h5>
                            </div>
                            <div class="col-sm-2">
                                <h5>Total (USD)</h5>
                            </div>


                        </div>
                        <div id="education_fields" class=""></div>

                        <div class="row">
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control validate" name="description_budget[]"
                                        placeholder="Description" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="number" class="form-control validate" id="volume0" name="volume[]"
                                        onkeyup="convertToUsdVolume(this.value, '0')" placeholder="Volume" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="number" class="form-control validate" id="unitCost0" name="unit_cost[]"
                                        onkeyup="convertToUsd(this.value, '0')" placeholder="Unit Cost" />
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <input type="text" class="form-control validate" id="totalIdr0" name="total_idr[]"
                                        placeholder="Total Amount (IDR)" readonly />
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="mb-3">
                                    <input type="text" class="form-control validate" name="total_usd[]"
                                        placeholder="Total Amount (USD)" id="usdValue0" readonly />
                                </div>
                            </div>

                            <div class="col-sm-1">
                                <div class="mb-3">
                                    <button onclick="education_fields();" class="
                            btn
                            rounded-pill
                            px-4
                            btn-light-success
                            text-success
                            font-weight-medium
                            waves-effect waves-light
                          " type="button">
                                        <i class="ri-add-circle-line fs-5"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </section>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                <a href="{{ route('program.index') }}" class="btn btn-outline-primary me-md-2">Back</a>
                <button class="btn btn-primary me-md-2" type="submit" id="programSave">Submit</button>
            </div>

        </div>
    </form>

    <!-- ============================================================= -->
    <!-- End PAge Content -->
    <!-- ============================================================= -->
</div>
@endsection
@section('js')
<!--This page plugins -->
<script src="{{ asset('back') }}/extra-libs/datatables.net/js/jquery.dataTables.min.js"></script>
<!-- start - This is for export functionality only -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script src="{{ asset('back') }}/js/pages/datatable/datatable-advanced.init.js"></script>

<script src="{{ asset('back') }}/libs/jquery-steps/build/jquery.steps.min.js"></script>
<script src="{{ asset('back') }}/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.0/additional-methods.js"></script>
<script src="{{ asset('back') }}/libs/select2/dist/js/select2.full.min.js"></script>
<script src="{{ asset('back') }}/libs/select2/dist/js/select2.min.js"></script>
<script src="{{ asset('back') }}/js/pages/forms/select2/select2.init.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!--This page JavaScript -->
<script src="{{ asset('back') }}/libs/jquery.repeater/jquery.repeater.min.js"></script>
<script src="{{ asset('back') }}/extra-libs/jquery.repeater/repeater-init.js"></script>
{{-- <script src="{{ asset('back') }}/extra-libs/jquery.repeater/dff.js"></script> --}}

<script>
    function programType(value) {
        if(value == 'initiation') {
            $("#formulationWrap").css('display', 'none');
            $("#initiationWrap").css('display', 'flex');
        } else if(value == 'formulation') {
            $("#initiationWrap").css('display', 'none');
            $("#formulationWrap").css('display', 'flex');
        } else {
            $("#initiationWrap").css('display', 'none');
            $("#formulationWrap").css('display', 'none');
        }
    }
</script>

<script>
    // function validationDynamic() {
    //     $('.validate').each(function (index, card) {
    //         var this_element = this;
    //         if ($(this_element).val() == '') {
    //             $(this_element).css('border', '1px solid #F94687');
    //             $('#' + index).remove();
    //             $(this).parent().append(
    //                 '<label class="error-validation" style="color: #F94687 !important;margin-top: 10px;font-size: 13px !important;font-weight: 400;line-height: 1.5; margin-top: 5px;padding: 0;" id="' +
    //                 index + '">Kolom ini harus di isi!</label>');

    //         } else {
    //             $(this_element).css('border', '1px solid #ecf0f2');
    //             $('#' + index).css('display', 'none');
    //             $('#' + index).attr('class', 'validated');

    //         }
    //     });

    //     $("#validate-jquery-error").css('display', 'none');

    //     if ($('label').hasClass('error-validation')) {
    //         $("#validate-jquery").val('');
    //     } else {
    //         $("#validate-jquery").val('exist');
    //     }
    // }

    // $("#programSave").click(function () {
    //     $('.validate').each(function (index, card) {
    //         var this_element = this;
    //         if ($(this_element).val() == '' && $(this_element).parents().eq(4).css('display') !=
    //             'none') {
    //             $(this_element).css('border', '1px solid #F94687');
    //             $('#' + index).remove();
    //             $(this).parent().append(
    //                 '<label class="error-validation" style="color: #F94687 !important;margin-top: 10px;font-size: 13px !important;font-weight: 400;line-height: 1.5; margin-top: 5px;padding: 0;" id="' +
    //                 index + '">Field is required!</label>');
    //         } else {
    //             $(this_element).css('border', '1px solid #ecf0f2');
    //             $('#' + index).css('display', 'none');
    //             $('#' + index).attr('class', 'validated');
    //         }
    //     });

    //     $("#validate-jquery-error").css('display', 'none');

    //     if ($('label').hasClass('error-validation')) {
    //         $("#validate-jquery").val('');
    //     } else {
    //         $("#validate-jquery").val('exist');
    //     }
    // })

    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        });

        $.validator.setDefaults({
            ignore: []
        });

        // $("#createForm").validate({
        //     ignore: [],
        //     rules: {
        //         validate_jquery: {
        //             required: true,
        //         }
        //     },
        //     messages: {
        //         validate_jquery: {
        //             required: "fields are required!"
        //         }
        //     }
        // });
    });
</script>
<script>
    function convertToUsdVolume(value, increment) {
        var calculate = value * $("#unitCost" + increment).val();
        $("#totalIdr" + increment).val(calculate);

        $.ajax({
            url: "{{ route('program.convert-to-usd') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                total_money: calculate
            },
            success: function (result) {
                $("#usdValue" + increment).val(result);
            }
        });
    }

    function convertToUsd(value, increment) {
        var calculate = $("#volume" + increment).val() * value;
        $("#totalIdr" + increment).val(calculate);

        $.ajax({
            url: "{{ route('program.convert-to-usd') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                total_money: calculate
            },
            success: function (result) {
                $("#usdValue" + increment).val(result);
            }
        });
    }
</script>

<script>
    var room = 1;

    function education_fields() {
        room++;
        var objTo = document.getElementById("education_fields");
        var divtest = document.createElement("div");
        divtest.setAttribute("class", "mb-3 removeclass" + room);
        var rdiv = "removeclass" + room;
        divtest.innerHTML =
            '<div class="row"><div class="col-sm-2"><div class="mb-3"><input type="text" class="form-control validate" name="description_budget[]" placeholder="Description"></div></div><div class="col-sm-2"> <div class="mb-3"> <input type="number" class="form-control validate" name="volume[]" id="volume' +
            room + '" onkeyup="convertToUsdVolume(this.value, `' + room +
            '`)" placeholder="Volume"> </div></div><div class="col-sm-2"> <div class="mb-3"> <input type="number" class="form-control validate" name="unit_cost[]" id="unitCost' +
            room + '" onkeyup="convertToUsd(this.value, `' + room +
            '`);" placeholder="Unit Cost"> </div></div><div class="col-sm-2"> <div class="mb-3"> <input class="form-control validate" name="total_idr[]" id="totalIdr' +
            room +
            '" placeholder="Total Amount (IDR)"> </div></div><div class="col-sm-3"> <div class="mb-3"> <input class="form-control validate" name="total_usd[]" id="usdValue' +
            room +
            '" placeholder="Total Amount (USD)"> </div></div><div class="col-sm-1"> <div class="mb-3"> <button class="btn rounded-pill px-4 btn-light-danger text-danger font-weight-medium waves-effect waves-light" type="button" onclick="remove_education_fields(' +
            room +
            ');"> <i class="ri-delete-bin-line fs-5"></i> </button> </div></div></div>';

        objTo.appendChild(divtest);
        feather.replace();
    }

    function remove_education_fields(rid) {
        $(".removeclass" + rid).remove();
    }
</script>

<script>
    $('#createForm').on('submit', function (event) {
        event.preventDefault();
        $("#programSave").prop('disabled', true);
        $.ajax({
            url: "{{ route('program.store') }}",
            method: "POST",
            data: new FormData(this),
            contentType: false,
            processData: false,
            success: function (result) {
                if (result.success == false) {
                    $("#programSave").prop('disabled', false);
                    $("label.error").css("display", "none");
                    $("input.error").removeClass("error");
                    $("select.error").removeClass("error");
                    for (const [key, value] of Object.entries(result.errors)) {
                        $("#error_" + key).css("display", "block");
                        $("#error_" + key).html(value[0]);
                        $('[name="' + key + '"]').addClass("error");
                    }
                } else if (result.success == true) {
                    $("#programSave").prop('disabled', true);
                    $("label.error").css("display", "none");
                    $("input.error").removeClass("error");
                    $("select.error").removeClass("error");
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Program has been added successfully',
                    }).then(function () {
                        location.href = "{{ url('program') }}/" + result.program_id;
                    });
                }
            }
        });
    });
</script>
@endsection