@php
    use Gloudemans\Shoppingcart\Facades\Cart;
@endphp
@extends('snit.layouts.app')

@section('content')
    <!-- Bordered Table -->


    <div class="d-block d-md-flex ">
        <div class="m-4 w-md-full col-md-6">
            <h6 class="text-white">My information</h6>
            {{-- Delivery Information section --}}
            <div class="card">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <x-input-errors :messages="$errors->all()" />
                        </div>
                    @endif

                    <form id="formAccountSettings" method="post" action="{{ route('guest.checkout.prepare') }}"> @csrf
                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <label for="firstName" class="form-label capitalize">
                                    <small>First Name</small>
                                    <small class="text-red-500">*</small>
                                </label>
                                <input value="{{ old('firstName') }}" class="form-control form-control-sm" type="text"
                                    id="firstName" name="firstName" autofocus />
                                <small><small>
                                        <x-input-single-error name='fname' />
                                    </small></small>
                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="lastName" class="form-label capitalize">
                                    <small>Last Name</small>
                                    <small class="text-red-500">*</small></label>
                                <input value="{{ old('lastName') }}" class="form-control form-control-sm" type="text"
                                    name="lastName" id="lastName" />
                                <small><small>
                                        <x-input-single-error name='lname' />
                                    </small></small>

                            </div>

                            <div class="mb-3 col-md-12 ">
                                <label for="email" class="form-label capitalize">
                                    <small>E-mail</small>
                                    <small class="text-red-500">*</small>
                                </label>
                                <input value="{{ old('email') }}" class="form-control form-control-sm" type="text"
                                    id="email" name="email" placeholder="john.doe@example.com" />
                                <small><small>
                                        <x-input-single-error name='email' />
                                    </small></small>

                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label capitalize" for="phoneNumber">
                                    <small>Phone Number</small>
                                    <small class="text-red-500">*</small>
                                </label>
                                <div class="input-group input-group-merge">
                                    {{-- <span class="input-group-text">US (+1)</span> --}}
                                    <input value="{{ old('phoneNumber') }}" type="tel" id="phoneNumber" maxlength="11"
                                        placeholder="eg. +234123456789" name="phoneNumber"
                                        class="form-control form-control-sm" />
                                </div>
                                <small><small>
                                        <x-input-single-error name='phone' />
                                    </small></small>

                            </div>

                            <div class="mb-3 col-md-6">
                                <label for="address" class="form-label capitalize"><small>Address</small>
                                    <small class="text-info-500">(Optional)</small>
                                </label>
                                <input value="{{ old('address') }}" type="text" class="form-control form-control-sm"
                                    id="address" name="address" placeholder="Address" />
                                <small><small>
                                        <x-input-single-error name='address' />
                                    </small></small>

                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="state" class="form-label capitalize">
                                    <small>State</small>
                                    <small class="text-red-500">*</small></label>
                                <input value="{{ old('state') }}" class="form-control form-control-sm" type="text"
                                    id="state" name="state" placeholder="California" />
                                <small><small>
                                        <x-input-single-error name='state' />
                                    </small></small>

                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="country" class="form-label capitalize">
                                    <small>Country</small>
                                    <small class="text-red-500">*</small>
                                </label>

                                <input class="form-control" id="nation" name="nation" list="nations"
                                    value="{{ old('nation', 'Nigeria') }}"
                                    placeholder="Enter a new publisher name eg.ACME Inc." />
                                <x-input-single-error name="nation" />

                                <datalist id='nations'>
                                    @foreach ($nations as $nation)
                                        <option value="{{ $nation->name }}">
                                            {{ $nation->name }}</option>
                                    @endforeach
                                </datalist>
                            </div>
                        </div>


                        <div class="my-3 col-md-12">
                            <legend class="text-xs">
                                <span>Student Data</span>
                                <small class="text-red-500">
                                    (This section is compulsory for students) *
                                    </s>
                            </legend>

                            {{-- <hr> --}}
                            <div class="mb-3">
                                <label for="organization" class="form-label capitalize">
                                    <small> Organization / Institution<small class="text-red-500">*</small></small>
                                </label>
                                <input type="text" class="form-control form-control-sm" id="organisation"
                                    list="organisationslist" name="organisation" value="{{ old('organisation') }}"
                                    placeholder="Enter your valid institution name, if you can't find it in our list of organisations" />

                                <datalist id="organisationslist" class="select2">
                                    {{-- <option value="">Select Organisation
                                    </option> --}}
                                    @foreach ($orgs as $org)
                                        {{-- @if ($org->name == old('organisation'))
                                            <option selected value="{{ $org->id }}">
                                                {{ $org->name }}</option>
                                        @else --}}
                                        <option value="{{ $org->name }}">
                                            {{ $org->name }}</option>
                                        {{-- @endif --}}
                                    @endforeach
                                </datalist>
                            </div>

                            <div class="my-2 col-md-6">
                                <label for="text" class="form-label capitalize">
                                    <span>Matric No. <span class="text-red-500">*</span></span> <br>

                                    <small class="text-red-500">If you don't have a matric number, or you're not a student,
                                        kindly provide your email address instead</small>
                                </label>
                                <input class="form-control form-control-sm" type="text" id="mat_num" name="mat_num"
                                    value="{{ old('mat_num') }}" placeholder="Enter your valid Matric Number" />
                                <small><small>
                                        <x-input-single-error name='mat_num' />
                                    </small></small>
                            </div>

                        </div>


                        <div class="my-4">
                            <button type="submit" class="btn btn-sm bg-gray-800 text-white me-2">
                                Continue to Payment
                            </button>
                            <button type="reset" class="btn  btn-sm btn-outline-secondary">Cancel</button>
                        </div>

                        <div class="my-5">
                            <div class="information-section">
                                <p class="text-red-500 text-xs"> Important : Kindly review
                                    our Purchase Guide</p>
                                <ul>
                                    <li class="font-light text-xs text-red-500 my-2">
                                        All Students purchasing materials from
                                        instructors in the same institution as them must
                                        provide their Matric Number. <br>
                                        This vital information helps the instructors
                                        keep
                                        track of the students that have purchased
                                        the recommended reading materials.</li>
                                    <li class="text-xs font-light text-blue-500">If
                                        a student does not have a matric
                                        number,
                                        their NIN (National Identification Number)
                                        is also accepted, as a means of
                                        identification.</li>
                                </ul>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- order summary section --}}
        <div class=" m-4 w-md-full">
            <h6 class="text-white">Order Summary</h6>
            <div class="card">
                {{-- <h5 class="card-header">Borderless Table</h5> --}}
                <div class="table-responsive text-nowrap">
                    <table class="table table-borderless">
                        <tbody>
                            @foreach (Cart::content() as $cartItem)
                                <tr class="">
                                    <td class="">
                                        <img src="/storage/{{ $cartItem->model->doc->front_cover ?? ' ' }}"
                                            alt="{{ $cartItem->model->doc->front_cover ?? 'No Image' }}" class="src"
                                            width="100" />
                                    </td>
                                    <td>
                                        <div><span
                                                class="text-xs font-semibold text-gray-700">{{ $cartItem->name }}</span>
                                        </div>
                                        <div><span class="text-xs"> Vendor:
                                                {{ $cartItem->options->book_author->presentFullName() }}</span>
                                        </div>
                                        <div>
                                            <span class="currency_symbol font-thin text-gray-800 text-sm">
                                                <span class="currency">₦ </span>
                                                <span>{{ $cartItem->price }}</span>
                                            </span>
                                        </div>
                                    </td>
                                    {{-- qty adjustment button --}}
                                    {{-- <td class="ms-5">
                                        <div class="input-group w-full">
                                            <button class="btn btn-outline-secondary btn-sm" type="button"
                                                id="button-addon1">-</button>
                                            <input type="number"
                                                class="text-center font-semibold form-control form-control-sm"
                                                value="{{ $cartItem->qty }}" aria-describedby="button-addon2" />
                                            <button class="btn btn-sm btn-outline-secondary" type="button"
                                                id="button-addon2">+</button>
                                        </div>
                                    </td> --}}

                                    <td>
                                        <form action="{{ route('guest.cart-destroy', ['item_id' => $cartItem->id]) }}"
                                            method="post"> @csrf
                                            @method('delete')
                                            <i onclick="this.closest('form').submit()"
                                                class="bx bx-trash text-red-600 cursor-pointer trash-noise-maker"></i>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach

                        <tfoot class="pt-5 ">
                            <tr>
                                <td class="pt-5"></td>
                                <td class="pt-5 capitalize text-gray-500">
                                    <span class="text-xs">total Items in Order</span>
                                </td>
                                <td class="pt-5 text-gray-800" colspan="2">
                                    <span class="text-xs">
                                        {{ Cart::content()->count() }}
                                    </span>
                                </td>
                            </tr>

                            <tr>
                                <td class="pt-2"></td>
                                <td class="capitalize text-gray-500">
                                    <span class="text-xs">subtotal</span>
                                </td>
                                <td class="text-gray-800" colspan="2">
                                    <span class="text-xs">
                                        <span class="currency_symbol">
                                            ₦</span>
                                        {{ Cart::subTotal() }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class=""></td>
                                <td class="capitalize text-gray-500">
                                    <span class="text-xs">Service Charge</span>
                                </td>
                                <td class="text-gray-800">
                                    <span>
                                        <span class="currency_symbol text-xs"> ₦</span>
                                        <span class="text-xs">{{ Cart::tax() }}</span></span>
                                </td>
                            </tr>

                            <tr>
                                <td class=""></td>
                                {{-- <td  class="pt-5"></td> --}}
                                <td class="pt-3 capitalize text-gray-500 text-xs">Total
                                </td>
                                <td class="text-gray-800">
                                    <span class="currency_symbol"> ₦</span>
                                    <span class="text-xs">{{ Cart::total() }}</span>
                                </td>
                            </tr>
                        </tfoot>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
    <!--/ Bordered Table -->
@endsection