@extends('layouts.front_main')
@section('title', $page_name)

@if(isset($page) && $page)
   @include('front.partials._meta_properties_page')

@endif
@section('content')
<div class="page-wrapper"> 
    @include('front.partials._breadcrumb')

    <section class="standard-section your-basket-section">
        <div class="container">
            <div class="inside-backet-wrapper">
                <div class="row g-4 align-items-center justify-content-center">
                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <i class="fa fa-shopping-cart active icon-basket"></i>
                        <span>1. - Your Basket</span>
                    </div>

                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <i class="fa fa-shopping-bag icon-basket"></i>
                        <span>2. - Checkout</span>
                    </div>

                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <i class="fa fa-credit-card icon-basket"></i>
                        <span>3. - Payment</span>
                    </div>

                    <div class="col-12 col-sm-6 col-lg-4 col-xl-3">
                        <i class="fa fa-check icon-basket"></i>
                        <span>4. - Order Complete</span>
                    </div>
                </div>
            </div>

            <div class="table-responsive cart pb-4 pb-lg-5">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="col-md-7">Product Description</th>
                            <th class="col-md-1">Quantity</th>
                            <th class="col-md-2">Price</th>
                            <th class="col-md-2">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{$packet->title}}</td>
                            <td>1</td>
                            <td class="updateableprice">£{{$packet->price}}</td>
                            <td class="updateableprice">£{{$packet->price}}</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><b>Subtotal</b></td>
                            <td class="updateableprice">£{{$packet->price}}</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>VAT @ 20%</td>
                            <td>£0.00</td>
                        </tr>
                      
                        <tr>
                            <td></td>
                            <td></td>
                            <td><b>Total</b></td>
                            <td class="updateableprice">£{{$packet->price}}</td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>

            <form method="POST" action="{{route('submit_checkout',['itemcode' => $packet->slug])}}">
                @csrf
                <div class="row py-4">
                    <div class="col-12 offset-0 col-md-4 offset-md-8">
                        <div class="discount">
                            <label class="form-label">Discount Code</label>
                            <input class="form-control" name="discount_code" placeholder="Enter Discount Code Here">
                            @if(session('error_code'))
                                <div class="alert alert-danger small">{{session('error_code')}}</div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="d-flex flex-wrap justify-content-between align-items-center">
                    <p class="mb-0">
                        <a href="#" class="btn grey with-icon">
                            <i class="fa fa-backward"></i>
                            <span>Back to Products</span>
                        </a>
                    </p>
                    <p class="mb-0">

                        <button type="submit" class="btn blue with-icon">
                            <i class="fa fa-shopping-bag"></i>
                            <span>Checkout</span>
                        </button>
                    </p>
                </div>
            </form>
        </div>
    </section>

</div>


@endsection




@push('scripts')

@endpush