<div class="mb-1 pt-2 text-right btn-groups">
    <div class="btn-group" id="item-btn-group">
        <button type="button" class="btn btn-sm btn-primary contactus-custom-act save-button" data-value="save" {{ $formA['FormVars']['Hidden']['SaveButton'] }}>
            {{ $formA['FormVars']['Title']['SaveButton'] }}
        </button>
        @include('front.dabory.erp.partial.select-btn-options', [
            'selectBtns' => $formA['SelectButtonOptions'],
            'eventClassName' => 'contactus-custom-act',
        ])
    </div>
</div>

<div class="card p-2" id="contactus-custom-form">
    <button type="button" id="modal-media-btn" hidden
            class="btn btn-success btn-open-modal">
    </button>
    <div class="card-header" id="frm">
        <input type="hidden" id="Id" name="Id" value="0">
        <div class="row">
            <div class="col-12 card-header-item">
                <div class="card card card-info mb-3 mb-md-2 mb-lg-0 border-light">
{{--                    <div class="card-header p-0 mb-2">--}}
{{--                        <p class="card-title p-1 ml-2">{{ $formA['FormVars']['Title']['CardTitle1'] }}</p>--}}
{{--                    </div>--}}
                    <div class="card-body">
                        <div class="form-group {{ $formA['FormVars']['Display']['Status'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Status'] }}</label>
                            <select class="w-100 rounded" id="status-select">
                                <option value="상담접수">상담접수</option>
                                <option value="상담완료">상담완료</option>
                            </select>
                        </div>
                        <div class="form-group {{ $formA['FormVars']['Display']['Pc1'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pc1'] }}</label>
                            <input type="text" id="pc1-txt" class="rounded w-100" autocomplete="off"
                                   maxlength="{{ $formA['FormVars']['MaxLength']['Pc1'] }}"
                                {{ $formA['FormVars']['Required']['Pc1'] }} readonly>
                        </div>
                        <div class="form-group {{ $formA['FormVars']['Display']['Pc2'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pc2'] }}</label>
                            <input type="text" id="pc2-txt" class="rounded w-100" autocomplete="off"
                                   maxlength="{{ $formA['FormVars']['MaxLength']['Pc2'] }}"
                                {{ $formA['FormVars']['Required']['Pc2'] }} readonly>
                        </div>
                        <div class="form-group {{ $formA['FormVars']['Display']['Pc3'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pc3'] }}</label>
                            <input type="text" id="pc3-txt" class="rounded w-100" autocomplete="off"
                                   maxlength="{{ $formA['FormVars']['MaxLength']['Pc3'] }}"
                                {{ $formA['FormVars']['Required']['Pc3'] }} readonly>
                        </div>
                        <div class="form-group {{ $formA['FormVars']['Display']['Pc4'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pc4'] }}</label>
                            <input type="text" id="pc4-txt" class="rounded w-100" autocomplete="off"
                                   maxlength="{{ $formA['FormVars']['MaxLength']['Pc4'] }}"
                                {{ $formA['FormVars']['Required']['Pc3'] }} readonly>
                        </div>
                        <div class="form-group {{ $formA['FormVars']['Display']['Pc5'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pc5'] }}</label>
                            <input type="text" id="pc5-txt" class="rounded w-100" autocomplete="off"
                                   maxlength="{{ $formA['FormVars']['MaxLength']['Pc5'] }}"
                                {{ $formA['FormVars']['Required']['Pc5'] }} readonly>
                        </div>
                        @php
                            if($formA['FormVars']['Display']['Pc6']){

                            }
                        @endphp
                        <div class="form-group {{ $formA['FormVars']['Display']['Pc6'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pc6'] }}</label>
                            <input type="text" id="pc6-txt" class="rounded w-100" autocomplete="off"
                                   maxlength="{{ $formA['FormVars']['MaxLength']['Pc6'] }}"
                                {{ $formA['FormVars']['Required']['Pc6'] }} readonly>
                        </div>
                        <div class="form-group {{ $formA['FormVars']['Display']['Pt1'] }} flex-column mb-2">
                            <label class="m-0">{{ $formA['FormVars']['Title']['Pt1'] }}</label>
                            <textarea id="pt1-txt" class="rounded w-100" autocomplete="off"
                                    maxlength="{{ $formA['FormVars']['MaxLength']['Pt1'] }}"
                                    {{ $formA['FormVars']['Required']['Pt1'] }} readonly>
                            </textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@once
@push('js')
<script src="{{ csset('/js/modals-controller/a-type/common.js') }}"></script>
    <script>
        $(document).ready(async function() {
            $('.contactus-custom-act').on('click', function () {
                // console.log($(this).data('value'))
                switch( $(this).data('value') ) {
                    case 'save': PopupPopupForm1FormAPostContactusCustomForm.btn_act_save(); break;
                    case 'new': PopupPopupForm1FormAPostContactusCustomForm.btn_act_new(); break;
                    case 'del': Atype.btn_act_del('#contactus-custom-form #frm', function () {
                        $('#modal-select-popup.show').trigger('list.requery')
                        $('#modal-select-popup.show').modal('hide')
                    }, 'PopupPopupForm1FormAPostContactusCustomForm'); break;
                }
            });

        });

        (function( PopupPopupForm1FormAPostContactusCustomForm, $, undefined ) {
            PopupPopupForm1FormAPostContactusCustomForm.formA = {!! json_encode($formA) !!};
            PopupPopupForm1FormAPostContactusCustomForm.mediaModal

                PopupPopupForm1FormAPostContactusCustomForm.delete_media_id = function (media_dom_id) {
                $('#contactus-custom-form').find(media_dom_id).val('')
            }

            PopupPopupForm1FormAPostContactusCustomForm.btn_act_save = function () {
                Atype.btn_act_save('#contactus-custom-form #frm', function () {
                    $('#modal-select-popup.show').trigger('list.requery')
                    $('#modal-select-popup.show').modal('hide')
                }, 'PopupPopupForm1FormAPostContactusCustomForm');
            }

            PopupPopupForm1FormAPostContactusCustomForm.btn_act_new = async function () {
                $('#modal-select-popup.popup-popup-form1-form-a-post-contactus-custom-form .modal-header').removeClass('bg-grey-700 px-0')
                $('#modal-select-popup.popup-popup-form1-form-a-post-contactus-custom-form .modal-body button').removeClass('bg-grey-700 border-grey-700 bg-grey-700-hover')

                $('#modal-select-popup.popup-popup-form1-form-a-post-contactus-custom-form .modal-dialog').css('maxWidth', '800px');

                Atype.set_parameter_callback(PopupPopupForm1FormAPostContactusCustomForm.parameter)
                Atype.btn_act_new('#contactus-custom-form #frm')

                $('#contactus-custom-form').find('#style-option-thm-update-div').hide()
            }

            PopupPopupForm1FormAPostContactusCustomForm.btn_act_new_callback = function () {
                PopupPopupForm1FormAPostContactusCustomForm.btn_act_new()
            }

            PopupPopupForm1FormAPostContactusCustomForm.show_popup_callback = async function (id) {
                PopupPopupForm1FormAPostContactusCustomForm.btn_act_new()
                await PopupPopupForm1FormAPostContactusCustomForm.fetch_contactus_custom(Number(id));
            }

            // 여기
            PopupPopupForm1FormAPostContactusCustomForm.parameter = function () {
                const contactus_custom_form = $('#contactus-custom-form')
                let id = Number( $(contactus_custom_form).find('#Id').val() )
                let parameter = {
                    Id: id,
                    PostTypeId: 58,
                    Pc7: $(contactus_custom_form).find('#status-select').val(),
                }
                if (id < 0) {
                    parameter = { Id: id }
                }
                console.log(parameter)

                return parameter;
            }

            PopupPopupForm1FormAPostContactusCustomForm.fetch_contactus_custom = async function (id) {
                const response = await get_api_data(PopupPopupForm1FormAPostContactusCustomForm.formA['General']['PickApi'], {
                    Page: [ { Id: id } ]
                })

                PopupPopupForm1FormAPostContactusCustomForm.set_contactus_custom_ui(response)
            }

            PopupPopupForm1FormAPostContactusCustomForm.set_contactus_custom_ui = async function (response) {
                if (isEmpty(response.data) || response.data.apiStatus) {
                    return;
                }

                const contactus_custom = response.data.Page[0];
                const contactus_custom_form = $('#contactus-custom-form')
                // console.log('contactus_custom : ', contactus_custom)

                $(contactus_custom_form).find('#Id').val(contactus_custom.Id)
                $(contactus_custom_form).find('#status-select').val(contactus_custom.Pc7)
                $(contactus_custom_form).find('#pc1-txt').val(contactus_custom.Pc1)
                $(contactus_custom_form).find('#pc2-txt').val(contactus_custom.Pc2)
                $(contactus_custom_form).find('#pc3-txt').val(contactus_custom.Pc3)
                $(contactus_custom_form).find('#pc4-txt').val(contactus_custom.Pc4)
                $(contactus_custom_form).find('#pc5-txt').val(contactus_custom.Pc5)
                $(contactus_custom_form).find('#pc6-txt').val(contactus_custom.Pc6)
                $(contactus_custom_form).find('#pt1-txt').val(contactus_custom.Pt1)
            }

        }( window.PopupPopupForm1FormAPostContactusCustomForm = window.PopupPopupForm1FormAPostContactusCustomForm || {}, jQuery ));
    </script>
@endpush
@endonce
