{{-- @extends('layouts.app') --}}
@extends('layouts.layout_index')
@section('title', 'EndoCapture')

@section('style')
<link rel="stylesheet" href="{{url('')}}/public/accessory/create.css">
@endsection

@section('content')

    <div class="row m-0">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h2 class="text-center">Create Accessory</h2>
                    <form action="{{ url('accessory') }}" method="post">

                        @csrf
                        <div class="row m-0">
                            <div class="col-12">
                                <label>Accessory Name</label>
                                <input type="text" name="accessory_name" class="form-control" value="">
                            </div>
                        </div>

                        <div class="row m-0 mt-4" id="append_pcd">
                        </div>
                        <div class="row m-0">
                            <div class="col-lg-3 mt-3">
                                <button type="button" class="btn btn-primary btn-sm add-pcd">+ Add Procedure</button>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-12">
                                <label>&nbsp;</label>
                                <button type="submit" class="btn btn-success btn-block form-control">บันทึก</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <script>
        var KTBootstrapSelect = function () {

        // Private functions
        var demos = function () {
        // minimum setup
        $('.kt-selectpicker').selectpicker();
        }

        return {
        // public functions
        init: function() {
        demos();
        }
        };
        }();

        jQuery(document).ready(function() {
            KTBootstrapSelect.init();
        });
    </script>
    <script>
        $(".add-pcd").click(function(){
            var count = $(".sl_n").length
            var gen = "<div class=\"col-3\">"
                gen+= "<label>Procedure</label>"
                gen+= "<select name='accessory_procedure[]' id='' class='form-control sl_n' onchange='test(this,"+count+")'>"
                gen+= "<option value=\"\">เลือก Procedure</option>"
                @foreach ($tb_procedure as $pd)
                gen+= "<option value=\"{{$pd->procedure_code}}\">{{$pd->procedure_name}}</option>"
                @endforeach
                gen+= "</select>"
                gen+= "</div>"
                gen+= "<div class=\"col-lg-3\">"
                gen+= "<label>Company</label>"
                gen+= "<select name='' id='' class=\"form-control\">"
                gen+= "<option value=''>เลือกบริษัท</option>"
                @foreach ($accessory_com as $acc)
                gen+= "<option value=\"{{$acc->accessorycom_id}}\">{{$acc->accessorycom_name}}</option>"
                @endforeach
                gen+= "</select>"
                gen+= "</div>"
                gen+= "<div class='col-lg-6' id='pcd_id"+count+"'>"
                gen+= "</div>"
            $("#append_pcd").append(gen)
        })
        function test(val,sub){
            var x = (val.value || val.options[val.selectedIndex].value);
            $.post("{{url('api/jquery')}}",
            {
                event   : 'change_accessory',
                id      : x,
            },
            function(data,status){
                var json_data = JSON.parse(data)
                var gen_select = "";
                    gen_select+= "<div class='row m-0'>"
                    gen_select+= "<div class=\"col-6\">"
                    gen_select+= "<label>ICD9</label>"
                    gen_select+= "<select class='form-control kt-selectpicker' multiple>"
                json_data.forEach(function (e) {
                    gen_select+= "<option value='"+e.proicd9_id+"'>"+e.proicd9_name+"</option>"
                });
                    gen_select+= "</select>"
                    gen_select+= "</div>"
                    gen_select+= "<div class=\"col-6\">"
                    gen_select+= "<label>Cost</label>"
                    gen_select+= "<input type='text' name='accessory_price[]' class='form-control'>"
                    gen_select+= "</div>"
                    gen_select+= "</div>"
                    $("#pcd_id"+sub).html(gen_select)
                    KTBootstrapSelect.init();
            });
            // alert(this.value)
        }

    </script>
@endsection