@extends('layouts.index')
@section('title')
    Edit 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">
                            Edit
                        </li>

                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Edit Program</h1>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Bread crumb and right sidebar toggle -->
    <!-- ============================================================== -->
    <!-- ============================================================= -->
    <div class="container-fluid">
        <!-- ============================================================= -->
        <!-- Start Page Content -->
        <!-- ============================================================= -->

        <form method="POST" action="{{ route('program.update', $program->id) }}" id="editForm"
            enctype="multipart/form-data">
            @csrf
            @method('put')
            <div class="row">

                <section id="tabs">
                    <div class="card">
                        <div class="card-body">
                            <!-- Nav tabs -->
                            <div class="d-flex">
                                <h4>Edit Program</h4>
                            </div>
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="p-3">


                                    <div class="col-12 col-md-12 mb-2">
                                        <div class="col-12 col-sm-12">
                                            <h5 class="mt-2 mb-1 mt-sm-0"></h5>
                                            <div class="row">
                                                <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="edit_program_type" class="form-select"
                                                                    onchange="programType(this.value)">
                                                                    <option value="">-Choose Program Type-</option>
                                                                    <option value="initiation" {{ $program->program_type == 'initiation' ? 'selected' : '' }}>Initiation</option>
                                                                    <option value="formulation" {{ $program->program_type == 'formulation' ? 'selected' : '' }}>Formulation</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_program_type" class="error" style="display: none;"></label>
                                                    </div>
                                                </div>
                                                <div class="row" id="initiationWrap" @if($program->program_type == 'initiation') style="display: flex;" @else style="display: none;" @endif>
                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Program Name</label>
                                                                <input type="text" id="edit_name_initiation" name="edit_name_initiation"
                                                                    value="{{ $program->name }}" class="form-control"
                                                                    placeholder="Program Name">
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_ref_kategori_program_id_initiation"
                                                                    class="form-select">
                                                                    <option value="">Choose Category</option>
                                                                    @foreach ($ref_kategori_program as $data)
                                                                        <option value="{{ $data->id }}"
                                                                            {{ $data->id == $program->ref_kategori_program_id ? 'selected' : '' }}>
                                                                            {{ $data->nama }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <input type="date" id="edit_start_date_initiation"
                                                                    name="edit_start_date_initiation"
                                                                    value="{{ $program->start_date }}"
                                                                    class="form-control " placeholder="Start Date">
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <input type="date" id="edit_end_date_initiation"
                                                                    name="edit_end_date_initiation" value="{{ $program->end_date }}"
                                                                    class="form-control " placeholder="End Date">
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <textarea name="edit_description_initiation" id="edit_description_initiation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Description">{{ $program->description }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_sustainability_impact_focus_initiation" id="edit_sustainability_impact_focus_initiation" class="form-control"
                                                                    cols="30" rows="5" placeholder="Sustainability Impact Focus">{{ $program->sustainability_impact_focus }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_support_needed_initiation" id="edit_support_needed_initiation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Support Needed">{{ $program->support_needed }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_funding_models_initiation" id="edit_funding_models_initiation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Funding Model">{{ $program->funding_models }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_stakholders_initiation" id="edit_stakholders_initiation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Program Stakeholders">{{ $program->stakholders }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_risk_management_initiation" id="edit_risk_management_initiation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Risk Management">{{ $program->risk_management }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_further_exploration_for_discussion_initiation" id="edit_further_exploration_for_discussion_initiation"
                                                                    class="form-control" cols="30" rows="5" placeholder="Further Exploration For Discussion">{{ $program->further_exploration_for_discussion }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_decision_making_initiation" id="edit_decision_making_initiation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Decision Making">{{ $program->decision_making }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_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->id == $program->ref_program_partner_id ? 'selected' : '' }}>
                                                                            {{ $data->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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>Team</label>
                                                                <select name="edit_team_id_initiation[]"
                                                                    class="select2 form-control custom-select"
                                                                    id="edit_team_id_initiation" 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_edit_team_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</label>
                                                                <select name="edit_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->id == $program->unit_lead ? 'selected' : '' }}>
                                                                            {{ $data->nama }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_person_in_charge_initiation" class="form-select">
                                                                    <option value="">Choose Person In Charge</option>
                                                                    @foreach ($pegawai as $data)
                                                                        <option value="{{ $data->id }}"
                                                                            {{ $data->id == $program->person_in_charge ? 'selected' : '' }}>
                                                                            {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_person_in_charge_initiation" class="error"
                                                            style="display: none;"></label>
                                                    </div>


                                                    <div class="col-md-4 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Proposed</label>
                                                                <select name="edit_proposed_by_initiation" id="proposed_initiation"
                                                                    class="form-select">
                                                                    <option value="">-Choose Proposed-</option>
                                                                    <@foreach ($pegawai as $data)
                                                                        <option value="{{ $data->id }}"
                                                                            {{ $data->id == $program->proposed_by ? 'selected' : '' }}>
                                                                            {{ $data->nama_lengkap }}</option>
                                                                        @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_acknowledged_by_initiation"
                                                                    id="edit_acknowledged_by_initiation" class="form-select">
                                                                    <option value="">-Choose Acknowledged By-
                                                                    </option>
                                                                    @foreach ($pegawai as $data)
                                                                        <option value="{{ $data->id }}"
                                                                            {{ $data->id == $program->acknowledge_by ? 'selected' : '' }}>
                                                                            {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_approved_by_initiation" id="edit_approved_by_initiation"
                                                                    class="form-select">
                                                                    <option value="">-Choose Approved By-</option>
                                                                    @foreach ($pegawai as $data)
                                                                        <option value="{{ $data->id }}"
                                                                            {{ $data->id == $program->approved_by ? 'selected' : '' }}>
                                                                            {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_approved_by_initiation" class="error"
                                                            style="display: none;"></label>
                                                    </div>

                                                </div>
                                                <div class="row" id="formulationWrap" @if($program->program_type == 'formulation') style="display: flex;" @else style="display: none;" @endif>
                                                    <div class="col-md-6 mt-3">
                                                        <div class="form-group">
                                                            <div class="controls">
                                                                <label>Program Name</label>
                                                                <input type="text" id="edit_name_formulation" name="edit_name_formulation" value="{{ $program->name }}" placeholder="Program Name"
                                                                    class="form-control">
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_ref_program_client_formulation" class="form-select">
                                                                    <option value="">-Choose Client-</option>
                                                                    @foreach ($ref_program_client as $data)
                                                                        <option value="{{ $data->id }}" {{ $data->id == $program->ref_program_client ? 'selected' : '' }}>
                                                                            {{ $data->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <input type="date" id="edit_start_date_formulation"
                                                                    name="edit_start_date_formulation"
                                                                    value="{{ $program->start_date }}"
                                                                    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</label>
                                                                <input type="date" id="edit_end_date_formulation"
                                                                    name="edit_end_date_formulation" value="{{ $program->end_date }}"
                                                                    class="form-control " placeholder="End Date">
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <textarea name="edit_description_formulation" class="form-control" cols="30" rows="5" placeholder="Program Brief Description">{{ $program->description }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_timeline_and_total_commited_dates_formulation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Timeline & Total Commited Dates">{{ $program->timeline_and_total_commited_dates }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_financial_scheme_formulation" id="edit_financial_scheme_formulation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Financial Scheme">{{ $program->financial_scheme }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_value_considerations_formulation" id="edit_value_considerations_formulation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Value Considerations">{{ $program->value_considerations }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_resource_allocation_formulation" id="edit_resource_allocation_formulation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Resource Allocation">{{ $program->resource_allocation }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_sustainability_impact_focus_formulation" id="edit_sustainability_impact_focus_formulation" class="form-control" cols="30"
                                                                    rows="5" placeholder="Sustainability Impact Focus">{{ $program->sustainability_impact_focus }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_risk_management_formulation" id="edit_risk_management_formulation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Risk Management">{{ $program->risk_management }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_supporting_documents_formulation" id="edit_supporting_documents_formulation" class="form-control" cols="30" rows="5"
                                                                    placeholder="Supporting Document">{{ $program->risk_management }}</textarea>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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="edit_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->id == $program->ref_program_partner_id ? 'selected' : '' }}>
                                                                            {{ $data->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_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->id == $program->unit_lead ? 'selected' : '' }}>
                                                                            {{ $data->nama }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_person_in_charge_formulation" class="form-select">
                                                                    <option value="">Choose Person In Charge</option>
                                                                    @foreach ($pegawai as $data)
                                                                        <option value="{{ $data->id }}" {{ $data->id == $program->person_in_charge ? 'selected' : '' }}>
                                                                            {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_team_id_formulation[]" id="edit_team_id_formulation" 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_edit_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</label>
                                                                <select name="edit_proposed_by_formulation" id="edit_proposed_by_formulation"
                                                                    class="form-select">
                                                                    <option value="">-Choose Proposed-</option>
                                                                    @foreach ($pegawai as $data)
                                                                        <option value="{{ $data->id }}" {{ $data->id == $program->proposed_by ? 'selected' : '' }}>
                                                                            {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_acknowledge_by_formulation" id="edit_acknowledge_by_formulation"
                                                                    class="form-select">
                                                                    <option value="">-Choose Acknowledged By-
                                                                    </option>
                                                                    @foreach ($pegawai as $data)
                                                                    <option value="{{ $data->id }}" {{ $data->id == $program->acknowledge_by ? 'selected' : '' }}>
                                                                        {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_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</label>
                                                                <select name="edit_approved_by_formulation" id="edit_approved_by_formulation"
                                                                    class="form-select">
                                                                    <option value="">-Choose Approved By-</option>
                                                                    @foreach ($pegawai as $data)
                                                                    <option value="{{ $data->id }}" {{ $data->id == $program->approved_by ? 'selected' : '' }}>
                                                                        {{ $data->nama_lengkap }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <label id="error_edit_approved_by_formulation" class="error"
                                                            style="display: none;"></label>
                                                    </div>
                                                </div>
                                            </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>

                            @forelse($program->budget as $key => $data)
                            <input type="hidden" name="edit_budget_id[]" value="{{ $data->id }}">
                            <div class="row removeclass{{ $key }}">
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="edit_description_budget[]" value="{{ $data->description }}"
                                            placeholder="Description" />
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="number" class="form-control" name="edit_volume[]" onkeyup="convertToUsdVolume(this.value, '{{ $key }}')" id="volume{{ $key }}" value="{{ $data->volume }}"
                                            placeholder="Volume" />
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="number" class="form-control" name="edit_unit_cost[]" onkeyup="convertToUsd(this.value, '{{ $key }}')" id="unitCost{{ $key }}" value="{{ $data->unit_cost }}"
                                            placeholder="Unit Cost" />
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="edit_total_idr[]" id="totalIdr{{ $key }}" value="{{ $data->total_idr }}"
                                            placeholder="Total Amount (IDR)" readonly />
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="edit_total_usd[]" id="usdValue{{ $key }}" value="{{ $data->total_usd }}"
                                            placeholder="Total Amount (USD)" readonly />
                                    </div>
                                </div>
                                @if ($key == 0 && $program->budget->count() > 1)
                                    <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({{ $key }}, {{ $data->id }});"> <i
                                                    class="ri-delete-bin-line fs-5"></i> </button> </div>
                                    </div>
                                @else
                                    <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>
                                @endif
                            </div>
                            @empty
                            <div class="row removeclass0">
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="edit_description_budget[]"
                                            placeholder="Description" />
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="number" class="form-control" id="volume0" name="edit_volume[]"
                                            placeholder="Volume" onkeyup="convertToUsdVolume(this.value, '0')" />
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="number" class="form-control" id="unitCost0" name="edit_unit_cost[]"
                                            placeholder="Unit Cost" onkeyup="convertToUsd(this.value, '0')"/>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" id="totalIdr0" name="edit_total_idr[]"
                                            placeholder="Total Amount (IDR)" readonly />
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" name="edit_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>
                            @endforelse
                        </div>
                    </div>

                </section>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                    <a href="{{ route('program.show', $program->id) }}" 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>
        $('#editForm').on('submit', function (event) {
        event.preventDefault();
        $.ajax({
            url: "{{ route('program.update', '') }}/{{ $program->id }}",
            method: "POST",
            data: new FormData(this),
            contentType: false,
            processData: false,
            success: function (result) {
                console.log(result);
                if (result.success == false) {
                    $("label.error").css("display", "none");
                    $("input.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 changed successfully',
                    }).then(function () {
                        location.reload();

                    });
                }
            }
        });
    });
    </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" name="edit_description_budget[]" placeholder="Description"></div></div><div class="col-sm-2"> <div class="mb-3"> <input type="number" class="form-control" id="volume' + room  + '" name="edit_volume[]" onkeyup="convertToUsdVolume(this.value,`' + room + '`)" placeholder="Volume"> </div></div><div class="col-sm-2"> <div class="mb-3"> <input type="number" class="form-control"" name="edit_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" name="edit_total_idr[]" id="totalIdr' + room + '" placeholder="Total Amount (IDR)" readonly> </div></div><div class="col-sm-3"> <div class="mb-3"> <input class="form-control" name="edit_total_usd[]" id="usdValue' + room + '" placeholder="Total Amount (USD)" readonly> </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, hapus_id) {
            if(hapus_id != "") {
                $(".removeclass" + rid).remove();
                $("#updateForm").append('<input type="hidden" name="hapus_id_budget[]" value="' + hapus_id + '" />');
            } else {
                $(".removeclass" + rid).remove();
            }
        }
    </script>

    <script>
         $.ajax({
            url: "{{ route('program.get-team') }}",
            method: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                program_id: "{{ $program->id }}"
            },
            success: function(data) {
                @if($program->program_type == "initiation")
                    $('#edit_team_id_initiation').val(data['team_id']).trigger('change');
                @else 
                    $('#edit_team_id_formulation').val(data['team_id']).trigger('change');
                @endif
            }
        });
    </script>
@endsection