@extends('admin.pages.Bussiness-plan-builder.layout.master')
@section('bussinessplanbuilder')
@section('var1','show')
@section('marketingexp','active1')
    <style>
        #productsales {
            background: gainsboro;
            border: 1px solid rgb(161, 161, 235);
            COLOR: white;
            border-radius: 14px;
        }

        input.form-control.form-control-sm {
            background: #dddddd;
        }

        .overlay {
            pointer-events: none;
            background: #dddddd;
        }

        #img-preview {
            display: none;
            width: 155px;
            border: 2px dashed #333;
            margin-bottom: 20px;
        }

        #img-preview img {
            width: 100%;
            height: auto;
            display: block;
        }

        [type="file"] {
            height: 0;
            width: 0;
            overflow: hidden;
        }

        [type="file"]+label {
            font-family: sans-serif;
            background: black;
            padding: 10px 30px;
            border: 2px solid black;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s;
        }

        [type="file"]+label:hover {
            background-color: #fff;
            color: #f44336;
        }



        @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;
        }

    </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>
    <div class="row">
        <div class="col-md-12">
            <h1>Marketing</h1>
            <p>Work on this if you're ready to develop a marketing budget.
                <a href="{{route('user.marketing.marketingtext',Request()->id)}}" class="btn btn-success float-right">Skip for Now »</a>
                <label class="col-form-label  col-12 col-md-12 col-lg-12">NAME AND EXPLAIN YOUR MARKETING EXPENSES
                    <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>
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="text-left" style="background-color: #ddecf2; padding: 1rem; padding-bottom: 3rem;">
                <h6>Do you require any assistance with this?</h6>
                <h4>You don'thave to handle marketing alone. It's an essential part of any business plan.</h4>
                <p>Consider obtaining professional aid to ensure the proper execution of tasks
                    such as market analysis and strategy. Get an expert to help you with your
                    marketing needs and achieve optimal results.
                    </p>
                <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicModal">Get an Expert
                    for this</button> -->
            </div>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-12">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Add
                Marketing Expense</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-12">
            <div class="table-responsive">
                @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
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Title</th>
                            <th scope="col">Year1</th>
                            <th scope="col">Year2</th>
                            <th scope="col">Year3</th>
                            <th scope="col">Action</th>

                        </tr>
                    </thead>
                    <tbody>
                       @forelse($marketingExpense as $key => $marketingExpense_value)
                          <tr id="marketingexpense{{$marketingExpense_value->id}}">
                            <td class=""><button type="button" data-id="{{$marketingExpense_value->id}}" class="btn text-info edit" data-toggle="modal"
                                    >{{$marketingExpense_value->market_expense_name}}</button>
                            </td>
                            <td>{{$marketingExpense_value->one_year_market_expense}}</td>
                            <td>{{$marketingExpense_value->two_year_market_expense}}</td>
                            <td>{{$marketingExpense_value->three_year_market_expense}}</td>
                            <td><button type="button" class="btn btn-success mr-1 copy" data-id="{{$marketingExpense_value->id}}" data-toggle="modal"
                                    data-target=".bd-example-modal-lg4"><i class="fa fa-file"></i></button>

                                <button class="btn btn-danger delete" data-id="{{$marketingExpense_value->id}}">x</i></button>
                            </td>
                        </tr>
                       @empty

                       @endforelse

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

        <div class="col-md-6  text-right"><a href="{{route('user.marketing.marketingtext',Request()->id)}}" class="btn btn-primary">Continue to Marketing Text »</a></div>
    </div>
    <br>

  
    {{-- Hire a expert Modak] --}}
    <div class="modal fade" id="basicModal" 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 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">
                            <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">Get Your Logo Completed for You.</h4>
                                </div>
                                <p class="card-subtitle mb-2 text-muted chpn">If you require a logo design expert* to
                                    create
                                    a stunning brand face for your business plan, complete the form below and help will
                                    be
                                    on the way.</p>

                            </div>
                            <div class="row">
                                <div class="form-group col-6">
                                    <label class="lab-style">First Name</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="form-group col-6">
                                    <label class="lab-style">Email</label>
                                    <input type="email" class="form-control">
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-6">
                                    <label class="lab-style">Province</label>
                                    <select class="form-control">
                                        <option disabled="" selected="">Province</option>
                                        <option>Option 2</option>
                                        <option>Option 3</option>
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label class="lab-style">City</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>



                            <a type="button" class="btn btn-primary">Submit</a>
                            <a type="button" class="btn btn-secondary" data-dismiss="modal">Close</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Create markeiting Modeal --}}
    <div class="modal fade bd-example-modal-lg" id="add_expense" tabindex="-1" aria-labelledby="myLargeModalLabel" style="display: none;"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">Marketing Expense</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form method="post" action="{{route('user.marketing.marketingexpense.process')}}">
                    @csrf


        <input type="hidden" name="company_id" value="{{Request()->id}}">
                    <div class="modal-body">
                        <div class="row mb-2">
                            <div class="col-md-6">
                                <strong>Add a Custom or Suggested Marketing Expense</strong>
                                <select class="form-control" id="market_expense" name="market_expense" required>
                                    <option value="">Select One</option>
                                    <option value="Custom Expense" @if(old('market_expense')=="Custom Expense") selected @endif>Custom Expense</option>
                                    <option value="Company Website" @if(old('market_expense')=="Custom Expense") selected @endif>Company Website</option>
                                    <option value="Internet Advertising" @if(old('market_expense')=="Internet Advertising") selected @endif>Internet Advertising</option>
                                    <option value="Industry Directories" @if(old('market_expense')=="Industry Directories") selected @endif>Industry Directories</option>
                                    <option value="Local Telephone Directory" @if(old('market_expense')=="Local Telephone Directory") selected @endif>Local Telephone Directory</option>
                                    <option value="Print Advertising" @if(old('market_expense')=="Print Advertising") selected @endif>Print Advertising</option>
                                    <option value="Radio and Television Ads" @if(old('market_expense')=="Radio and Television Ads") selected @endif>Radio and Television Ads</option>
                                </select>
                                <span class="text-danger">{{$errors->first('market_expense')}}</span>
                            </div>
                            <div class="col-md-6">
                                <strong>Marketing Expense Name</strong>

                                <input type="text" class="form-control" id="market_expense_name" name="market_expense_name" value="{{old('market_expense_name')}}"  required>
                                <span class="text-danger">{{$errors->first('market_expense')}}</span>
                            </div>
                        </div>
                        <div>

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <strong>Year One</strong>
                                            <br>
                                            Annual Marketing Expense
                                            <br>
                                            <input type="number" class="form-control" name="one_year_market_expense" value="{{old('one_year_market_expense')}}" step="0.001">
                                            <span class="text-danger">{{$errors->first('one_year_market_expense')}}</span>
                                        </div>
                                        <div class="col-md-12 mt-5">
                                            <strong>Year two</strong>
                                            <br>
                                            Annual Marketing Expense
                                            <br>
                                            <input type="number" class="form-control" name="two_year_market_expense" value="{{old('two_year_market_expense')}}" step="0.001">
                                            <span class="text-danger">{{$errors->first('two_year_market_expense')}}</span>
                                        </div>
                                        <div class="col-md-12 mt-5">
                                            <strong>Year three</strong>
                                            <br>
                                            Annual Marketing Expense
                                            <br>
                                            <input type="number" class="form-control" name="three_year_market_expense" value="{{old('three_year_market_expense')}}" step="0.001">
                                            <span class="text-danger">{{$errors->first('three_year_market_expense')}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9 overlay">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month1</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 2</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 3</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 4</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 5</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 6</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 7</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 8</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month9</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 10</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 11</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 12</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="w-100 bg-secondary p-1 my-2"></div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 13</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 14</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 15</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 16</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 17</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 18</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 19</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 20</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 21</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 22</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 23</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 24</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="w-100 bg-secondary p-1 my-2"></div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 25</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 26</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 27</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 28</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 29</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 30</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 31</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 32</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 33</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 34</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 35</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 36</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3 ">
                                    <div class="col-md-6"><button class="btn btn-secondary">Cancel</button>
                                    </div>

                                    <div class="col-md-6 text-right"><button type="submit" class="btn btn-success">Save Marketing Expense
                                        </button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Name Modal --}}
    <div class="modal fade" id="edit_market_expense" tabindex="-1" aria-labelledby="myLargeModalLabel" style="display: none;"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">Marketing Expense</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form method="post" action="{{route('user.marketing.marketingexpense.update')}}">
                    @csrf


        <input type="hidden" name="company_id" value="{{Request()->id}}"/>
                    <input type="hidden" name="id" id="id" value="{{old('id')}}">
                    <div class="modal-body">
                        <div class="row mb-2">
                            <div class="col-md-5">
                                <strong>Marketing Expense Name</strong>
                                <input type="text" class="form-control market_expense_name" name="market_expense_name" value="{{old('market_expense_name')}}"  required>
                                <span class="text-danger">{{$errors->first('market_expense')}}</span>
                            </div>
                        </div>
                        <div>

                            <div class="row">
                                <div class="col-md-3">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <strong>Year One</strong>
                                            <br>
                                            Annual Marketing Expense
                                            <br>
                                            <input type="number" class="form-control one_year_market_expense" name="one_year_market_expense" value="{{old('one_year_market_expense')}}" step="0.001" >
                                            <span class="text-danger">{{$errors->first('one_year_market_expense')}}</span>
                                        </div>
                                        <div class="col-md-12 mt-5">
                                            <strong>Year two</strong>
                                            <br>
                                            Annual Marketing Expense
                                            <br>
                                            <input type="number" class="form-control two_year_market_expense" name="two_year_market_expense" value="{{old('two_year_market_expense')}}" step="0.001">
                                            <span class="text-danger">{{$errors->first('two_year_market_expense')}}</span>
                                        </div>
                                        <div class="col-md-12 mt-5">
                                            <strong>Year three</strong>
                                            <br>
                                            Annual Marketing Expense
                                            <br>
                                            <input type="number" class="form-control three_year_market_expense" name="three_year_market_expense" value="{{old('three_year_market_expense')}}" step="0.001">
                                            <span class="text-danger">{{$errors->first('three_year_market_expense')}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9 overlay">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month1</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 2</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 3</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 4</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 5</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 6</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 7</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 8</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month9</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 10</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 11</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 12</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="w-100 bg-secondary p-1 my-2"></div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 13</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 14</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 15</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 16</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 17</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 18</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 19</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 20</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 21</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 22</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 23</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 24</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="w-100 bg-secondary p-1 my-2"></div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 25</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 26</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 27</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 28</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 29</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 30</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2">
                                            <span class="text-small">Month 31</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 32</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 33</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 34</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 35</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                        <div class="col-md-2">
                                            <span class="text-small">Month 36</span>
                                            <input class="form-control form-control-sm" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3 ">
                                    <div class="col-md-6"><button class="btn btn-secondary">Cancel</button>
                                    </div>

                                    <div class="col-md-6 text-right"><button class="btn btn-success">Save Marketing Expense
                                        </button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- hire a expert penicl icon --}}
    <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

                        <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>
    <script>
        $(document).ready(function() {
            check="{{old('market_expense')}}";
            check_id="{{old('id')}}";
            if(check!=""){
              ('#add_expense').show();
            }
            if(check_id!=""){
               ('#edit_market_expense').show();
            }
            console.log("hello")
            $("#nextbtn1").click(function() {
                $("#step-1").addClass('d-none')
                $("#step-2").removeClass('d-none')
            });
            $("#nextbtn2").click(function() {
                $("#step-2").addClass('d-none')
                $("#step-3").removeClass('d-none')
            });
        })
        $(document).ready(function() {
            console.log("hello")
            //  $("#btn-next1").attr("disabled", true)
            $("#perv2").click(function() {
                $("#step-2").addClass('d-none')
                $("#step-1").removeClass('d-none')
            });
            $("#perv3").click(function() {
                $("#step-3").addClass('d-none')
                $("#step-2").removeClass('d-none')
            });

            $(document).on("change","#market_expense",function(){
                market_expense=$(this).val();
                //alert($market_expense);
                if(market_expense!='Custom Expense'){
                    $("#market_expense_name").val(market_expense)
                }
            });

            $(document).on("click",".delete",function(){
                if(confirm('Are you sure you want to delete this marketing expense?'))
                {
                id=$(this).data("id");
                //alert(id);
                    $.ajax({
                        //url:'delete-estimate/'+id,
                        url:"{{url('user/businessplan/marketing/marketingexpense/delete')}}/"+id,
                        type:'GET',
                        //data:{
                        //_token:$('input[name=_token]').val()
                         //   id:id,

                       // },
                        success:function(response)
                        {
                            $('#marketingexpense'+id).remove();
                        }

                    });
                }
            });

            $(document).on("click",".copy",function(){
                if(confirm('Do You Real Want To Copy This Marketing Expense!'))
                {
                id=$(this).data("id");
                //alert(id);
                    $.ajax({
                        //url:'delete-estimate/'+id,
                        url:"{{url('user/businessplan/marketing/marketingexpense/copy')}}/"+id,
                        type:'GET',
                        //data:{
                        //_token:$('input[name=_token]').val()
                         //   id:id,

                       // },
                        success:function(response)
                        {
                            //$('#marketingexpense'+id).remove();
                            location.reload();
                        }

                    });
                }
            });

            $(document).on("click",".edit",function(){
                id=$(this).data("id");
                //alert(id);
                $.get('{{ url("user/businessplan/marketing/marketingexpense/edit") }}/'+id,function(marketing){
                    // console.log(cat);
                    //alert(marketing.id)
                    $('#id').val(marketing.id);
                    $('.market_expense_name').val(marketing.market_expense_name);
                    $('.one_year_market_expense').val(marketing.one_year_market_expense);
                    $('.two_year_market_expense').val(marketing.two_year_market_expense);
                    $('.three_year_market_expense').val(marketing.three_year_market_expense);

                    //$(".edit-message").html("");
                    $('#edit_market_expense').modal('show');
                });
            })
        })
    </script>
@endsection