@extends('admin.layout')
@section('content')
    <style>
        [type=radio].with-gap.radio-col-primary:checked+label:before {
            border: 2px solid #fb753d !important;
        }

        [type=radio].with-gap.radio-col-primary:checked+label:after {
            background-color: #fb753d !important;
            border: 2px solid #fb753d !important;
        }

        input[type=text],
        input[type=search],
        input[type=number],
        input[type=email] {
            border-radius: 40px !important;
        }

        .active-radio {
            border: 2px solid #fb753d;
        }

        #payByViza,
        #payByBankTransfer {
            display: none;
        }

        .bank-box-border {
            border: 2px solid #fb753d;
        }

    </style>
    <section class="content" style="margin-top: 3em">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="box text-center" style="background-color: #fb753d;box-shadow: none !important;">
                    <div class="box-body" style="color: #FFFFFF;padding: 1em 2em 2em 2em;">
                        <div class="text-center">
                            <img style="width: 3em;margin-bottom: 1em;"
                                src="{{ getExternalRouts()['mangerRout'] . $subscribtion['icon'] }}" alt="">
                        </div>
                        <h5 class="text-center">
                            {{ $rtl == true ? $subscribtion['title_ar'] : $subscribtion['title_en'] }} <span
                                class="mon-ann-span"> ({{ translate(' Monthly ') }})
                            </span>
                        </h5>
                    </div>
                </div>
                @if ($discount > 0)
                    <div class="box" style="box-shadow: none !important;">
                        <div class="box-body" style="padding: 2em 2em 2em 2em;">
                            <div class="row" style="font-size: 1em;font-weight: bolder;">
                                <div class="col-8">
                                    {{ translate('Remaining money in your old pakage') }}
                                    <br>
                                    <span style="color: red" >{{ translate('Remaining dayes in old subscribtion : ') }} {{ $remaining_days }} {{ translate('day') }}</span>
                                </div>
                                <div class="col-4" style="text-align: end;color: #fb753d;">
                                    <span id="old_pakage_discount">{{ $discount }}</span>
                                    <span class="package_symbol"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if ($currentTenant->subscribtion_type == 'year')
                    <div class="box" style="box-shadow: none !important;">
                        <div class="box-body annually active-radio" style="padding: 2em 2em 2em 2em;">
                            <div class="row" style="font-size: 1.5em;font-weight: bolder;">
                                <div class="col-6">
                                    <input name="group5" m-div="annually" type="radio" id="radio_32"
                                        class="with-gap radio-col-primary" checked />
                                    <label for="radio_32">{{ translate('The price of the package is annually') }}</label>
                                </div>
                                <div class="col-6" style="text-align: end;color: #fb753d;">
                                    <span class="package_price"
                                        usprice="{{ $subscribtion['yearly_amount'] }}">{{ $subscribtion['yearly_amount'] }}</span>
                                    <span class="package_symbol"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="box" style="box-shadow: none !important;">
                        <div class="box-body month active-radio" style="padding: 2em 2em 2em 2em;">
                            <div class="row" style="font-size: 1.5em;font-weight: bolder;">
                                <div class="col-6">
                                    <input name="group5" m-div="month" type="radio" id="radio_30"
                                        class="with-gap radio-col-primary" checked />
                                    <label for="radio_30">{{ translate('Package price per month') }}</label>
                                </div>
                                <div class="col-6" style="text-align: end;color: #fb753d;">

                                    <span class="package_price"
                                        usprice="{{ $subscribtion['amount'] }}">{{ $subscribtion['amount'] }}</span>
                                    <span class="package_symbol"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="box" style="box-shadow: none !important;">
                        <div class="box-body annually" style="padding: 2em 2em 2em 2em;">
                            <div class="row" style="font-size: 1.5em;font-weight: bolder;">
                                <div class="col-6">
                                    <input name="group5" m-div="annually" type="radio" id="radio_32"
                                        class="with-gap radio-col-primary" />
                                    <label for="radio_32">{{ translate('The price of the package is annually') }}</label>
                                </div>
                                <div class="col-6" style="text-align: end;color: #fb753d;">
                                    <span class="package_price"
                                        usprice="{{ $subscribtion['yearly_amount'] }}">{{ $subscribtion['yearly_amount'] }}</span>
                                    <span class="package_symbol"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

            </div>
            <div class="col-lg-8 col-md-8 col-12">
                <div class="box" style="box-shadow: none !important;">
                    <div class="box-header box-header-custem">
                        <div class="app-menu">
                            <div class="row">
                                <div class="col-lg-5 col-5">
                                    <div class="row">
                                        <div class="col-2 text-center"><img style="margin-top: 1em;"
                                                src="{{ getExternalRouts()['mangerRout'] . $subscribtion['icon'] }}"
                                                alt=""></div>
                                        <div class="col-10">
                                            <h3> {{ translate('Subscribe to the') }}
                                                {{ $rtl == true ? $subscribtion['title_ar'] : $subscribtion['title_en'] }}
                                                <span class="mon-ann-span"> ({{ translate(' Monthly ') }}) </span>
                                            </h3>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-4 col-4">
                                    <div class="form-group row">
                                        <label for="currencies" class="col-md-4"
                                            style="line-height: 3em">{{ translate('Choose Currency') }}
                                        </label>
                                        <div class="col-md-8">
                                            <select name="currencies" id="currencies" class="form-control">
                                                @foreach ($currencies as $currency)
                                                    @if ($currency['code'] == Session::get('managerCurencies')[$currentTenant->fav_manager_currency]['code'])
                                                        <option mid={{ $currency['id'] }} selected
                                                            value="{{ $currency['exchange_rate'] }}"
                                                            symbol="{{ $rtl == true ? $currency['symbol_ar'] : $currency['symbol_en'] }}">
                                                            {{ $rtl == true ? $currency['name_ar'] : $currency['name_en'] }}
                                                        </option>
                                                    @else
                                                        <option mid={{ $currency['id'] }}
                                                            value="{{ $currency['exchange_rate'] }}"
                                                            symbol="{{ $rtl == true ? $currency['symbol_ar'] : $currency['symbol_en'] }}">
                                                            {{ $rtl == true ? $currency['name_ar'] : $currency['name_en'] }}
                                                        </option>
                                                    @endif

                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-3 col-3" style="text-align: end">
                                    <a href="{{ route('subscribions') }}" style="color: #c3c3c3">
                                        {{ translate('View the available packages') }}
                                        <i style="margin: 1em;" class="fa fa-angle-left"></i>
                                    </a>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-6 col-lg-6 col-12 mx-auto">
                                <div class="form-group row">
                                    <label for="currencies" class="col-md-4"
                                        style="line-height: 3em">{{ translate('Choose payment type') }}
                                    </label>
                                    <div class="col-md-8">
                                        <select name="bank_transfer_visa" id="bank_transfer_visa" class="form-control">
                                            <option selected disabled value="0">
                                                {{ translate('Choose payment type') }}
                                            </option>
                                            <option value="bank_transfer">
                                                {{ translate('Bank transfer') }}
                                            </option>
                                            <option value="visa">
                                                {{ translate('Visa') }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div id="payByBankTransfer">
                            {!! Form::open(['method' => 'post', 'action' => 'Admin\SubscribtionController@renew_subscribion', 'files' => true]) !!}
                            {!! Form::hidden('subscribtion_id', $subscribtion['id']) !!}
                            {!! Form::hidden('year_month', 'month', ['class' => 'year_month_input']) !!}
                            {!! Form::hidden('currency_id', $subscribtion['id'], ['class' => 'currency_id']) !!}
                            {!! Form::hidden('discount', $discount) !!}
                            <input type="hidden" name="payment_method" value="bank_transfer">
                            <input type="hidden" name="fav_manager_currency" class="fav_manager_currency"
                                value="{{ $currentTenant->fav_manager_currency }}">
                            <input type="hidden" name="bank_id" id="bank_id"
                                value="{{ sizeof($banks) > 0 ? $banks[0]['id'] : 0 }}">

                            <div class="banks-container">
                                <div class="row">
                                    @foreach ($banks as $key => $bank)
                                        <div class="col-4 col-md-4 col-xl-4">
                                            <div class="box box-link-pop text-center bank-box {{ $key == 0 ? 'bank-box-border' : '' }}"
                                                mid="{{ $bank['id'] }}" id="bank_{{ $bank['id'] }}"
                                                style="cursor: pointer">
                                                <div class="box-body">
                                                    <div class="text-center">
                                                        <img style="width: 6em;height: 4em;"
                                                            src="{{ url(getExternalRouts()['mangerRout'] . $bank['photo']) }}"
                                                            alt="">
                                                    </div>
                                                    <h6>{{ managerRtl() == true ? $bank['name_ar'] : $bank['name_en'] }}
                                                    </h6>
                                                    <h6><span>{{ translate('User name') }}:</span>
                                                        {{ $bank['user_name'] }}</h6>
                                                    <h6><span>{{ translate('Account number') }}:</span>
                                                        {{ $bank['account_number'] }}</h6>
                                                    <h6><span>{{ translate('IPAN') }}:</span> {{ $bank['ipan_code'] }}
                                                    </h6>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-8 col-md-8 col-sm-12 mx-auto">
                                    <div class="custom-file-container">
                                        <div class="custom-file">
                                            <input required type="file" name="payment_attach" class="custom-file-input"
                                                id="payment_attach">
                                            <label class="custom-file-label"
                                                for="payment_attach">{{ translate('Payment attach') }}</label>
                                        </div>

                                        <div class="bg-lightest p-10 rounded5 dvPreview text-center"
                                            style="width: 100%;margin-top: 1em;height: 10em;">
                                            <img style="max-width: 100%;height: 100%;"
                                                src="{{ url('/images/noimg.png') }}" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div>
                                <button type="submit"
                                    class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                    style="width: 100%;">{{ translate('Continu payment') }}</button>
                            </div>
                            {!! Form::Close() !!}
                        </div>
                        <div id="payByViza">
                            {!! Form::open(['method' => 'post', 'action' => 'Admin\SubscribtionController@renew_subscribion', 'files' => true]) !!}
                            <input type="hidden" name="payment_method" value="visa">
                            <input type="hidden" name="fav_manager_currency" class="fav_manager_currency"
                                value="{{ $currentTenant->fav_manager_currency }}">
                            {!! Form::hidden('subscribtion_id', $subscribtion['id']) !!}
                            {!! Form::hidden('discount', $discount) !!}
                            {!! Form::hidden('year_month', 'month', ['class' => 'year_month_input']) !!}
                            {!! Form::hidden('currency_id', $subscribtion['id'], ['class' => 'currency_id']) !!}
                            <div class="row">
                                <div class="col-10">
                                    <div class="form-group">
                                        <div>
                                            {!! Form::number('card_num', null, ['class' => 'form-control', 'placeholder' => translate('Card number')]) !!}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group">
                                                <div>
                                                    {!! Form::number('cvv', null, ['class' => 'form-control', 'placeholder' => translate('CVV')]) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="form-group">
                                                <div>
                                                    {!! Form::text('end_date', null, ['class' => 'form-control', 'placeholder' => translate('Card Expiry Date (11/25)')]) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-8">
                                            <h6>
                                                {{ translate('Payment methods available') }}
                                                <img src="{{ url('/images/mastercard.png') }}" alt="">
                                                <img src="{{ url('/images/visa.png') }}" alt="">
                                            </h6>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <br>
                            <div>
                                <button type="submit"
                                    class="waves-effect waves-light btn btn-rounded btn-dark mb-5 padding-label-dashbord orang-bg"
                                    style="width: 100%;">{{ translate('Continu payment') }}</button>
                            </div>
                            {!! Form::Close() !!}
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script type="text/javascript">
        $('#bank_transfer_visa').change(function() {

            if ($(this).val() == 'bank_transfer') {
                $('#payByViza').hide();
                $('#payByBankTransfer').show();
            } else {
                $('#payByBankTransfer').hide();
                $('#payByViza').show();
            }

        })
        $('.bank-box').click(function() {
            var mid = $(this).attr('mid');
            $('#bank_id').val(mid);
            $('.bank-box').removeClass('bank-box-border');
            $('#bank_' + mid).addClass('bank-box-border');
        })
        $('input[name="group5"]').on('change', function() {
            var m_div = $('input[name="group5"]:checked').attr('m-div');
            $('.annually,.month').removeClass('active-radio');
            $('.' + m_div).addClass('active-radio');
            if (m_div == 'month') {
                $('.year_month_input').val('month');
                $('.mon-ann-span').text('({{ translate(' Monthly ') }})');
            } else {
                $('.year_month_input').val('year');
                $('.mon-ann-span').text('({{ translate(' Annually ') }})');
            }
        });
        var ext_rate = $('#currencies').val();
        $('.currency_id').val($('option:selected', '#currencies').attr('mid'));
        var symbol = $('option:selected', '#currencies').attr('symbol');
        $('.package_symbol').text(symbol);
        $(".package_price").each(function(index) {
            $(this).text($(this).attr('usprice') * ext_rate);
        });
        $('#old_pakage_discount').text({{ $discount }} * ext_rate)
        $('#currencies').change(function() {
            ext_rate = $(this).val();
            $('.currency_id').val($('option:selected', '#currencies').attr('mid'));
            symbol = $('option:selected', this).attr('symbol');
            $('.package_symbol').text(symbol);
            $(".package_price").each(function(index) {
                $(this).text($(this).attr('usprice') * ext_rate)
            });
            $('#old_pakage_discount').text({{ $discount }} * ext_rate)
        })
    </script>
@endsection