@extends('web.layouts.container')
@section('breadcrumb')
    <nav class="nav-breadcrumb" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__('courses.subscription')}}</a></li>
        </ol>
    </nav>
@endsection
@section('content')

    <main>
        <!--start contact-->
        <section class="contact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 m-auto">
                        <div class="contact-form wow fadeInUp" data-wow-duration="3s">
                            <div class="text text-center">
                                <h5>{{__('courses.complete_pay')}}</h5>
                            </div>
                            @if(session('message'))
                                <div class="alert alert-success text-center">{!! session('message') !!}</div>
                            @endif
                            <form action="{{route('doSubscription')}}" method="post" enctype="multipart/form-data">
                                @csrf()
                                <input type="hidden" name="course_id" value="{{$course->id}}">
                                <div class="row pt-4">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
                                        <div class="form-group">
                                            <input type="text" name="bank_name_from" class="form-control @error('bank_name_from') is-invalid @enderror" value="{{old('bank_name_from')}}" />
                                            <label class="floating-label">{{__('subscriptions.bank_name_from')}}</label>
                                            @error('bank_name_from') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="text" name="bank_name_to" class="form-control @error('bank_name_to') is-invalid @enderror" value="{{old('bank_name_to')}}"/>
                                            <label class="floating-label">{{__('subscriptions.bank_name_to')}}</label>
                                            @error('bank_name_to') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{old('email')}}"/>
                                            <label class="floating-label">{{__('subscriptions.email')}}</label>
                                            @error('email') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="text" name="owner_name" class="form-control @error('owner_name') is-invalid @enderror" value="{{old('owner_name')}}"/>
                                            <label class="floating-label">{{__('subscriptions.owner_name')}}</label>
                                            @error('owner_name') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="text" name="account_no" class="form-control @error('account_no') is-invalid @enderror" value="{{old('account_no')}}"/>
                                            <label class="floating-label">{{__('subscriptions.account_no')}}</label>
                                            @error('account_no') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="number" name="amount" class="form-control @error('amount') is-invalid @enderror" value="{{old('amount')}}"/>
                                            <label class="floating-label">{{__('subscriptions.amount')}}</label>
                                            @error('amount') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                        <div class="form-group">
                                            <input type="date" name="trans_date" class="form-control @error('trans_date') is-invalid @enderror" value="{{old('trans_date')}}"/>
                                            <label class="floating-label">{{__('subscriptions.trans_date')}}</label>
                                            @error('trans_date') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 d-flex justify-content-between">
                                        <div class="form-group">
                                            <input type="file" name="trans_document" id="trans_document" class="form-control d-none trans_document"/>
                                            <label for="trans_document" class="btn btn-primary"><i class="fa fa-file"></i> {{__('subscriptions.trans_document')}}</label>
                                            @error('trans_document') <span class="text-danger">{{$message}}</span> @enderror
                                        </div>
                                        <img  style="width: 60px;" class="trans_doc_preview" src="" alt="trans_doc_preview">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                    <div class="form-group">
                                        <input {{old('terms') ? 'checked' : ''}} type="checkbox" name="terms" id="terms" class="custom-checkbox @error('terms') is-invalid @enderror"/>
                                        <label for="terms" class="">{{__('subscriptions.terms_agree')}}</label>
                                        @error('terms') <span class="text-danger">{{$message}}</span> @enderror
                                    </div>
                                </div>
                                <button class="submit-btn" type="submit">{{__('courses.complete_pay')}}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.navs-container').addClass('page-heading')
        });

        $("#trans_document").change(function() {

            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('.trans_doc_preview').attr('src', e.target.result);
                    $('.trans_doc_preview').fadeIn();
                };

                reader.readAsDataURL(this.files[0]);
            }
        });


    </script>
@endsection