@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->visual_id}}</a></span>
                        <span style="background-color:{{$orders->order_status_color}}"
                              class="badge rounded-pill">{{$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>
                            {{$dateCreated}}
                        </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>
                            {{optional(optional($orders)->customers)->phone}}
                        </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->visual_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