@extends('admin.pages.Bussiness-plan-builder.layout.master')
@section('bussinessplanbuilder')
@section('var2', 'show')
@section('personaltext', 'active1')
<style>
    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 750px;
        }
    }

    @media(min-width:992px) {
        .avatar {
            margin-top: -6rem;
            margin-bottom: 1rem;
            width: 200px;
            height: 130px;
            margin-right: 29rem;
        }

        .card-title {
            margin-top: -6rem;
            color: #fff;
        }
    }

    @media(max-width:990px) {
        .avatar {
            border: 0.3rem solid rgba(#fff, 0.3);
            margin-top: -6rem;
            margin-bottom: 1rem;
            width: 100px;
            height: 100px;
            margin-right: 8rem
        }

        .chn {
            margin-top: -7rem;
        }

        .chcn {
            color: #fff;
        }



        .chpn {
            border-bottom: #333 2px solid;
            display: none;
        }

    }



    .chpn {
        border-bottom: #333 2px solid;

    }

    .lab-style {
        font-weight: bold !important;
        /* margin-right: 14rem; */
    }

    .he {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00AC83;
    }

    .sapan {
        background: transparent;
        margin: 0 20px;
    }

    .he:before,
    .he:after {
        background: #927FFB;
        height: 3px;
        content: '';
        flex: 1;
    }

</style>
<style>
    /*.card .card-header {*/
    /*    background: #fff;*/
    /*}*/
    .card_form .card {
        box-shadow: 0px 10px 20px 10px !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: black;
    }

    label {
        color: black !important;
    }

    .card {
        /* background: transparent; */
    }

    .text-small {
        color: black;
    }

    a {
        color: black
    }

    .theme-white .btn-primary {
        background-color: #0172be !important;
        border-color: transparent !important;
        color: #fff;
    }


    .irf_alert {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        min-width: 300px;
        padding-bottom: 30px;
        background: -webkit-linear-gradient(35deg, rgba(240, 240, 212, 0.0) 15%,
                rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0)),
            -webkit-linear-gradient(70deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(140deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 29%), -webkit-linear-gradient(140deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0)19%), -webkit-linear-gradient(175deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(210deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(280deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(135deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(50deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), -webkit-linear-gradient(100deg, rgba(240, 240, 212, 0.0) 15%, rgba(240, 240, 212, 0.25), rgba(240, 240, 212, 0.0) 20%), #ffffff;
        border-radius: 13px;

    }

    .irf_alert_btn {}

    .stripe-element-container {
        padding-top: .55rem;
        padding-bottom: .50rem;
        border-radius: 22px;
        border: 2px solid #222;
    }

    .StripeElement {

        display: block;
        width: 900;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    }

    .StripeElement--focus {
        border-color: #80BDFF;
    }

    /* Can't see what I type without this */
    #card-number.form-control,
    #card-cvc.form-control,
    #card-exp.form-control {
        display: block;
    }

</style>
<form method="post" action="{{ route('user.personal.personaltext.process') }}">
    @csrf


    <input type="hidden" name="company_id" value="{{ Request()->id }}">
    @if (Session::get('errors'))
        {{-- {{dd(Session::get('errors')->first())}} --}}
        <div class="alert alert-{{ Session::get('alert') }}">
            {{ Session::get('errors')->first() }}
        </div>
        {!! Session::forget('errors') !!}
        {!! Session::forget('alert') !!}
    @endif
    <div class="row">
        <div class="col-md-12">
            <h4>Personal</h4>
            <p>Write an explanation of the company's personal needs, inculding payrolls positions and payroll
                expenses.the management bios are automatically included in your plans <a href=""
                    class="btn btn-success float-right">Skip
                    for Now »</a>

            </p>
        </div>
    </div>
    <div class=" row mt-4">
        <label class="col-form-label  col-12 col-md-12 col-lg-12">
            <p></p>
            <button type="button" class="btn btn-success float-right" data-toggle="modal"
                data-target="#Expert_Rewriting_Service"><i class="fa fa-pencil"></i></button>
        </label>
        <div class="col-sm-12 col-md-12">
            <textarea class="summernote" name="info">@if (!empty($personnelText))
{{ $personnelText->info }}
@endif</textarea>
            <span class="text-danger">{{ $errors->first('info') }}</span>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-right">
            <button type="submit" class="btn btn-success mr-3">Save</button>
        </div>
    </div>
</form>

<div class="row mt-5">
    <div class="col-md-6"><a href="{{ route('user.personal.payroll', Request()->id) }}" class="btn btn-success">«
            Back</a></div>

    <div class="col-md-6 text-right"><a href="{{ route('user.financialinfo.importantassumption', Request()->id) }}"
            class="btn btn-primary">Continue to Financial Information »</a></div>
</div>
<div class="modal fade" id="Expert_Rewriting_Service" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background:transparent;    box-shadow:none; ">
            <div class="modal-header">
                <h5 class="modal fade bd-example-modal-lg show" id="exampleModalLabel">Modal title</h5>

            </div>
            <div class="modal-body">




                <div class="card">
                    <img class="card-img-top" src="{{ asset('assets/img/avback.jpg') }}" alt="Bologna"
                        height="120px">
                    <div class="card-body text-center">
                        @if (session()->has('error'))
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <strong>Error!</strong> {{ session('error') }}
                            </div>
                        @endif
                        {{-- <div class="row mb-2">
                            <div class="col-sm-12">
                                <img class="img-fluid" src="{{ asset('client/images/sqa.png') }}" alt="">
                            </div>
                        </div> --}}
                        <form id="stripe_f" action="{{ route('expert.services.pay') }}" method="post"
                            class="card_form">
                            @csrf
                            <input type="hidden" name="payment_method" class="payment-method">

                            <input type="hidden" name="company_id" value="{{ Request()->id }}">
                            <div class="row">
                                <div class="col-4">
                                    <img class="avatar rounded-circle" src="{{ asset('assets/img/avatar.png') }}"
                                        alt="Bologna">
                                </div>
                                <div class="col-8 chn">
                                    <h4 class="card-title chcn">
                                        Expert Rewriting Service</h4>
                                </div>
                                <p class="card-subtitle mb-2 text-muted chpn">If you require expert help to make your
                                    business plan better sounding, better looking and you simply feel stuck?
                                    We can help, select a rewrite option per section or a full plan!</p>

                            </div>
                            <div class="row text-left">
                                <div class="col-md-12">
                                    <table border="0" class="single-form">
                                        <tbody>
                                            <tr id="modalPay_sections" style="display: block;">
                                                <td>
                                                    <strong>Sections</strong><br>
                                                    <div id="sections__checkbox">
                                                        @foreach ($experts as $expert)
                                                            <input class="expert-details" type="checkbox"
                                                                name="service[]" data-price="{{ $expert->cost }}"
                                                                value="{{ $expert->id }}"
                                                                @if ($expert->companyActive->count() > 0) checked disabled @endif>&nbsp;{{ $expert->name }}
                                                            ({{ $expert->cost }})
                                                            <br>
                                                        @endforeach
                                                        <div class="form-group col-md-6">
                                                            <label class="lab-style">Province</label>
                                                            <select id="province_select" class="form-control"
                                                                name="province">

                                                                <option value="AB">Alberta</option>
                                                                <option value="BC">British Columbia</option>
                                                                <option value="MB">Manitoba</option>
                                                                <option value="NB">New Brunswick</option>
                                                                <option value="NL">Newfoundland and Labrador</option>
                                                                <option value="NS">Nova Scotia</option>
                                                                <option value="ON">Ontario</option>
                                                                <option value="PE">Prince Edward Island</option>
                                                                <option value="QC">Quebec</option>
                                                                <option value="SK">Saskatchewan</option>
                                                                <option value="NT">Northwest Territories</option>
                                                                <option value="NU">Nunavut</option>
                                                                <option value="YT">Yukon</option>
                                                            </select>
                                                            <span
                                                                class="text-danger">{{ $errors->first('province') }}</span>

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


                                        </tbody>
                                    </table>

                                </div>
                            </div>




                            <h4> Fill Payment Detail </h4>
                            <p> Charges for Experts Services $<b id="expert_price">00.00</b> (Tax %<b
                                    id="tax_id">{{ 5 }}</b>)</p>
                            <div class="row">
                                <div class="form-group mb-3 col-md-6" id="card_name">
                                    <input type="text" id="card_name" name="card_name" class="form-control"
                                        placeholder="Card Holder Name">

                                </div>
                                <div class="form-group mb-3 col-md-6">
                                    <div id="card_number"></div>

                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-3 col-md-6">
                                    <div id="card_expiry"></div>
                                </div>
                                <div class="form-group mb-3 col-md-6">
                                    <div id="card_cvc"></div>
                                </div>
                            </div>
                            <div class="text-danger" id="card-errors" role="alert"></div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <img class="img-fluid" src="{{ asset('client/images/sqa.png') }}" alt="" height="30px">
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-3 col-md-12">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                    <a type="button" class="btn btn-secondary" data-dismiss="modal">Close</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')


<script src="https://js.stripe.com/v3/"></script>
<script>
    var check_mail = false;
    var intent = '{{ $intent }}';
    let stripe = Stripe("{{ env('STRIPE_KEY') }}")
    let elements = stripe.elements();
    const cardNum = elements.create('cardNumber');
    const cardExpiry = elements.create('cardExpiry');
    const cardCvc = elements.create('cardCvc');
    cardNum.mount('#card_number');
    cardExpiry.mount('#card_expiry');
    cardCvc.mount('#card_cvc');
    let paymentMethod = null
    $('.card_form').on('submit', function(e) {
        $('button.pay').attr('disabled', true)
        if (paymentMethod) {
            return true
        }
        stripe.confirmCardSetup(
            intent, {
                payment_method: {
                    card: cardNum,
                    billing_details: {
                        name: $('#card_name').val()
                    }
                }
            }
        ).then(function(result) {
            if (result.error) {
                $('#card-errors').text(result.error.message)
                $('button.pay').removeAttr('disabled')
            } else {
                paymentMethod = result.setupIntent.payment_method;
                $('.payment-method').val(paymentMethod)
                $('.card_form').submit()
            }
        })
        return false
    })
</script>



<script>
    var price = 0;
    $(document).ready(function() {
        @if (session('stripe'))
            $('#Expert_Rewriting_Service').modal('show');
        @endif
        $('.expert-details').on('change', function() {


            if (this.checked) {

                price += $(this).data('price');

            } else {
                if (price > 0)
                    price -= $(this).data('price');
            }
            $('#expert_price').html(price);
            $('#province_select').trigger('change');
        })


        $('#province_select').on('change', function() {

            checkTex($(this).val());
        });

    });



    function checkTex(n) {
        var tax;

        switch (n) {
            case "AB":
                tax = 5;
                break;
            case "BC":
                tax = 5;
                break;
            case "MB":
                tax = 5;
                break;
            case "NB":
                tax = 15;
                break;
            case "NL":
                tax = 15;
                break;
            case "NS":
                tax = 15;
                break;
            case "ON":
                tax = 13;
                break;
            case "PE":
                tax = 15;
                break;
            case "QC":
                tax = 5;
                break;
            case "SK":
                tax = 5;
                break;
            case "NT":
                tax = 5;
                break;
            case "NU":
                tax = 5;
                break;
            case "YT":
                tax = 5;
                break;

            default:
                tax = 0;
        }

        new_price = (price * (1 + 1 - parseFloat(1 - tax / 100))).toFixed(2);

        $('#expert_price').html(new_price);
        $('#tax_id').text(tax);

    }
</script>



@endsection