@php
    use Carbon\Carbon;
@endphp
@extends('vendor.layouts.master')

@section('title')
    {{ $title }}
@endsection

@section('content')
    <style>
        #offerPackageModal .modal-content {
            border-radius: 16px;
        }

        #offerPackageModal .modal-header {
            background: #007bff;
            color: #fff;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
        }

        #offerPackageModal .btn-close {
            filter: invert(1);
        }


        .pricing .price-table {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        @media screen and (max-width: 991.98px) {
            .pricing .price-table {
                max-width: 370px;
                margin: 0 auto;
            }
        }

        .pricing .price-table .pricing-panel {
            height: 280px
            background-color: white;
            padding: 30px 35px 30px;
            border-radius: 8px;
            -webkit-box-shadow: 0 5px 83px 0 rgba(40, 40, 40, 0.11);
            box-shadow: 0 5px 83px 0 rgba(40, 40, 40, 0.11);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
        }

        @media (min-width: 992px) and (max-width: 1200px) {
            .pricing .price-table .pricing-panel {
                padding-right: 25px;
                padding-left: 25px;
            }
        }

        @media screen and (max-width: 991.98px) {
            .pricing .price-table .pricing-panel {
                text-align: center;
                max-width: 370px;
                margin: 0 auto 30px;
            }
        }

        @media screen and (max-width: 767.98px) {
            .pricing .price-table .pricing-panel {
                padding-left: 25px;
                padding-right: 25px;
            }
        }

        .pricing .price-table .pricing-panel .pricing-body .pricing-heading .pricing-title {
            font-size: 18px;
            font-weight: 700px;
            line-height: 26px;
            color: black !important;
            margin-bottom: 0;
            position: relative;
            text-transform: capitalize;
            -webkit-transition: 300ms ease-in-out;
            -o-transition: 300ms ease-in-out;
            transition: 300ms ease-in-out;
        }

        .pricing .price-table .pricing-panel .pricing-body .pricing-heading .pricing-desc {
            font-size: 14px;
            font-weight: 400;
            color: #9b9b9b;
            line-height: 26px;
            margin-bottom: 0;
        }


        .pricing .price-table .pricing-panel .pricing-body .pricing-price p {
            font-weight: 400;
            color: #9b9b9b !important;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            line-height: 30px;
            position: relative;
        }

        .advantages-list {
            text-align: left;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .advantages-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-weight: 700;
            font-size: 15px;
            line-height: 36px;
            color: gray;
            text-transform: capitalize;
            padding: 0 !important;
        }

        @media (min-width: 992px) and (max-width: 1200px) {
            .advantages-list li {
                font-size: 14px;
            }
        }

        @media screen and (max-width: 991.98px) {
            .advantages-list li {
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
                margin-right: 20px;
            }
        }

        @media screen and (max-width: 767.98px) {
            .advantages-list li {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                margin-right: 0;
            }
        }

        .advantages-list li::before {
            content: "";
            font-weight: 700;
            width: 10px;
            height: 10px;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: blue;
            color: white !important;
            margin-right: 15px;
            border-radius: 50%;
            font-size: 10px;
        }

        @media (min-width: 992px) and (max-width: 1200px) {
            .advantages-list li::before {
                margin-right: 8px;
            }
        }

        .pricing .price-table .pricing-panel .pricing-body .pricing-price p {
            font-weight: 400;
            color: gray;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            line-height: 30px;
            position: relative;
        }

        .pricing .price-table .pricing-panel .pricing-body .pricing-price p .currency {
            font-size: 35px;
        }

        p {
            color: gray;
        }
    </style>




    <section class="pricing pricing-1" id="pricing-1">
        <div class="container">
            @if($isAuthHasPendingSubscription)
                <p class="alert alert-warning">{{ trns('you_have_not_complete_your_payment_it_will_delete_after_5mins') }}</p>
            @endif
            <form method="POST" id="subscribeForm">
                @csrf
                <div class="row">
                    <div class="col-md-12 col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title" style="color: black;">{{ trns('packages') }}</h3>
                            </div>
                            @if (count($packages) == 0)
                                <div>
                                    <div class="d-flex flex-column justify-content-center align-items-center">
                                        <img src="{{ asset('assets/uploads/no-data2.jpg') }}" style="height: 200px;">
                                        <p style="text-align: center;"> {{ trns('no_packages_available') }}</p>
                                    </div>
                                </div>
                            @endif
                            <div class="row m-5">

                                @foreach ($packages as $package)
                                    <input type="hidden" name="package_id" value="{{ $package->id }}">
                                    <div class="col-4 ">
                                        <div class="price-table" style="height: 280px !important;">
                                            <div class="pricing-panel">
                                                <div class="pricing-body">
                                                    <div class="pricing-heading">
                                                        <div class="d-flex justify-content-end">

                                                            @if ($subscription && $package->id == $subscription->package_id)
                                                                <img src="{{ asset('assets/trust.svg') }}"
                                                                     style="width: 30px; height: 30px; border-radius: 50%; margin-bottom: 10px;">

                                                            @endif

                                                        </div>
                                                    </div>
                                                    <div class="pricing-price mt-2 d-flex">

                                                        <p>
                                                            <span class="currency text-primary ms-2">
                                                                {{ $package->price - ($package->price * $package->discount) / 100 }}
                                                            </span>
                                                        </p>
                                                        @if ($package->discount > 0)
                                                            <span
                                                                class="currency fs-4 text-decoration-line-through text-danger">
                                                                {{ $package->price }}
                                                            </span>
                                                        @endif

                                                    </div>
                                                    <div class="pricing-list">

                                                        <ul class="advantages-list list-unstyled">
                                                            <li>
                                                                <span class="me-2">{{ trns('offers') }}</span>
                                                                <span class="me-3">{{ $package->offer_count }} </span>
                                                            </li>
                                                            <li>
                                                                <span class="me-2">{{ trns('period') }}</span>
                                                                <span class="me-3">{{ $package->period }}
                                                                    {{ trns('days') }}</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

                                                @if ($subscription && $package->id == $subscription->package_id)
                                                    <button type="button" class="mt-4 btn btn-success ">
                                                        {{ Carbon::parse($subscription->to)->diffInDays() }}
                                                        {{ trns('days_left') }}
                                                    </button>
                                                @elseif($isAuthHasPendingSubscription)
                                                    <button type="button" disabled class="mt-4 btn btn-warning">
                                                        {{ trns('subscribe') }}
                                                    </button>

                                                @elseif($isAuthHasActiveSubscription)
                                                    <button type="button" disabled class="mt-4 btn btn-warning">
                                                        {{ trns('unavailable') }}
                                                    </button>
                                                @else

                                                    <a class="dropdown-item show-subscribe-modal text-center mt-4 btn btn-primary"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#subscribe_modal"
                                                       data-id="{{ $package->id }}">
                                                        {{ trns('subscribe') }}
                                                    </a>

                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                        </div>
                    </div>

                </div>
            </form>

            <!--subscribe MODAL -->
            <div class="modal fade" id="subscribe_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog " role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">{{ trns('subscribe') }}</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input id="package_id" name="package_id" type="hidden">
                            <p class="alert alert-warning">{{ trns('are_you_sure_you_want_to_subscribe_this_package') }}
                            </p>
                        </div>
                        <div class="modal-footer d-flex flex-nowrap">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" id="close_btn">
                                {{ trns('close') }}
                            </button>
                            <button type="button" class="btn btn-primary" id="subscribe_btn">{{ trns('subscribe') }}!
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- MODAL CLOSED -->
        </div>
    </section>
@endsection


@section('ajaxCalls')
    <script>
        $(document).ready(function () {
            $('#subscribe_modal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var id = button.data('id');
                var title = button.data('title');
                var modal = $(this);
                modal.find('.modal-body #package_id').val(id);
            });


            $(document).on('click', '#subscribe_btn', function () {
                var package_id = $("#package_id").val();
                var url = "{{ route('offer_packages.subscribe') }}";

                $.ajax({
                    type: 'POST',
                    url: url,
                    beforeSend: function () {
                        $('#subscribe_btn').html(
                            '<span class="spinner-border spinner-border-sm mr-2"></span> <span style="margin-left: 4px;">{{ trns('loading...') }}</span>'
                        )
                            .attr('disabled', true);
                    },
                    data: {
                        '_token': "{{ csrf_token() }}",
                        'package_id': package_id
                    },
                    success: function (response) {
                        if (response.status === 200) {
                            $('#subscribe_modal').modal('hide');
                            $('#close_btn').click();
                            $('#subscribe_btn').html('{{ trns('subscribe') }}').attr('disabled', false);


                            if (response.status === 200) {
                                Swal.fire({
                                    title: "{{ trns('Subscribed successfully') }}",
                                    text: "{{ trns('you_will_redirect_to_payment_to_confirm_your_subscription') }}",
                                    icon: "success",
                                    confirmButtonText: '{{ trns('OK') }}',
                                    draggable: true
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.open(response.payment_url, '_blank');
                                    }
                                });
                            }
                        } else if (response.status === 400) {
                            var message = response.message;
                            Swal.fire({
                                icon: 'error',
                                title: '{{ trns('error') }}',
                                text: message,
                                confirmButtonText: '{{ trns('OK') }}'
                            });

                            $('#subscribe_btn').html('{{ trns('subscribe') }}').attr('disabled', false);
                        }
                    },

                    error: function (xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ trns('Error') }}',
                            text: xhr.responseJSON?.message ||
                                '{{ trns('Something went wrong') }}',
                            confirmButtonText: '{{ trns('OK') }}'
                        });
                    }
                });
            });
        });


    </script>

@endsection