@extends('company.layout.content')

@section('customTitle')
{{ __('company.subscriptions.new_subscription') }}
@endsection

@section('customStyle')
<link href='{{ asset("company/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<style>
    .package-features {
        list-style: none;
        padding-inline-start: 0;
    }

    .package-features li {
        font-size: 17px;
        padding-bottom: 10px;
    }

    .package-type {
        padding: 5px 35px;
    }

    .package-type h5 {
        font-weight: 400;
    }

    .package-type.active h5 {
        color: #fff !important;
    }

    .package-price {
        font-size: 24px;
    }

    .package {
        height: 100%;
        cursor: pointer;
        border-radius: 10px;
        border-width: 2px !important;
    }

    .package.active {
        border: 3px dashed #2196f3 !important;
        box-shadow: rgb(33 150 243 / 20%) 0px 9px 24px;
    }
</style>
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="container">
        <div class="container">
            <div class="row">
                <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-content widget-content-area">
                            @if (auth()->user()->is_senior_management)
                            @if ($packages->isEmpty())
                            <x-bootstrap.alert type="info" :messages="__('company.subscriptions.messages.no_need_for_upgrading')" />
                            @endif

                            @if ($latest_company_package)
                            <div class="row justify-content-space">
                                <div class="col-md-12 mb-3">
                                    <h6>{{ __('company.subscriptions.current_subscription') }} </h6>
                                </div>

                                <div class="col-md-3 mt-3">
                                    <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                        <div class="h-100 d-flex flex-column align-self-center m-2">
                                            <div class="rounded-circle p-2" style="background-color: rgb(220 207 247 / 55%)">
                                                <i class="las la-cube" style="font-size: 25px;color:#805dca"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-column text-center h-100 w-100">
                                            <p class="text-secondary">
                                                <b>{{__('company.subscriptions.fields.package')}}</b>
                                            </p>
                                            <p>
                                                {{ $latest_company_package->package->name }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3 mt-3">
                                    <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                        <div class="h-100 d-flex flex-column align-self-center m-2">
                                            <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                                <i class="las la-clock" style="font-size: 25px;color:#2196f3"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-column text-center h-100 w-100">
                                            <p class="text-info">
                                                <b>{{__('company.subscriptions.fields.duration')}}</b>
                                            </p>
                                            <p>
                                                {{ __("company.subscriptions.fields.$latest_company_package->type") }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3 mt-3">
                                    <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                        <div class="h-100 d-flex flex-column align-self-center m-2">
                                            <div class="rounded-circle p-2" style="background-color: rgb(199 230 228 / 62%);">
                                                <i class="las la-stopwatch" style="font-size: 25px;color:#009688"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-column text-center h-100 w-100">
                                            @if ($latest_company_package->transaction_id)
                                            <p class="text-success">
                                                <b>{{__('company.subscriptions.fields.start')}}</b>
                                            </p>
                                            <p>
                                                {{ $latest_company_package->start->format('Y-m-d') }}
                                            </p>
                                            @else
                                            <p class="text-success">
                                                <b>{{__('company.subscriptions.fields.trial_start')}}</b>
                                            </p>
                                            <p>
                                                {{ $latest_company_package->trial_start->format('Y-m-d') }}
                                            </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3 mt-3">
                                    <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                        <div class="h-100 d-flex flex-column align-self-center m-2">
                                            <div class="rounded-circle p-2" style="background-color: rgb(209 205 200 / 55%)">
                                                <i class="las la-stopwatch" style="font-size: 25px;color:#E2A03F"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-column text-center h-100 w-100">
                                            @if ($latest_company_package->transaction_id)
                                            <p class="text-warning">
                                                <b>{{__('company.subscriptions.fields.end')}}</b>
                                            </p>
                                            <p>
                                                {{ $latest_company_package->end->format('Y-m-d') }}

                                            </p>
                                            @else
                                            <p class="text-warning">
                                                <b>{{__('company.subscriptions.fields.trial_end')}}</b>
                                            </p>
                                            <p>
                                                {{ $latest_company_package->trial_end->format('Y-m-d') }}

                                            </p>
                                            @endif

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

                                <div class="col-md-6 mt-3">
                                    <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                        <div class="h-100 d-flex flex-column align-self-center m-2">
                                            <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                                <i class="las la-money-bill" style="font-size: 25px;color:#2196f3"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-column text-center h-100 w-100">
                                            <p class="text-info">
                                                <b>{{__('company.subscriptions.fields.amount')}}</b>
                                            </p>
                                            <p>
                                                {{$latest_company_package->transaction->amount ?? 0}} {{ __('company.sar') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 mt-3">
                                    <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                        <div class="h-100 d-flex flex-column align-self-center m-2">
                                            <div class="rounded-circle p-2" style="background-color: rgb(199 230 228 / 62%);">
                                                <i class="las la-credit-card" style="font-size: 25px;color:#009688"></i>
                                            </div>
                                        </div>

                                        <div class="d-flex flex-column text-center h-100 w-100">
                                            <p class="text-success">
                                                <b>{{__('company.subscriptions.fields.charge_id')}}</b>
                                            </p>
                                            <p>
                                                {{ $latest_company_package->transaction->provider_id ?? __('company.subscriptions.not_paid_yet') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr class="col-12" style="border-top: 1px solid #2E9BD8;">
                            @endif

                            @if ($packages->isNotEmpty())
                            <form id="subscriptionForm" action="{{ route('company.subscriptions.store') }}" method="POST" enctype="multipart/form-data" class="mt-3">
                                @csrf

                                <div class="form-row">
                                    <h6>
                                        {{ __('company.subscriptions.new_subscription') }}
                                    </h6>
                                </div>

                                <section id="packages" class="text-center">
                                    <button type="button" data-type="monthly" class="btn btn-info mb-3 text-white package-type active" id="package-monthly-button">
                                        <h5>
                                            شهري
                                        </h5>
                                    </button>
                                    <button type="button" data-type="annual" class="btn btn-outline-info mb-3 package-type" id="package-yearly-button">
                                        <h5>
                                            سنوي
                                        </h5>
                                    </button>

                                    <div class="container text-center">
                                        <div class="row justify-conetnt-center">

                                            @if ($package = $packages->firstWhere('en_name','basic'))
                                            <div class="col-md-4 mb-4">
                                                <div class="border p-3 package" data-package="{{ $package->id }}">
                                                    <p style="color: #FF5757" class="package-price"> 80 @lang('company.sar')</p>
                                                    <p style="color: #2FB0E8;"> الأساسية</p>
                                                    <ul class='package-features'>
                                                        <li>5 أيام مجانية</li>
                                                        <li>ساعه تدريبية اون لاين مجانا </li>
                                                        <li>عدد 2 مستخدمين</li>
                                                        <li>عدد فرع واحد </li>
                                                        <li>عدد 100 عقد شهريا </li>
                                                        <li>رسوم صيانة وتحديث 10٪ </li>
                                                        <li>الدعم الفني 5 أيام من الساعة 9 — 5 م </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            @endif

                                            @if ($package = $packages->firstWhere('en_name','golden'))
                                            <div class="col-md-4 mb-4">
                                                <div class="border p-3 package" data-package="{{ $packages->firstWhere('en_name','golden')->id }}">
                                                    <p style="color: #548AFF" class="package-price"> 90 @lang('company.sar') </p>
                                                    <p style="color: #2FB0E8;"> الذهبية</p>
                                                    <ul class='package-features'>
                                                        <li>20 يوم مجاني</li>
                                                        <li>ثلاث ساعات تدريبيه اون لاين مجانا </li>
                                                        <li>عدد 4 مستخدمين </li>
                                                        <li>عدد 4 فروع </li>
                                                        <li>عدد 250 عقد شهريا </li>
                                                        <li>رسوم صيانة وتحديث 5٪ </li>
                                                        <li>الدعم الفني 7 أيام من 9– 5 م </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            @endif

                                            @if ($package = $packages->firstWhere('en_name','platinum'))
                                            <div class="col-md-4 mb-4">
                                                <div class="border p-3 package" data-package="{{ $packages->firstWhere('en_name','platinum')->id }}">
                                                    <p style="color: #FFA100" class="package-price"> 150 @lang('company.sar')</p>
                                                    <p style="color: #2FB0E8;"> البلاتيني</p>
                                                    <ul class='package-features'>
                                                        <li>30 يوم مجاني </li>
                                                        <li>ساعات تدريبيه لا محدوده حضوري مجانا </li>
                                                        <li>عدد لا محدود من المستخدمين </li>
                                                        <li>عدد لا محدود من الفروع </li>
                                                        <li>عدد لا محدود من العقود </li>
                                                        <li>الصيانة والتحديث الدورية مجانا </li>
                                                        <li>الدعم الفني 7/24 ( مدير حساب ) </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </section>

                                <div class="form-row d-none">
                                    <div class="form-group col-md-6">
                                        <label for="package">{{__('company.subscriptions.fields.package')}}</label>
                                        <select required id="package" class="form-control basic" name="package">
                                            <option value="" selected>{{__('company.subscriptions.fields.package')}}</option>
                                            @foreach ($packages as $package)
                                            <option value="{{ $package->id }}">{{ $package->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="duration">{{__('company.subscriptions.fields.duration')}}</label>
                                        <select required id="duration" class="form-control basic" name="duration">
                                            <option value="" selected>{{__('company.subscriptions.fields.duration')}}</option>
                                            @foreach ($durations as $duration)
                                            <option {{$duration=='monthly' ? 'selected' : '' }} value="{{ $duration }}">{{__("company.subscriptions.fields.$duration")}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-12">
                                        <div id="payment-container"></div>
                                        <input name="pay_token" id="pay_token" hidden />
                                    </div>
                                </div>

                                <div class="row justify-content-space mt-4">
                                    <div class="col-md-3 mt-3">
                                        <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                            <div class="h-100 d-flex flex-column align-self-center m-2">
                                                <div class="rounded-circle p-2" style="background-color: rgb(220 207 247 / 55%)">
                                                    <i class="las la-cube" style="font-size: 25px;color:#805dca"></i>
                                                </div>
                                            </div>

                                            <div class="d-flex flex-column text-center h-100 w-100">
                                                <p class="text-secondary">
                                                    <b>{{__('company.subscriptions.fields.package')}}</b>
                                                </p>
                                                <p id="newPackage"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3 mt-3">
                                        <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                            <div class="h-100 d-flex flex-column align-self-center m-2">
                                                <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                                    <i class="las la-clock" style="font-size: 25px;color:#2196f3"></i>
                                                </div>
                                            </div>

                                            <div class="d-flex flex-column text-center h-100 w-100">
                                                <p class="text-info">
                                                    <b>{{__('company.subscriptions.fields.duration')}}</b>
                                                </p>
                                                <p id="newDuration"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3 mt-3">
                                        <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                            <div class="h-100 d-flex flex-column align-self-center m-2">
                                                <div class="rounded-circle p-2" style="background-color: rgb(199 230 228 / 62%);">
                                                    <i class="las la-stopwatch" style="font-size: 25px;color:#009688"></i>
                                                </div>
                                            </div>

                                            <div class="d-flex flex-column text-center h-100 w-100">
                                                <p class="text-success">
                                                    <b>{{__('company.subscriptions.fields.start')}}</b>
                                                </p>
                                                <p id="newStart"></p>

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

                                    <div class="col-md-3 mt-3">
                                        <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                            <div class="h-100 d-flex flex-column align-self-center m-2">
                                                <div class="rounded-circle p-2" style="background-color: rgb(209 205 200 / 55%)">
                                                    <i class="las la-stopwatch" style="font-size: 25px;color:#E2A03F"></i>
                                                </div>
                                            </div>

                                            <div class="d-flex flex-column text-center h-100 w-100">
                                                <p class="text-warning">
                                                    <b>{{__('company.subscriptions.fields.end')}}</b>
                                                </p>
                                                <p id="newEnd"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12 mt-3">
                                        <div class="p-2 d-flex flex-row rounded" style="background-color: #F1F2F3;">
                                            <div class="h-100 d-flex flex-column align-self-center m-2">
                                                <div class="rounded-circle p-2" style="background-color: rgb(186, 231, 255);">
                                                    <i class="las la-money-check-alt" style="font-size: 25px;color:#2196f3"></i>
                                                </div>
                                            </div>

                                            <div class="d-flex flex-column text-center h-100 w-100">
                                                <p class="text-info">
                                                    <b>{{__('company.subscriptions.fields.amount')}}</b>
                                                </p>
                                                <p id="newAmount"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <hr class="col-12" style="border-top: 1px solid #2E9BD8;">
                                    <div class="col-md-12">
                                        <input type="submit" class="btn btn-primary mt-3" value="{{ __('general.update') }}">
                                    </div>
                                </div>
                            </form>
                            @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')
<script src="https://secure.gosell.io/js/sdk/tap.min.js"></script>
<script>
    $("#subscriptions-menu-box").attr("data-active", "true");

    var labels = {
        ok: '{{ __("general.ok") }}',
        card_number: '{{ __("company.subscriptions.fields.card_number") }}',
        card_holder_name: '{{ __("company.subscriptions.fields.card_holder_name") }}',
    };


    var tap = Tapjsli('{{config("services.tap.publishable_api_key")}}');

    var elements = tap.elements({});
    var style = {
        base: {
            color: '#535353',
            lineHeight: '18px',
            fontFamily: 'sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: 'rgba(0, 0, 0, 0.26)',
                fontSize: '15px'
            }
        },
        invalid: {
            color: 'red'
        }
    };

    var cardlabels = {
        cardNumber: labels.card_number,
        expirationDate: "MM/YY",
        cvv: "CVV",
        cardHolder: labels.card_holder_name
    };

    var paymentOptions = {
        currencyCode: ["SAR"],
        labels: cardlabels,
        TextDirection: "{{ $dir }}"
    }

    var card = elements.create('card', {
        style: style
    }, paymentOptions);

    card.mount('#payment-container');

    $("#subscriptionForm").submit(function (e) {
        e.preventDefault();

        tap.createToken(card).then( (result) =>  {
            if (result.error) {
                Swal.fire({
                    title: result.error.message,
                    icon: 'error',
                    confirmButtonText: labels.ok
                });
            } else {
                $("#pay_token").val(result.id);
                e.currentTarget.submit();
            }
        });
    });

    $('#package,#duration').change(function(){
        let package = $("#package").val();
        let duration = $("#duration").val();

        if (package && duration) {
            $.ajax({
                url:"{{ route('company.subscriptions.details') }}",
                data : {
                    package,duration
                },
                success(res){
                    if (res.status) {
                        $('#newPackage').html(res.package);
                        $('#newDuration').html(res.duration);
                        $('#newStart').html(res.start);
                        $('#newEnd').html(res.end);
                        $('#newAmount').html(res.amount);
                    
                    } else {
                        swal({
                            html: res.message,
                            type: 'error',
                            confirmButtonText: '{{ __('general.ok') }}',
                        });
                    }
                }
            });
        }
    });

    $('#package-yearly-button').click(function(){
        $(this).removeClass('btn-outline-info').addClass('btn-info').addClass('text-white').addClass('active');
        
        $('#package-monthly-button').addClass('btn-outline-info').removeClass('btn-info').removeClass('text-white').removeClass('active')
        

        $('.package-price:eq(0)').html("816 @lang('company.sar') <s>960 @lang('company.sar')</s>");
        $('.package-price:eq(1)').html("918 @lang('company.sar') <s>1080 @lang('company.sar')</s>");
        $('.package-price:eq(2)').html("1530 @lang('company.sar') <s>1800 @lang('company.sar')</s>");

        $("#duration").val('annual').change();
    });

    $('#package-monthly-button').click(function(){
        $(this).removeClass('btn-outline-info').addClass('btn-info').addClass('text-white').addClass('active');

        $('#package-yearly-button').addClass('btn-outline-info').removeClass('btn-info').removeClass('text-white').removeClass('active')

        $('.package-price:eq(0)').html("80 @lang('company.sar')");
        $('.package-price:eq(1)').html("90 @lang('company.sar')");
        $('.package-price:eq(2)').html("150 @lang('company.sar')");

        $("#duration").val('monthly').change();
    });


    $(".package").click(function(e){
        let package = $(this).data('package');

        $("#package").val(package).change();

        $(".package").removeClass("active");

        $(this).addClass('active');
    });

</script>
@endsection