@extends('user.layouts.app')

@section('title', $f_user->bank ? 'サポート料振込先口座の変更' :  'サポート料振込先口座の登録')

@section('header')
    <p><a href="{{ route('user.my_account.index') }}">＜</a></p>
    <h1 id="title">{{ $f_user->bank ? 'サポート料振込先口座の変更' :  'サポート料振込先口座の登録' }}<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
@endsection

@section('content')
    <main>
        {{ Form::open(["route"=>"user.my_account.bank_transfer_update", 'id'=>'save_bank_form']) }}

        <div id="wrapper" class="contents">
            @include('user.layouts.flash-message')
            <table class="table">
                <tr>
                    <th>銀行名</th>
                    <td>
                        <select name="bank" id="bank">
                            <option value="">--</option>
                            @foreach(\App\Service\BankService::getBanks() as $key => $bank)
                                <option value="{{ $bank['id'] }}" data-bank_code="{{ $bank['bank_code'] }}" {{ $bank['id'] == old('bank', isset($f_user) ? $f_user->bank : null)  ? 'selected' :'' }}>{{ $bank['bank_code'] }} {{ $bank['name'] }}（{{ $bank['name_kana'] }}）</option>
                            @endforeach
                        </select>
                        @error('bank')
                        <p class="error">{{ $message }}</p>
                        @enderror
                    </td>
                </tr>
                <tr>
                    <th>支店名</th>
                    <td>
                        <select name="bank_branch" id="bank_branch">
                            <option value="">--</option>
                        </select>
                        @error('bank_branch')
                        <p class="error">{{ $message }}</p>
                        @enderror
                    </td>
                </tr>
                <tr>
                    <th>口座種別</th>
                    <td>
                        <select name="bank_account_type" id="bank_account_type">
                            <option value="">--</option>
                            @foreach(config('const.bank_account_type') as $key => $value)
                                <option
                                    value="{{ $key }}" {{ old('bank_account_type', isset($f_user) && isset($f_user->bank_account_type) ? $f_user->bank_account_type : '')  == $key ?  'selected' : '' }} >{{ $value }}</option>
                            @endforeach
                        </select>
                        @error('bank_account_type')
                        <p class="error">{{ $message }}</p>
                        @enderror
                    </td>
                </tr>
                <tr>
                    <th>口座番号</th>
                    <td>
                        <input type="text" name="bank_account_no" class="input-text"
                               value="{{ old('bank_account_no', isset($f_user) && isset($f_user->bank_account_no) ? $f_user->bank_account_no : '') }}">
                        @error('bank_account_no')
                        <p class="error">{{ $message }}</p>
                        @enderror
                    </td>
                </tr>
                <tr>
                    <th>口座名（カナ）</th>
                    <td>
                        <input type="text" name="bank_account_name" class="input-text"
                               value="{{ old('bank_account_name', isset($f_user) && isset($f_user->bank_account_name) ? $f_user->bank_account_name : '') }}">
                        @error('bank_account_name')
                        <p class="error">{{ $message }}</p>
                        @enderror
                    </td>
                </tr>
            </table>
            <span class="btn_normal" id="save">{{ $f_user->bank ? '変更する' :  '登録する' }}</span>
        </div>
        {{ Form::close() }}
    </main>
@endsection

@section('page_css')
    <link href="{{ asset('assets/vendor/select2/css/select2.min.css') }}" rel="stylesheet">
    <style>
        table.table th {
            font-size: 0.5rem !important;;
        }

        .select2 {
            width: 100% !important;
        }
        .select2-container {
            background: #EEE;
            border-radius: 7px;
        }

        .select2-container--default .select2-selection--single {
            padding: 10px;
            border: unset;
            background: #EEE;
            border-radius: 7px;
        }

        .select2-container .select2-selection--single {
            height: unset !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: unset !important;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            display: block;
            padding-left: unset;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            margin-top: 5px;
            border-color: black transparent transparent transparent;
        }

        .select2-container--open {
            padding-top: 0px !important;
        }

    </style>
@endsection

@section('page_js')
    <script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

    <script>
        var g_bank_branch_id = "{{ old('bank_branch', isset($f_user) ? $f_user->bank_branch : null)  }}";
        $(document).ready(function (e) {

            $('#save').click(function () {
                $('#save_bank_form').submit();
            });

            $('#bank').select2({});

            getBranch();
            $('select#bank').change(function () {
                getBranch();
            });
        });

        function getBranch() {
            if ($('select#bank').val() != '') {
                var bank_code = $('select#bank option:selected').data('bank_code');

                $.ajax({
                    type: "post",
                    url: '{{ route("user.my_account.get_bank_branch") }}',
                    data: {
                        bank_code: bank_code,
                        _token: '{{ csrf_token() }}',
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.result_code == 'success') {
                            var arr_branchs = result.branch;
                            var branch_element = "<option value=\"\">--</option>";
                            if (Object.keys(arr_branchs).length > 0) {
                                for (var key in arr_branchs) {
                                    branch_element += '<option value="' + arr_branchs[key]['id'] + '" >' + arr_branchs[key]['branch_code'] + '　' + arr_branchs[key]['name'] + '（' + arr_branchs[key]['name_kana'] + '）' + '</option>';
                                }
                            }
                            $('#bank_branch').html(branch_element);
                            $('#bank_branch').val(g_bank_branch_id);
                            $('#bank_branch').select2({});
                        }
                    },
                });
            }
        }

    </script>
@endsection