{{ Form::open(['route'=>['water.bank-information.update', $bank->id],'method'=>'POST', 'class'=>'needs-validation', 'novalidate']) }}
@method('PUT')
<div class="modal-header">
    <h5 class="modal-title mt-0" id="myModalLabel">আপডেট</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <div class="col-md-12 m-auto">
        <h5 class="text-center">ব্যাংক ইনফর্মেশন</h5>
        <div class="form-group row mb-2">
            <label for="code" class="col-form-label">কোড<span class="required">*</span></label>
            <input type="number" min="1" name="code" value="{{ $bank->code }}" required class="form-control" id="code" autofocus>
        </div>
        <div class="form-group row mb-2">
            <label for="bank_name" class="col-form-label">ব্যাংকের নাম<span class="required">*</span></label>
            <input type="text" step="any" name="bank_name" value="{{ $bank->bank_name }}" required class="form-control" id="bank_name">
        </div>
        <hr/>
        <h5 class="text-center">ব্যাংক ব্রাঞ্চ ইনফর্মেশন</h5>
        @php($i = 1)
        @foreach(json_decode($bank->branch_info) as $key => $item)
            <div id="edit_branch_info">
                @if($key != 0)
                    <hr/>
                @endif
                <div class="edit_branch_info{{ $key }}">
                    <div class="form-group row mb-2">
                        <label for="branch_name{{ $key }}" class="col-form-label">শাখার নাম<span class="required">*</span></label>
                        <input type="text" step="any" name="branch_info[{{ $i }}][branch_name]" value="{{ $item->branch_name }}" required class="form-control" id="branch_name{{ $key }}">
                    </div>
                    <div class="form-group row mb-2">
                        <label for="address{{ $key }}" class="col-form-label">ঠিকানা</label>
                        <input type="text" step="any" name="branch_info[{{ $i }}][address]" value="{{ $item->address }}" class="form-control" id="address{{ $key }}">
                    </div>
                    <div class="form-group row mb-2">
                        <label for="email{{ $key }}" class="col-form-label">মোবাইল ও ইমেইল</label>
                        <div class="input-group">
                            <input type="text" step="any" name="branch_info[{{ $i }}][phone]" value="{{ $item->phone }}" class="form-control" id="phone{{ $key }}" placeholder="মোবাইল">
                            <input type="text" step="any" name="branch_info[{{ $i }}][email]" value="{{ $item->email }}" class="form-control" id="email{{ $key }}" placeholder="ইমেইল">
                        </div>
                    </div>
                    <div class="form-group row mb-2">
                        <label for="swift_code{{ $key }}" class="col-form-label">SWIFT Code <span class="required">*</span></label>
                        <input type="text" step="any" name="branch_info[{{ $i }}][swift_code]" value="{{ $item->swift_code }}" required class="form-control" id="swift_code{{ $key }}">
                    </div>
                    @if($key != 0)
                        <div class="form-group row mb-2">
                            <button type="button" class="btn btn-sm btn-danger remove_edit_other_div" data-id="{{ $key }}"><i class="fas fa-plus"></i>Remove Branch</button>
                        </div>
                    @endif
                </div>
            </div>
            @php($i++)
        @endforeach
        <div class="form-group row mb-2">
            <button type="button" class="btn btn-sm btn-info edit-branch"><i class="fas fa-plus"></i>Add Branch</button>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-primary waves-effect waves-light">আপডেট</button>
    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">ক্লোজ</button>
</div>
{{ Form::close() }}
<script type="text/javascript">
    var index = 201;
    $(".edit-branch").on('click', function (){
        let div = '';
        div += `<div class="edit_branch_info${index}">
                        <hr/>
                        <div class="form-group row mb-2">
                            <label for="branch_name${index}" class="col-form-label">শাখার নাম<span class="required">*</span></label>
                            <input type="text" step="any" name="branch_info[${index}][branch_name]" required class="form-control" id="branch_name${index}">
                        </div>
                        <div class="form-group row mb-2">
                            <label for="address${index}" class="col-form-label">ঠিকানা</label>
                            <input type="text" step="any" name="branch_info[${index}][address]" class="form-control" id="address${index}">
                        </div>
                        <div class="form-group row mb-2">
                            <label for="email${index}" class="col-form-label">মোবাইল ও ইমেইল</label>
                            <div class="input-group">
                                <input type="text" step="any" name="branch_info[${index}][phone]" class="form-control" id="phone${index}" placeholder="মোবাইল">
                                <input type="text" step="any" name="branch_info[${index}][email]" class="form-control" id="email${index}" placeholder="ইমেইল">
                            </div>
                        </div>
                        <div class="form-group row mb-2">
                            <label for="swift_code${index}" class="col-form-label">SWIFT Code <span class="required">*</span></label>
                            <input type="text" step="any" name="branch_info[${index}][swift_code]" required class="form-control" id="swift_code${index}">
                        </div>
                        <div class="form-group row mb-2">
                            <button type="button" class="btn btn-sm btn-danger remove_edit_other_div" data-id="${index}"><i class="fas fa-plus"></i>Remove Branch</button>
                        </div>
                    </div>`;
        $('#edit_branch_info').append(div);
        index++;
    })
    $(document).on('click', '.remove_edit_other_div', function () {
        let id = $(this).data('id')
        $(`.edit_branch_info${id}`).closest('div').remove();
    });
</script>