@extends('layouts.app')

@section('contents')
    <!-- content -->
    <div class="content ">

        <div class="mb-4">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{route('dashboard.index')}}">
                            <i class="bi bi-globe2 small me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{route('order-list')}}">
                            <i class="bi bi-globe2 small me-2"></i> Orders
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Detail</li>
                </ol>
            </nav>
        </div>

        <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="mb-5 d-flex align-items-center justify-content-between">
                            <span>Order No : <a href="#">{{$orders->printavo_id}}</a></span>
                            <span style="background-color:{{$orders->order_status_color}}">{{$orders->order_status_name}}</span>
                        </div>
                        <div class="row mb-5 g-4">
                            <div class="col-md-3 col-sm-6">
                                <p class="fw-bold">Order Created at</p>
                                {{$orderFormatted->created_at}}
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <p class="fw-bold">Name</p>
                                {{$orders->customer_name}}
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <p class="fw-bold">Email</p>
                                {{$email->email}}
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <p class="fw-bold">Contact No</p>
                                000-000-0000
                            </div>
                        </div>
                        <div class="row g-4">
                            <div class="col-md-6 col-sm-12">
                                <div class="card">
                                    <div class="card-body d-flex flex-column gap-3">
                                        <div class="d-flex justify-content-between">
                                            <h5 class="mb-0">Billing Address</h5>
                                            <a href="#">Edit</a>
                                        </div>
                                        <div>Name :
                                            {{$orderFormatted->order_addresses_attributes['0']->customer_name}}</div>
                                        <div>
                                            {{$orderFormatted->order_addresses_attributes['0']->address1}}</div>
                                        <div>
                                            {{$orderFormatted->order_addresses_attributes['0']->city}}</div>
                                        <div>
                                            {{$orderFormatted->order_addresses_attributes['0']->state}} 
                                        </div>
                                        <div>
                                            {{$orderFormatted->order_addresses_attributes['0']->country}} 
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 mt-4 mt-lg-0">
                <div class="card mb-4">
                    <div class="card-body">
                        <h6 class="card-title mb-4">Price</h6>
                        <div class="row justify-content-center mb-3">
                            <div class="col-4 text-end">Sub Total :</div>
                            <div class="col-4">{{$orders->order_subtotal}}</div>
                        </div>
                        <div class="row justify-content-center mb-3">
                            <div class="col-4 text-end">Shipping :</div>
                            <div class="col-4">Free</div>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-4 text-end">
                                <strong>Total :</strong>
                            </div>
                            <div class="col-4">
                                <strong>{{$orders->order_total}}</strong>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title mb-4">Invoice</h6>
                        <div class="row justify-content-center mb-3">
                            <div class="col-6 text-end">Invoice No :</div>
                            <div class="col-6">
                                <a href="#">{{$orders->printavo_id}}</a>
                            </div>
                        </div>
                        <div class="text-center mt-4">
                            <button class="btn btn-outline-primary"><a href="{{$orders->pdf}}" target=_blank >Invoice PDF</a></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card widget">
            <h5 class="card-header">Order Items</h5>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                        <tr>
                            <th>Item ID</th>
                            <th>Photo</th>
                            <th>Style Description</th>
                            <th>Style Number </th>
                            <th>Color</th>
                            <th>Size Other</th>
                            <th>Size XS</th>
                            <th>Size S</th>
                            <th>Size M</th>
                            <th>Size L</th>
                            <th>Size XL</th>
                            <th>Size 2XL</th>
                            <th>Size 3XL</th>
                            <th>Total Quantities</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            @foreach($orders->items as $item)
                                <td>{{$item->item_id}}</td>
                                <td>
                                    <a href="#">
                                        <img src="../../assets/images/products/3.jpg" class="rounded" width="60" alt="...">
                                    </a>
                                </td>
                                <td>{{$item->style_description}}</td>
                                <td>{{$item->style_number}}</td>
                                <td>{{$item->color}}</td>
                                <td>{{$item->size_other}}</td>
                                <td>{{$item->size_xs}}</td>
                                <td>{{$item->size_s}}</td>
                                <td>{{$item->size_m}}</td>
                                <td>{{$item->size_l}}</td>
                                <td>{{$item->size_xl}}</td>
                                <td>{{$item->size_2xl}}</td>
                                <td>{{$item->size_3xl}}</td>
                                <td>{{$item->total_quantities}}</td>
                        </tr>
                        @endforeach
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <!-- ./ content -->
@endsection
@push('script')

@endpush