@extends('company_portal.layouts.master')

@section('title','Creating the third workspace.')

@section('header')
	@include('company_portal.partials.header')
@endsection

@section('content')

    {{-- ADD NEW BILLING DESIGN HERE --}}

    <section class="main-container">
        <div class="padding">
            <div class="d-flex flex-column flex-md-row flex-lg-column flex-xl-row flex-wrap align-items-start justify-content-between billing-content">
                <div class="left-side ">
                    <div class="current-users billing-box-white mb-3">
                        <div class="">
                            <p class="mb-0 font-25">Current users: <span>1</span></p>
                        </div>
                    </div>
                    <div class="choose-plan billing-box-white mb-3">
                        <div class="choose-plan-title">
                            <div class="d-flex  flex-xl-column flex-xxl-row flex-wrap justify-content-between titles-numbering align-items-xxl-center mb-4">
                                <p class="f-40 mb-2 mb-xxl-0 title-num">1.</p>
                                <p class="f-40 mb-2 mb-xxl-0">Choose your plan</p>
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                      Yearly
                                    </button>
                                    <ul class="dropdown-menu">
                                      <li><a class="dropdown-item" href="#">Action</a></li>
                                      <li><a class="dropdown-item" href="#">Another action</a></li>
                                      <li><a class="dropdown-item" href="#">Something else here</a></li>
                                    </ul>
                                </div>
                            </div>
                           
                        </div>
                        <div class="plans">
                            <div class="reef-unlimited">
                                <div class="d-flex flex-row flex-wrap justify-content-between reef-unlimited-content active py-3  mb-2">
                                    <div class="unlimited-list pe-0">
                                        <p class="f-30 fw-bold unlimited-title">Reef Unlimited</p>
                                        <div class="prices-responsive  text-start pb-4 ">
                                            <p class="mb-0 f-35 fw-bold">£50/yr</p>
                                            <p class="mb-0 f-14">per user </p>
                                            <p class="mb-0 f-14">(save £100 with a yearly plan)</p>
                                        </div>
                                        <ul>
                                            <li>Free hot drink</li>
                                            <li>Unlimited bookings included in the price</li>
                                            <li> Remote work & wellbeing perks</li>
                                            <li>Discounted food & drink</li>
                                            <li>Access to meeting room & hotel rooms</li>
                                        </ul>
                                    </div>
                                    <div class="prices  text-end ">
                                        <p class="mb-0 f-35 fw-bold">£50/yr</p>
                                        <p class="mb-0 f-14">per user </p>
                                        <p class="mb-0 f-14">(save £100 with a yearly plan)</p>
                                    </div>
                                </div>
                                <div class="d-flex flex-row flex-wrap reef-unlimited-content py-3 ">
                                    <div>
                                        <p class="f-30 fw-bold">Reef Unlimited+</p>
                                        <p>Coming soon</p>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="additional-users billing-box-white mb-3">
                        <div class="add-users ">
                            <div class="titles-numbering">
                                <p class="f-40 mb-4 title-num">2.</p>
                                <p class="f-40 mb-4">Additional users</p>
                            </div>
                            <div class="add-users-content">
                                <div class="d-flex flex-row flex-wrap add-remove-users">
                                    <div class="remove-add-user">
                                        <div class="remove-add-user-content  disabled">
                                            <div class="sign">
                                                <svg  viewBox="0 0 14 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.62 3.92V0.709999H13.19V3.92H0.62Z" />
                                                </svg>
                                                    
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="remove-add-user">
                                        <div class="remove-add-user-content">
                                            <div class="sign">
                                                <svg  viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M0.68 8.92V5.71H6.32V0.519999H9.59V5.71H15.2V8.92H9.59V14.11H6.32V8.92H0.68Z" />
                                                </svg>
                                                    
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="d-flex flex-row flex-wrap justify-content-between align-items-center additional-users-content">
                                    
                               
                                    <div class="fw-bold h3 mb-0 ">
                                        <span>2 </span> additional users
                                    </div>

                                    <div class="fw-bold f-35">
                                        £100/yr
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="d-flex flex-row flex-wrap justify-content-between align-items-center add-users-content"> --}}
                                
                                
                               
                            {{-- </div> --}}
                        </div>
                    </div>

                    <div class="promotional-code billing-box-white mb-3">
                        <div class="">
                            
                            <div class="d-flex flex-row flex-wrap justify-content-between mb-4 align-items-center titles-numbering">
                                <p class="title-num f-40">3.</p>
                                <p class="f-40 mb-0">Promotional code</p>
                                <p class="f-30 mb-0 color-green fw-bold">10% off</p>
                            </div>
                            <form class="mb-0">
                                <div class="mb-3">
                                  {{-- <label for="exampleInputEmail1" class="form-label">Email address</label> --}}
                                  <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                                  
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                                
                            </form>
                        </div>
                    </div>
                    
                    <div class="payment-info billing-box-white mb-3">
                        <div class="add-code">
                            <div class="titles-numbering">
                                <p class="f-40 mb-4 title-num">4.</p>
                                <p class="f-40 mb-4">Enter payment info</p>
                            </div>                            
                            
                            <form class="mb-0">

                                <div class="row">
                                    <div class="col-12 col-xxl-10">
                                        <div class="mb-5">
                                            <p>Billing address</p>
                                            <div class="mb-1">
                                                    
                                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Business name*">
                                                
                                            </div> 
                                            <div class="mb-1">
                                                
                                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Address*">
                                                
                                            </div>
                                            <div class="mb-1">
                                            
                                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Apt/Suite/Other">
                                            
                                            </div>

                                            <div class="mb-1">
                                                <select class="form-select" aria-label="Default select example">
                                                    <option selected>Country</option>
                                                    <option value="1">One</option>
                                                    <option value="2">Two</option>
                                                    <option value="3">Three</option>
                                                </select>
                                            </div>
                                            <div class="row">
                                                <div class="col-12 col-md-6 mb-1 mb-md-0">
                                                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Country/State*">
                                                </div>
                                                <div class="col-12 col-md-6">
                                                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Post/ZIP code*">
                                                </div>
                                                
                                            </div>
                                        </div>
                                        
                                        <div class="mb-5">
                                            <p>Payment information</p>
                                            <div class="mb-1">
                                                <div class="row">
                                                    <div class="col-12 col-md-6 mb-1 mb-md-0">
                                                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="First name*">
                                                    </div>
                                                    <div class="col-12 col-md-6 mb-1 mb-md-0">
                                                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Last name*">
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                            
                                            <div class="mb-1">
                                                
                                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Email*">
                                                
                                            </div> 
                                            <div class="mb-1">
                                                
                                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Phone*">
                                                
                                            </div>
                                        </div>

                                        <div>
                                            <p>Payment information</p>
                                            <div class="mb-1">
                                               
                                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Card Number*">
                                                
                                            </div>
                                            <div class="mb-1">
                                                <div class="row">
                                                    <div class="col-12 col-md-6 mb-1 mb-md-0">
                                                        <input type="date" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" >
                                                    </div>
                                                    <div class="col-12 col-md-6 mb-1 mb-md-0">
                                                        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="CVV*">
                                                    </div> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-end mt-3">
                                            <button type="submit" class="btn btn-primary">Add Card</button>
                                        </div>
                                    </div>
                                </div>
                            </form>


                        </div>
                    </div>

                </div>
                <div class="right-side">
                    <div class="billing-box-white">
                        <div class="pb-4 reef-standard">
                            <div class="mb-4">
                                <div class="d-flex flex-row flex-wrap justify-content-between">
                                    <p class="fw-bold h2 mb-0">Reef Standard</p>
                                    <p class="fw-bold h2 mb-0">£50/mo</p>
                                </div>
                                <div>
                                    <p class="f-14">Contains <span>1</span> user</p>
                                </div>
                            </div>
                            
                            <div class="d-flex flex-row flex-wrap justify-content-between mb-2">
                                <p class="h3 mb-0">Additional users: <span>2</span></p>
                                <p class="h3 mb-0">£100/mo</p>
                            </div>
                            <div class="d-flex flex-row flex-wrap justify-content-between mb-2">
                                <p class="h3">Promo code:</p>
                                <p class="h3">£15/mo</p>
                            </div>
                        </div>
                        <div class="py-4 subtotal-users">
                            <div class="d-flex flex-row flex-wrap justify-content-between">
                                <p class="mb-0 h3 fw-bold">Subtotal (<span>3</span> users)</p> 
                                <p class="mb-0 h3 fw-bold">£135/mo</p>
                            </div>
                        </div>
                        <div class="py-4 my-1">
                            <p class="fw-bold h2 text-center mb-4">You’ll be charged <span> £135 </span>today.</p>
                            <div class="text-center f-14 mb-4">
                                Your plan will be <span>£135/mo</span> plus tax and will automatically renew until you cancel. You can do this in the invoicing tab on your portal. No refunds apply. The renewal price is subject to change, but we will notify you in advance.
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary disabled">Pay now</button>
                            </div>
                        </div>
                        <div class="text-center">
                            <a href="#">Terms</a> and <a href="#">Privacy Policy</a>
                        </div>

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

@endsection