@extends('backend.dashboard.layout.master')

@section('content')
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{translate('Order Details')}}</h1>
                    <!--end::Title-->

                </div>
                <!--end::Page title-->

            </div>
            <!--end::Toolbar container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Content container-->
            <div id="kt_app_content_container" class="app-container container-xxl">
                <!--begin::Order details page-->
                <div class="d-flex flex-column gap-7 gap-lg-10">
                    <div class="d-flex flex-wrap flex-stack gap-5 gap-lg-10 align-items-center">
                        <!--begin:::Tabs-->
                        <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-lg-n2 me-auto">
                            <li class="nav-item">
                                <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_summary">Order Summary</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_history">Order History</a>
                            </li>
                        </ul>
                        <!--end:::Tabs-->

                        <!--begin::Button-->
                        <a href="{{route('Orders.index')}}" class="btn btn-icon btn-light btn-active-secondary btn-sm ms-auto me-lg-n7">
                            <i class="ki-duotone ki-left fs-2"></i>
                        </a>
                        <!--end::Button-->

                        @if(in_array($order->status, [1, 2]))
                        <a href="{{route('Orders.edit',$order->id)}}" class="btn btn-success btn-sm me-lg-n7">{{translate('Edit Order')}}</a>
                        <a href="{{route('Orders.create')}}" class="btn btn-primary btn-sm">{{translate('Add New Order')}}</a>
                        <a href="" class="btn btn-dark btn-sm">{{translate('Add Transactions')}}</a>

                        @endif

                        <a href="{{route('Orders.billsorder',$order->id)}}" class="btn btn-dark btn-sm">{{translate('Print')}}</a>


                        <!-- Status Label + Select in flex container -->

                        <div class="d-flex flex-column ms-3" style="min-width: 160px;">
                            <label for="orderStatus" class="form-label mb-1">{{ translate('Status') }}</label>
                            <select class="form-select form-select-sm" name="status" id="orderStatus" data-order-id="{{ $order->id }}" required>
                                <option value="">{{ translate('Select status') }}</option>
                                <option value="1" {{ $order->status == 1 ? 'selected' : '' }}>Processing</option>
                                <option value="2" {{ $order->status == 2 ? 'selected' : '' }}>Pending</option>
                                <option value="3" {{ $order->status == 3 ? 'selected' : '' }}>Completed</option>
                                <option value="4" {{ $order->status == 4 ? 'selected' : '' }}>Cancelled</option>
                            </select>
                        </div>
                    </div>

                    <!--begin::Order summary-->
                    <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
                        <!--begin::Order details-->
                        <div class="card card-flush py-4 flex-row-fluid">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>{{translate('Order Details')}} (#{{ $order->id }})</h2>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                        <tbody class="fw-semibold text-gray-600">
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-calendar fs-2 me-2"></i>{{translate('Date Added')}}
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">{{ $order->created_at->format('d/m/Y') }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-wallet fs-2 me-2"></i>{{translate('Payment Method')}}
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">
                                                    {{ $order->payment->gateway ?? 'Not Available' }}

                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-truck fs-2 me-2"></i>{{translate('Shipping Method')}}
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">{{ $order->shipping_method ?? 'Flat Shipping Rate' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--end::Order details-->

                        <!--begin::Customer details-->
                        <div class="card card-flush py-4 flex-row-fluid">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>{{translate('Customer Details')}}</h2>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                        <tbody class="fw-semibold text-gray-600">
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-profile-circle fs-2 me-2"></i>{{translate('Customer')}}
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">
                                                    <div class="d-flex align-items-center justify-content-end">
                                                        <div class="symbol symbol-circle symbol-25px overflow-hidden me-3">
                                                            <div class="symbol-label">
                                                                <img src="{{ asset($order->customer->image ?? 'assets/media/avatars/300-23.jpg') }}" class="w-100" />
                                                            </div>
                                                        </div>
                                                        <a href="#" class="text-gray-600 text-hover-primary">{{ $order->customer->user->name ?? 'No Name' }}</a>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-sms fs-2 me-2"></i>{{translate('Email')}}
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">
                                                    <a href="#" class="text-gray-600 text-hover-primary">{{ $order->customer->user->email ?? 'No Email' }}</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-phone fs-2 me-2"></i>{{translate('Phone')}}
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">{{ $order->customer->user->phone ?? 'No Phone' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--end::Customer details-->

                        <!--begin::Documents-->
                        <div class="card card-flush py-4 flex-row-fluid">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2>Documents</h2>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                        <tbody class="fw-semibold text-gray-600">
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-devices fs-2 me-2"></i>Invoice
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">
                                                    <a href="#" class="text-gray-600 text-hover-primary">#INV-{{ str_pad($order->id, 6, '0', STR_PAD_LEFT) }}</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-truck fs-2 me-2"></i>Shipping
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">
                                                    <a href="#" class="text-gray-600 text-hover-primary">#SHP-{{ str_pad($order->id + 1000, 7, '0', STR_PAD_LEFT) }}</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">
                                                    <div class="d-flex align-items-center">
                                                        <i class="ki-duotone ki-discount fs-2 me-2"></i>Reward Points
                                                    </div>
                                                </td>
                                                <td class="fw-bold text-end">{{ $order->reward_points ?? 0 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--end::Documents-->
                    </div>

                    <!--end::Order summary-->
                    <!--begin::Tab content-->
                    <div class="tab-content">
                        <!--begin::Tab pane-->
                        <div class="tab-pane fade show active" id="kt_ecommerce_sales_order_summary" role="tab-panel">
                            <!--begin::Orders-->
                            <div class="d-flex flex-column gap-7 gap-lg-10">

                                <!--begin::Product List-->
                                <div class="card card-flush py-4 flex-row-fluid overflow-hidden">
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>Order #{{ $order->id }}</h2>
                                        </div>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="table-responsive">
                                            <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                                                <thead>
                                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                        <th class="min-w-175px">Product</th>
                                                        <th class="min-w-100px text-end">SKU</th>
                                                        <th class="min-w-70px text-end">Qty</th>
                                                        <th class="min-w-100px text-end">Unit Price</th>
                                                        <th class="min-w-100px text-end">Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600">
                                                    @php
                                                    $subtotal = 0;
                                                    @endphp

                                                    @foreach ($order->order_details as $detail)
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <a href="#" class="symbol symbol-50px">
                                                                    <span class="symbol-label" style="background-image:url({{ asset($detail->product->image ?? 'default.png') }});"></span>
                                                                </a>
                                                                <div class="ms-5">
                                                                    <span class="fw-bold text-gray-600 text-hover-primary">
                                                                        {{ $detail->product->getTranslation('name') }}
                                                                    </span>
                                                                    <div class="fs-7 text-muted">
                                                                        Delivery Date: {{ $order->type_date ?? '-' }}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td class="text-end">{{ $detail->product->id }}</td> {{-- SKU --}}
                                                        <td class="text-end">{{ $detail->qty }}</td>
                                                        <td class="text-end">${{ number_format($detail->price, 2) }}</td>
                                                        <td class="text-end">${{ number_format($detail->total, 2) }}</td>
                                                    </tr>
                                                    @if($detail->products_attrbuites || $detail->cycle_price || $detail->end_date || $detail->end_number || $detail->invoice_cycle)
                                                    <tr>
                                                        <td colspan="5">
                                                            <div class="accordion mt-4" id="productDetailsAccordion_{{ $detail->id }}">
                                                                <div class="accordion-item border rounded shadow-sm">
                                                                    <h2 class="accordion-header" id="heading_{{ $detail->id }}">
                                                                        <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_{{ $detail->id }}" aria-expanded="false" aria-controls="collapse_{{ $detail->id }}">
                                                                            <i class="ki-duotone ki-information fs-3 me-2 text-primary"></i>
                                                                            Additional Product Details
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapse_{{ $detail->id }}" class="accordion-collapse collapse" aria-labelledby="heading_{{ $detail->id }}" data-bs-parent="#productDetailsAccordion_{{ $detail->id }}">
                                                                        <div class="accordion-body pt-4">

                                                                            @if($detail->products_attrbuites)
                                                                            <div class="mb-4">
                                                                                <h6 class="text-gray-700 fw-semibold mb-2">
                                                                                    <i class="ki-duotone ki-badge fs-5 text-info me-2"></i>Attributes
                                                                                </h6>
                                                                                <div class="row">
                                                                                    @foreach(json_decode($detail->products_attrbuites, true) as $key => $value)
                                                                                    <div class="col-md-4 mb-2">
                                                                                        <div class="d-flex align-items-center">
                                                                                            <i class="ki-duotone ki-check-circle fs-6 text-success me-2"></i>
                                                                                            <span class="text-gray-600">{{ ucfirst($key) }}: <strong>{{ $value }}</strong></span>
                                                                                        </div>
                                                                                    </div>
                                                                                    @endforeach
                                                                                </div>
                                                                            </div>
                                                                            @endif

                                                                            <div class="row">
                                                                                @if($detail->cycle_price)
                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="d-flex align-items-center">
                                                                                        <i class="ki-duotone ki-wallet fs-5 text-warning me-2"></i>
                                                                                        <div>
                                                                                            <div class="fw-semibold text-gray-700">Cycle Price</div>
                                                                                            <div class="text-muted">${{ number_format($detail->cycle_price, 2) }}</div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @endif

                                                                                @if($detail->end_date)
                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="d-flex align-items-center">
                                                                                        <i class="ki-duotone ki-calendar fs-5 text-danger me-2"></i>
                                                                                        <div>
                                                                                            <div class="fw-semibold text-gray-700">End Date</div>
                                                                                            <div class="text-muted">{{ $detail->end_date }}</div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @endif

                                                                                @if($detail->end_number)
                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="d-flex align-items-center">
                                                                                        <i class="ki-duotone ki-hashtag fs-5 text-success me-2"></i>
                                                                                        <div>
                                                                                            <div class="fw-semibold text-gray-700">Cycle Count</div>
                                                                                            <div class="text-muted">{{ $detail->end_number }}</div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @endif

                                                                                @if($detail->invoice_cycle)
                                                                                <div class="col-md-3 mb-3">
                                                                                    <div class="d-flex align-items-center">
                                                                                        <i class="ki-duotone ki-repeat fs-5 text-primary me-2"></i>
                                                                                        <div>
                                                                                            <div class="fw-semibold text-gray-700">Invoice Cycle</div>
                                                                                            <div class="text-muted">{{ $detail->invoice_cycle }}</div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                @endif
                                                                            </div>

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @endif


                                                    @endforeach



                                                    @php
                                                    $subtotal = $order->order_details->sum('total');
                                                    $vatPercentage = $order->taxes_id ?? 0;
                                                    $vatValue = ($subtotal * $vatPercentage) / 100;
                                                    $discount = $order->discount ?? 0;
                                                    $grandTotal = $subtotal + $vatValue - $discount;
                                                    @endphp

                                                    <tr>
                                                        <td colspan="4" class="text-end">{{ translate('Subtotal') }}</td>
                                                        <td class="text-end">${{ number_format($subtotal, 2) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" class="text-end">{{ translate('VAT') }} ({{ $vatPercentage }}%)</td>
                                                        <td class="text-end">${{ number_format($vatValue, 2) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" class="text-end">{{ translate('Discount') }}</td>
                                                        <td class="text-end">- ${{ number_format($discount, 2) }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="4" class="text-end"><strong>{{ translate('Grand Total') }}</strong></td>
                                                        <td class="text-end"><strong>${{ number_format($grandTotal, 2) }}</strong></td>
                                                    </tr>


                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Product List-->

                            </div>
                            <!--end::Orders-->
                        </div>
                        <!--end::Tab pane-->
                        <!--begin::Tab pane-->
                        <div class="tab-pane fade" id="kt_ecommerce_sales_order_history" role="tab-panel">
                            <!--begin::Orders-->
                            <div class="d-flex flex-column gap-7 gap-lg-10">
                                <!--begin::Order history-->
                                <div class="card card-flush py-4 flex-row-fluid">
                                    <!--begin::Card header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>{{translate('Order History')}}</h2>
                                        </div>
                                    </div>
                                    <!--end::Card header-->
                                    <!--begin::Card body-->
                                    <div class="card-body pt-0">
                                        <div class="table-responsive">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                                                <thead>
                                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                        <th class="min-w-100px">{{ translate('Date Added') }}</th>
                                                        <th class="min-w-175px">{{ translate('Customer name') }}</th>
                                                        <th class="min-w-70px">{{ translate('Order Status') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="fw-semibold text-gray-600">
                                                    @foreach($Orders as $orderslist)
                                                    <tr>
                                                        <td>{{ $orderslist->created_at->diffForHumans() }}</td>
                                                        <td>{{ $orderslist->customer->user->name ?? 'N/A' }}</td>
                                                        <td class="">
                                                            @if ($orderslist->status == 1)
                                                            <div class="badge badge-light-success">{{ translate('Completed') }}</div>
                                                            @elseif($orderslist->status == 2)
                                                            <div class="badge badge-light-warning">{{ translate('Pending') }}</div>
                                                            @else
                                                            <div class="badge badge-light-danger">{{ translate('Cancelled') }}</div>

                                                            @endif
                                                        </td>
                                                    </tr>
                                                    @endforeach

                                                </tbody>
                                            </table>

                                            <!--end::Table-->
                                        </div>
                                    </div>
                                    <!--end::Card body-->
                                </div>
                                <!--end::Order history-->

                            </div>
                            <!--end::Orders-->
                        </div>
                        <!--end::Tab pane-->
                    </div>
                    <!--end::Tab content-->
                </div>
                <!--end::Order details page-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->

</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        $('#orderStatus').change(function() {
            let status = $(this).val();
            let orderId = $(this).data('order-id');

            if (status) {
                $.ajax({
                    url: '{{ route("order.updateStatus") }}'
                    , method: 'POST'
                    , data: {
                        _token: '{{ csrf_token() }}'
                        , order_id: orderId
                        , status: status
                    }
                    , success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success'
                                , title: 'Updated!'
                                , text: 'Order status has been updated successfully.'
                                , timer: 1500
                                , showConfirmButton: false
                            }).then(() => {

                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error'
                                , title: 'Error!'
                                , text: 'Failed to update order status.'
                            });
                        }
                    }
                    , error: function() {
                        Swal.fire({
                            icon: 'error'
                            , title: 'Error!'
                            , text: 'Something went wrong.'
                        });
                    }
                });
            }
        });
    });

</script>


@endsection