@extends('layouts.app')

@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">Checkout</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Unga Group</a></li>
                                <li class="breadcrumb-item active">Checkout</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <form action="{{ route('checkout.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-xl-8">
                        <div class="custom-accordion">
                            <div class="card">
                                <a href="#checkout-billinginfo-collapse" class="text-dark" data-bs-toggle="collapse">
                                    <div class="p-4">

                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3">
                                                <i class="uil uil-receipt text-primary h2"></i>
                                            </div>
                                            <div class="flex-grow-1 overflow-hidden">
                                                {{-- <h5 class="font-size-16 mb-1">Billing Info</h5> --}}
                                                <p class="text-muted text-truncate mb-0">Enter delivery information</p>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <i class="mdi mdi-chevron-up accor-down-icon font-size-24"></i>
                                            </div>
                                        </div>

                                    </div>
                                </a>

                                <div id="checkout-billinginfo-collapse" class="collapse show">
                                    <div class="p-4 border-top">
                                        @if (session('message'))
                                            <div class="alert alert-success">
                                                <p>{{ session('message') }}</p>
                                            </div>
                                        @endif
                                        @if (session('danger'))
                                        <div class="alert alert-danger">
                                            <p>{{ session('danger') }}</p>
                                            {{-- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> --}}
                                        </div>
                                        @endif
                                        <div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="mb-3 mb-4">
                                                        <label class="form-label" for="billing-name">Collection Mode</label>
                                                        <select name="collection_mode" id="collection_mode"
                                                            onchange="collectionPoint(this.value)" class="form-control"
                                                            required>
                                                            <option value="" selected disabled>Select delivery mode</option>
                                                            <option value="delivery">Delivery</option>
                                                            <option value="collect">Collect</option>
                                                        </select>
                                                        @error('collection_mode')
                                                            <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="mb-3 mb-4">
                                                        <label class="form-label" for="billing-email-address">Sales
                                                            Area</label>
                                                        <select name="sales_area" id="" class="form-control"
                                                            onchange="getCollectionPoints(this.value)" required>
                                                            <option value="" selected disabled>Select sale area</option>
                                                            @foreach ($areas as $area)
                                                                <option value="{{ $area->code }}">{{ $area->area }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('sales_area')
                                                            <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="collect" id="collect">
                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="mb-3 mb-4">
                                                            <div>
                                                                <label for="">Collection Point</label>
                                                                <div class="spinner-border text-primary" role="status"
                                                                    id="collection_spinner" style="margin-left: 5px">
                                                                    <span class="sr-only">Loading...</span>
                                                                </div>
                                                            </div>
                                                            <select name="collection_point" id="points"
                                                                class="form-control">
                                                                <option value="" selected disabled>Select collection point
                                                                </option>
                                                            </select>
                                                            @error('collection_point')
                                                                <p class="text-danger">{{ $message }}</p>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <label class="form-label" for="billing-address">Track Number</label>
                                                        <input type="text" name="truck_no" class="form-control"
                                                            placeholder="Enter track number...">
                                                        @error('truck_no')
                                                            <p class="text-danger">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group mb-3">
                                                        <label for="">LPO </label>
                                                        <input type="text" class="form-control" name="lpo_number">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row my-4">
                            <div class="col">
                                <a href="{{ route('products.index') }}" class="btn btn-link text-muted">
                                    <i class="uil uil-arrow-left me-1"></i> Continue Shopping </a>
                            </div> <!-- end col -->
                            <div class="col">
                                <div class="text-end mt-2 mt-sm-0">
                                    <button type="submit" class="btn btn-success">
                                        <i class="uil uil-shopping-cart-alt me-1"></i> Submit Order </button>
                                </div>
                            </div> <!-- end col -->
                        </div> <!-- end row-->
                    </div>
                    <div class="col-xl-4">
                        <div class="card checkout-order-summary">
                            <div class="card-body">
                                <div class="p-3 bg-light mb-4">
                                    <h5 class="font-size-16 mb-0">Order Summary <span class="float-end ms-2">#MN0124</span>
                                    </h5>
                                </div>
                                <div class="table-responsive">
                                    <table class="table table-centered mb-0 table-nowrap">
                                        <thead>
                                            <th>Product Name</th>
                                            <th>Quantity</th>
                                            <th>Price</th>
                                        </thead>
                                        <tbody>
                                            @foreach ($items as $item)
                                                <tr>
                                                    <td>{{ $item->products->name }}</td>
                                                    <td>
                                                        <p class="text-muted mb-0 text-center">{{ $item->quantity }}</p>
                                                    </td>
                                                    <td>Ksh. {{ $item->total_price }}</td>
                                                </tr>
                                            @endforeach

                                            <tr>
                                                <td colspan="2">
                                                    <h5 class="font-size-14 m-0">Sub Total :</h5>
                                                </td>
                                                <td>
                                                    Ksh. {{ App\Helper\Helper::totalAmount() }}
                                                </td>
                                            </tr>
                                            <tr class="bg-light">
                                                <td colspan="2">
                                                    <h5 class="font-size-14 m-0">Total Tonnage :</h5>
                                                </td>
                                                <td>
                                                    {{ App\Helper\Helper::totalTonnage() }}
                                                </td>
                                            </tr>



                                            <tr class="bg-light">
                                                <td colspan="2">
                                                    <h5 class="font-size-14 m-0">Total Price:</h5>
                                                </td>
                                                <td>
                                                    Ksh. {{ App\Helper\Helper::totalAmount() }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- end row -->

        </div> <!-- container-fluid -->
    </div>
@endsection