@extends('layouts.applicant-layout', ['pageTitle' => 'Applicant Home'])

@section('main-content')
    <section class="main-content-section">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="card card-bordered h-100">
                    <div class="card-inner">
                        <div class="card-head">
                            <h2 class="page-title-secondary text-danger">Select Payment Preference</h2>
                        </div>
                        <form action="{{ route('application.save_installment_preference', ['service' => $service->id, 'application' => $application]) }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label class="form-label" for="installment_type">Installment Type</label>
                                <select class="form-control" id="installment_type" name="installment_type" required data-preselected="{{ old('installment_type') }}">
                                    @foreach($installmentTypes as $type)
                                        <option value="{{ $type->id }}" @if(old('installment_type') == $type->id) selected @endif data-payment-details="{{ json_encode($type) }}">{{ $type->display_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="installment_type">Total Amount</label>
                                <div class="form-control bg-gray-100 naira-prefix" id="total_amount"></div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="installment_type">Payment Now</label>
                                <div class="form-control bg-gray-100 naira-prefix" id="payment_now"></div>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="installment_type">Balance</label>
                                <div class="form-control bg-gray-100 naira-prefix" id="payment_balance"></div>
                            </div>
                            <div class="form-group text-center">
                                <button class="btn btn-primary" type="submit">Proceed <em class="icon ni ni-chevron-arrow-right"></em> </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('more-scripts')
    <script src="{{ asset('js/pages/payment_installment_selection.js') }}"></script>

@endsection