@extends('Partners.Layouts.Page')

@section('content')

    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route()}}">الرئيسية /</a></h4>
                <h4 class="content-title mb-0 my-auto"><a href="{{partner_route('contracts.index')}}">الحساب الشخصي /</a></h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">{{$page_title}}</span>
            </div>
        </div>
    </div>

    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><span class="form-ribbon">تعديل الحسابات البنكية</span></h3>
                </div>

                <div class="card-body p-0">
                    <div class="card-body">
                        @include('Messages')

                        <form id="contract-form" method="post" action="{{partner_route('user.banks.update', ['redirect' => request()->redirect])}}">
                            @csrf
                            @method('PUT')

                            
                            <div class="rows-wrapper">
                                @if($user->banks()->count() == 0)
                                        
                                    @include('Partners.Auth.Banks.Fields')
                                @endif

                                @foreach($user->banks as $key => $bank)
                                        
                                    @include('Partners.Auth.Banks.Fields')

                                                                        @endforeach
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-xs-12">
                                    <div class="form-group">
                                        <label class="form-label" for="down_payment">نسبة العربون</label>

                                        <select id="down_payment" class="nice-select mt-2 w-100" name="down_payment">
                                            <option value="25" {{$user->down_payment == '25' ? 'selected' : ''}}>25%</option>
                                            <option value="50" {{$user->down_payment == '50' ? 'selected' : ''}}>50%</option>
                                            <option value="100" {{$user->down_payment == '100' ? 'selected' : ''}}>100%</option>
                                        </select>

                                        {{--            <input class="form-control grey @error('iban') is-invalid @enderror" value="{{@old('down_payment')[$key] ?? $down_payment}}" id="down_payment_{{$key}}" type="text" name="down_payment[]" />--}}

                                        @error('down_payment')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mt-3 mb-0">
                                <button type="submit" class="btn btn-success"><i class="si si-check"></i> <span class="text">حفظ البيانات</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function (){
            $('.preloader-wrapper').remove()
        })

        $('body').on('click', '.add-row', function (){
            const index = Math.floor(Math.random() * 1000);

            let output = '<div class="row">';

            output += '<div class="col-md-3">';
            output += '<div class="form-group">';
            output += '<label class="form-label" for="holder_name_'+index+'">اسم المستفيد</label>';

            output += '<input class="form-control grey" id="holder_name_'+index+'" type="text" name="holder_name[]" required />';

            output += '</div>'
            output += '</div>';

            output += '<div class="col-md-3">';
            output += '<div class="form-group">';
            output += '<label class="form-label" for="bank_name_'+index+'">اسم البنك</label>';
            output += '<input class="form-control grey" id="bank_name_'+index+'" type="text" name="bank_name[]" required />'
            output += '</div>';
            output += '</div>';

            output += '<div class="col-md-3">';
            output += '<div class="form-group">';
            output += '<label class="form-label" for="bank_account_'+index+'">رقم الحساب</label>';
            output += '<input class="form-control grey" id="bank_account_'+index+'" type="text" name="bank_account[]" required />';
            output += '</div>';
            output += '</div>';

            output += '<div class="col-md-3">';
            output += '<div class="form-group">';
            output += '<label class="form-label" for="iban_'+index+'">IBAN</label>';

            output += '<div class="input-group" style="direction: ltr">';
            output += '<span style="border-radius: 5px 0 0 5px" class="input-group-text" id="basic-addon1">SA</span>';
            output += '<input class="form-control" style="direction: ltr;border-radius: 0 5px 5px 0" id="iban_'+index+'" type="text" name="iban[]" required />';
            output += '</div>';

            output += '</div>';
            output += '</div>';

            output += '</div>';

            output += '<div class="col-md-3 d-flex align-items-end">';
            output += '<div class="form-group">';
            output += '<button type="button" class="add-row btn btn-success me-1"><i class="fa fa-plus"></i></button>'

            output += '<button type="button" class="delete-row btn btn-danger"><i class="fa fa-trash"></i></button>';

            output += '</div>';
            output += '</div>';
            output += '</div>';

            $('.rows-wrapper').append(output);
            $('.nice-select').niceSelect('update');
        })

        $('body').on('click', '.delete-row', function (){
            $(this).parents('.row').remove()
        })
    </script>
@endsection