@extends('layouts.backend.app')


@section('title', 'Payment Method')

@push('css')
@endpush

@section('content')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">

                            <li class="breadcrumb-item">
                                <a href="">
                                    Payment Method
                                </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 mt-5">
        <div class="card">
            <div class="card-header">
                <h3>Payment Method</h3>
            </div>
            <div class="card-body">
                <div class="row form-row">
                    <div class="row">
                        @foreach ($paymentMethods as $finance)
                            <div class="col-md-2 col-sm mb-2 mb-sm-0">
                                <div class="form-control">
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" name="paymentMethod"
                                            {{ $finance_id == $finance->id ? 'checked' : '' }}
                                            id="paymentMethod{{ $finance->id }}"
                                            onchange="return selectMethod({{ $finance->id }})" value="{{ $finance->id }}">
                                        <label class="custom-control-label"
                                            for="paymentMethod{{ $finance->id }}">{{ $finance->name }}</label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        <div class="card col-md-8">
            <div class="card-header">
                <h2>Payment Details</h2>
            </div>
            <div class="card-body">
                <div class="col-md-12">
                    <form action="{{ route('affiliate.payment-method.storeFiled', $finance_id) }}" method="POST">
                        @csrf
                        @foreach ($fileds as $filed)
                            <div class="row form-group mt-2 mb-2">
                                <label for="{{ $filed->id }}"
                                    class="col-sm-3 col-form-label input-label">{{ $filed->name }}</label>
                                <div class="col-sm-9 js-form-message">
                                    @php
                                        $paymentMethod = \App\Models\PaymentMethod::where('finance_filed_id', $filed->id)
                                            ->where('user_id', auth()->user()->id)
                                            ->first();
                                    @endphp
                                    <input type="text" class="form-control" name="{{ $filed->id }}"
                                        id="{{ $filed->id }}"
                                        value="{{ $paymentMethod ? $paymentMethod->value : null }}" required
                                        data-msg="This field can't be empty.">
                                </div>
                            </div>
                        @endforeach
                        <button class="btn btn-success" id="submit_btn">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function selectMethod(method) {
            const route = '{{ route('affiliate.payment-method.index') }}'
            window.location.href = `${route}/?finance_id=${method}`
        }
    </script>
@endpush