@extends('backend.layouts.app')

@section('content')
    <h2 class="title">買取契約【登録】</h2>
    <form action="{{ route('backend.truck.purchase_contract.confirm') }}" method="post">
        @csrf
        @include('backend.truck.purchase_contract._form')
        <input type="hidden" name="action_type" value="store">
        <div class="center-submit triple">
            <input type="button" value="一覧に戻る" onclick='location.href="{{ route("backend.{$department}.purchase_contract.index") }}"'>
            <input type="submit" value="確認">
            <!--input type="button" value="契約書出力"-->
        </div>
    </form>


@endsection

@section('page_css')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendor/datetimepicker/jquery.datetimepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/backend/css/page/pruchase.css') }}" rel="stylesheet">
@endsection

@section('page_js')
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-ui/i18n/datepicker-ja.js') }}"></script>
    <script src="{{ asset('vendor/ajaxupload/jquery.ajaxupload.js') }}"></script>
    <script src="{{ asset('assets/backend/js/page/purchase_contract.js') }}"></script>
    <script>
        $(document).ready(function() {
            var category_node = $('.body_category');
            var mid_category_node = $('.body_mid_category');
            var sub_category_node = $('.body_sub_category');
            for (let i = 0; i < category_node.length; i++) {
                var select_category = $(category_node[i]).val();
                var select_mid_category = $(mid_category_node[i]).val();
                var select_sub_category = $(sub_category_node[i]).val();
                if (select_category ) {
                    setBodySubCategory(select_category, select_mid_category, select_sub_category, $(category_node[i]).data('id'));
                }
            }

            $('.exist_self_propel').change(function() {
                var id = $(this).attr('data-item-id');
                var pro_status = parseInt($(this).val());
                setPropelComment(id, pro_status);
            });

            $('#bank_name_select').change(function() {
                var bank_id = $('#bank_name_select').val();

                if(bank_id){
                    setBankInfo(bank_id);
                }else {
                    $('#branch_name').val("");
                    $('#account_type').val("");
                    $('#account_no').val("");
                    $('#account_name').val("");
                }
            });
        });

        $(document).on('change', '.select-category', function() {
            var id = $(this).data('id');
            setBodySubCategory($(this).val(), '','', id);
        });

        $(document).on('change', '.select-mid-category', function() {
            var id = $(this).data('id');
            setBodySubCategory( $('#body_category'+ id).val(), $(this).val(), '' ,id);
        });

        function setBodySubCategory(category_id, mid_category='',sub_category='', element_id) {
            $.ajax({
                type: "post",
                url: " {{ route('backend.ajax.body_sub_category') }}",
                data: {
                    category_id: category_id,
                    mid_category_id: mid_category,
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(result) {
                    $('#lb_sub_category' + element_id).show();

                    var mid_element_no = "<option value=\"\">選択して下さい</option>";
                    if(Object.keys(result.mid_categories).length> 0) {
                        var mid_categories = result.mid_categories;
                        var mid_element = "";
                        for(var key in mid_categories){
                            mid_element += '<option value="' + key + '">' + mid_categories[key] + '</option>';
                        }
                        $('#body_mid_category' + element_id).html(mid_element_no + mid_element);
                        $('#s_mid_category' + element_id).show();
                        $('#lb_s_sub_category' + element_id).show();
                    } else {
                        $('#body_mid_category' + element_id).html(mid_element_no);
                        $('#s_mid_category' + element_id).hide();
                        $('#lb_s_sub_category' + element_id).hide();
                    }

                    var sub_element_no = "<option value=\"\">選択して下さい</option>";
                    if(result.sub_categories != '') {
                        var sub_categories = result.sub_categories;
                        $('#body_sub_category' + element_id).html(sub_categories);
                        $('#s_sub_category' + element_id).show();
                        if(mid_category!='') {
                            $('#lb_s_sub_category' + element_id).show();
                        }
                    } else {
                        if(mid_category!='') {
                            $('#lb_s_sub_category' + element_id).hide();
                        }
                        $('#body_sub_category' + element_id).html(sub_element_no);
                        $('#s_sub_category' + element_id).hide();
                    }

                    if(mid_category != '') {
                        $('#body_mid_category' + element_id).val(mid_category);
                    }

                    if(sub_category != '') {
                        $('#body_sub_category' + element_id).val(sub_category);
                    }
                },
                error: function(){
                    alert('サブカテゴリは読めません。');
                },

            });
        }

        window.onload = setCategorySelect;

        function  setCategorySelect() {

            var bank_id = $("#bank_name_select").val();

            if(bank_id){
                setBankInfo(bank_id)
            }

            var propel_node = $(".exist_self_propel");

            for (let i = 0; i < propel_node.length; i++) {
                var id = $(propel_node[i]).attr('data-item-id');
                setPropelComment(id, parseInt($(propel_node[i]).val()));
            }
        }

        function setBankInfo(bank_id) {
            $.ajax({
                type: 'post',
                url: "{{ route('backend.truck.purchase_contract.get_bank_info') }}",
                data: {
                    'bank_id':bank_id,
                    _token: '