@extends('layouts.default')

@section('title', 'Checkout')

@section('content')
<style>
    .form-check:not(.form-switch):not(.form-check-circle) .form-check-input:checked {
        background-size: 88% 88% !important;
        height: 20px;
        width: 20px;
    }
</style>
<div class="fh5co-loader" id="reloader" style="display: none">
    <div class="loader"></div>
</div>
<div class="custom-hero-img-ch">
    <div class="container">
        <div class="row justify-content-center my-4">
            <div class="mt-6">
                <div class="col-12">
                    <h1 class="fw-700 text-center">Subscription checkout</h1>
                </div>
                <div class="col-12 col-xl-8 col-lg-8 mx-auto">
                    <div class="mt-4 text-center">
                        <p class="text-center">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
                            Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-white">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card w-100 shadow-xss rounded-xxl border-0 -mt-20">
                    <div class="row">
                        <div class="col-12 col-lg-6 col-xl-6 p-6">
                            <h3 class="mb-4">Subscription Plan</h3>
                            <div class="card w-100 rounded-xxl mb-4 p-4 border-0 ch-bg">
                                <div class="form-group">
                                    <div class="form-check mt-1">
                                        <input class="form-check-input" name="checked_package" type="radio" checked value="option1" aria-label="" data-toggle="collapse" href="#package" role="button" aria-expanded="true" aria-controls="package">
                                        <label class="text-grey-500 font-xss ml-3" for="blankCheckbox1">
                                            <h5>{{$package->name}}</h5>
                                            <small>
                                                @if($package->feature_category == 'senior')
                                                    Senior Lawyers
                                                @elseif($package->feature_category == 'junior')
                                                    Junior Lawyers
                                                @endif
                                            </small>
                                            <small>- {{$package->description}}</small>
                                        </label>
                                    </div>
                                    <div class="p-4" id="package">
                                        <ul class="top-content list-unstyled">
                                            <ul class="top-content list-unstyled">
                                                @php
                                                    $features = '';
                                                    if(isset($package->features) && !empty($package->features)) {
                                                        $features = json_decode($package->features);
                                                    }
                                                @endphp
                                                @forelse ($features as $feature)
                                                    <li>
                                                        <a class="btn menu-btn d-flex custom-text-muted">
                                                            <i class="feather-check-circle text-color mr-3"></i>
                                                            <span class="-mt-4">{{$feature}}</span>
                                                        </a>
                                                    </li>
                                                @empty
                                                    <li>
                                                        <a class="btn menu-btn d-flex custom-text-muted text-color">
                                                            <span class="-mt-4 text-color">No features available</span>
                                                        </a>
                                                    </li>
                                                @endforelse
                                            </ul>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 col-xl-6 p-6">
                            <h3 class="mb-4" style="opacity: 0">Subscription Plan</h3>
                            <div class="mt-2">
                                <h4>{{$package->name}} Payment amount</h4>
                                <form id="pay">
                                    <div class="row mb-4 justify-content-center">
                                        <div class="col">
                                            <div class="mt-4 mb-3">
                                                <p>Total price</p>
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <div class="mt-4 mb-3">
                                                <div class="form-group priceamount">
                                                    <div class="d-flex">
                                                        <select name="currency" id="currency"  class="form-select mr-4 custom-h-h" data-choices='{"searchEnabled": true}'>
                                                            <option value="NGN">NGN</option>
                                                            {{-- <option value="USD">USD</option> --}}
                                                        </select>
                                                        <h4 class="ml-2">₦{{number_format($package->price)}}</h4>
                                                        <input type="hidden" id="price" value="{{$package->price}}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://checkout.flutterwave.com/v3.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script>

    document.getElementById('reloader').style.display = 'block';

    // toastr.success("Your package has been activated", "", defaultSetting)

    setInterval(function(){
        swal({
            title: "Success!",
            text: 'Payment verified',
            icon: "success",
        });
        window.location.href = "{{url('/feeds/home')}}";
    }, 4000);



</script>
@endsection