@php use Illuminate\Support\Str; @endphp
@extends('layouts/contentLayoutMaster')
@section('title', 'Show Order')
@section('main-page', 'Orders')
@section('sub-page', 'Show Order')
@section('main-page-url', route("orders.index"))
@section('sub-page-url', route("orders.show",$model->id))
@section('vendor-style')
    <!-- Vendor CSS Files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('content')
    <div class="bg-white rounded-3 p-2">
        <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
            <div class="d-flex align-items-center flex-wrap gap-1">
                <span class="fs-6 text-dark fw-bold">Order Number:</span>
                <span class="fs-5 text-black fw-bold">{{ $model->order_number }}</span>
            </div>

            @if($model->status == \App\Enums\Order\StatusEnum::CONFIRMED)
                <button type="button" id="print-order" class="btn btn-outline-primary btn-sm">
                    <i data-feather="printer" class="me-25"></i> Print
                </button>
            @endif

            @if($model->status == \App\Enums\Order\StatusEnum::PREPARED)
                <form action="{{ route('ship-blu.request-pickup') }}" method="post" id="requestPickupForm">
                    @csrf
                    <input type="hidden" name="shipment_ids[]" value="{{ $model->shipment?->id }}">
                    <button type="submit"
                            class="btn btn-outline-primary btn-sm" @disabled($model->status != StatusEnum::PREPARED)>
                        Request To Pickup
                    </button>
                </form>

            @endif
        </div>

        <form>
            <div class="row">
                @php
                    $address = $model->orderAddress;
                @endphp
                @if($address)
                    <!-- Left Column -->
                    <div class="col-12 col-md-4">
                        <h5 class="mb-2 fs-16 text-black">Customer Details</h5>
                        <div class="mb-2">
                            <label class="form-label fw-bold">First Name</label>
                            <input type="text" class="form-control" name="first_name"
                                   value="{{ $model->orderAddress?->first_name }}" readonly>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-bold">Last Name</label>
                            <input type="text" class="form-control" name="last_name"
                                   value="{{ $model->orderAddress?->last_name }}" readonly>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-bold">Email</label>
                            <input type="email" class="form-control" name="email"
                                   value="{{ $model->orderAddress?->email }}"
                                   readonly>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-bold">Phone</label>
                            <input type="text" class="form-control" name="phone"
                                   value="{{ $model->orderAddress?->phone }}"
                                   readonly>
                        </div>


                        @if($address)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="mb-0 fs-16 text-black">
                                    {{ $address->type === 'pickup' ? 'Pickup Details' : 'Shipping Details' }}
                                </h5>
                            </div>

                            <span class="text-black fs-16 fw-bold mb-1">
                    {{ $address->type === 'pickup' ? 'Location:' : 'Address:' }}
                </span>

                            <div class="border rounded p-2 mb-2 text-black text-break">
                                @if($address?->type === 'pickup')
                                    {{ $address?->location_name }}<br>
                                    {{ $address?->state }}, {{ $address->country }}
                                @else
                                    {{ $address?->address_line }}, {{ $address->address_label }}<br>
                                    {{ $address?->state }}, {{ $address->country }}
                                @endif
                            </div>
                        @endif
                        <span class="text-black fs-16 fw-bold mb-1">Delivery Instructions:</span>
                        <div class="border rounded p-1 mb-2 text-black fs-5">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore
                            et dolore magna aliqua.
                        </div>


                        <div class="rounded p-1 d-flex align-items-center text-black"
                             style="background-color: #FCF8FC;">
                            <i data-feather="truck" class="me-2"></i>
                            <div>
                                <p class="fs-4">Estimated delivery time</p>
                                <div class="fs-16">Tomorrow, 2:00 PM - 4:00 PM</div>
                            </div>
                        </div>
                    </div>
                @endif
                <!-- Right Column -->
                <div class="col-12 col-md-8">
                    <div class="p-1 rounded" style="background-color: #FCF8FC;">
                        <p class="mb-1 fs-16 text-dark">Order Placed on:</p>
                        <p class="fs-16 text-black">{{ $model->created_at->format('F d, Y') }}</p>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-3 mb-1">
                        <div>
                            <label class="form-label fw-bold fs-16 text-black mb-0">Payment Status</label>
                            <p class="fw-bold fs-16 mb-0">
                                {{ $model->payment_status->label() }}
                            </p>
                        </div>

                        <div class="text-end">
                            <label class="form-label fw-bold fs-16 text-black mb-0">Payment Method</label>
                            <p class="fw-bold fs-16 mb-0">
                                {{ $model->paymentMethod?->name ?? 'Cash On Delivery' }}
                            </p>
                        </div>
                    </div>

                    @foreach ($model->orderItems as $orderItem)
                        @php
                            $product = $orderItem->itemable;

                            $isDesign    = $orderItem->itemable && get_class($orderItem->itemable) === \App\Models\Design::class;
                            $isTemplate  = $orderItem->itemable && get_class($orderItem->itemable) === \App\Models\Template::class;
                            $isDownload  = $orderItem->type === \App\Enums\Item\TypeEnum::DOWNLOAD;


                            $orderItemPreview =
                                $orderItem->getFirstMediaUrl('order_item_mockups')
                                ?: $orderItem->getFirstMediaUrl('order_item_previews');

                            $previewImage = match (true) {
                                filled($orderItemPreview)  && !$isDesign =>
                                    $orderItemPreview,

                                $isDesign && $orderItem->itemable->linked_to_mockup =>
                                    $orderItem->itemable->getFirstMediaUrl('front-mockup-designs')
                                    ?: $orderItem->itemable->getFirstMediaUrl('none-mockup-designs')
                                    ?: $orderItem->itemable->getFirstMediaUrl('back-mockup-designs'),

                                $isTemplate =>
                                    $orderItem->itemable?->getFirstMediaUrl('templates-preview')
                                    ?: $orderItem->itemable?->getFirstMediaUrl('templates'),

                                default =>
                                    $orderItem->itemable?->getFirstMediaUrl(
                                        Str::plural(Str::lower(class_basename($orderItem->itemable)))
                                    ),
                            };
                        @endphp

                        <div class="mb-1 border rounded p-1">
                            <div class="d-flex align-items-start justify-content-between">
                                <div class="d-flex">
                                    <img
                                        src="{{ $previewImage }}"
                                        class="me-3 rounded"
                                        alt="Product"
                                        style="width: 60px; height: 60px;"
                                    >

                                    <div>
                                        <div class="fw-bold text-black fs-16">
                                            {{ $product->name ?? 'No Product Found' }}
                                            <span class="badge ms-1 {{ $isDownload ? 'bg-info' : 'bg-success' }}">
                            {{ $isDownload ? 'Download' : 'Print' }}
                        </span>
                                        </div>

                                        <div class="text-dark fs-5">
                                            Qty: {{ $orderItem->quantity }}
                                        </div>

                                        @if($orderItem->color)
                                            <div class="text-dark small d-flex align-items-center mt-25">
                                                <span class="me-1">Color:</span>
                                                <span
                                                    class="rounded-circle border me-1"
                                                    style="width: 16px; height: 16px; display: inline-block; background-color: {{ $orderItem->color }};"
                                                ></span>
                                                <span class="text-muted">{{ $orderItem->color }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="text-end">
                                    @if($orderItem->discount_amount > 0)
                                        <div class="text-muted text-decoration-line-through small">
                                            {{ number_format(($orderItem->sub_total) ?? 0, 2) }}
                                        </div>
                                        <div class="fw-bold text-success">
                                            {{ number_format($orderItem->sub_total - $orderItem->discount_amount ?? 0, 2) }}
                                        </div>
                                        <div class="text-danger small">
                                            -{{ number_format($orderItem->discount_amount, 2) }}
                                        </div>
                                    @else
                                        <div class="fw-bold text-black">
                                            {{ number_format($orderItem->sub_total ?? 0, 2) }}
                                        </div>
                                    @endif
                                </div>
                            </div>

                            {{-- Types / Download Design Area --}}
                            @if($orderItem->itemable?->types)
                                <div class="d-flex flex-column mt-1">
                                    <p style="color: #424746; margin: 0; font-size: 16px">Designs:</p>
                                    <div class="d-flex flex-wrap align-items-center gap-1 justify-content-between mt-50">
                                        @foreach($orderItem->itemable->types as $type)
                                            @php
                                                $itemable      = $orderItem->itemable;
                                                $label         = $type->value->label();
                                                $useTemplate   = $isDesign && $itemable->template?->approach === 'without_editor';
                                                $downloadUrl   = ($useTemplate ? $itemable->template : $itemable)->getImageUrlForType($label);

                                                $coloredPreview = null;

                                                if ($orderItem->color) {

                                                    $coloredPreview = $orderItem->getMedia('order_item_previews')
                                                        ->first(fn($m) => $m->getCustomProperty('type') == $label)
                                                        ?->getUrl();
                                                }
                                            @endphp

                                            <div class="d-flex flex-column">
                                                <p style="margin: 0; color: #121212">{{ $label }} Design</p>
                                                <img
                                                    class="img-fluid rounded"
                                                    style="max-height: 200px"
                                                    src="{{ $downloadUrl }}"
                                                    alt="{{ $label }} item photo"
                                                >

                                                {{-- Original transparent download --}}
                                                <a href="{{ $downloadUrl }}"
                                                   download
                                                   target="_blank"
                                                   class="btn btn-sm btn-primary mt-2"
                                                >
                                                    <i data-feather="download" class="me-25"></i>
                                                    Download Design
                                                </a>


                                                @if($coloredPreview)
                                                    <a href="{{ $coloredPreview }}"
                                                       download
                                                       target="_blank"
                                                       class="btn btn-sm btn-outline-secondary mt-50 mb-2 d-flex align-items-center justify-content-center gap-50"
                                                    >
                <span
                    class="rounded-circle border"
                    style="width: 12px; height: 12px; display:inline-block; background-color: {{ $orderItem->color }}; flex-shrink:0;"
                ></span>
                                                        <i data-feather="download" class="me-25"></i>
                                                        Download with Color
                                                    </a>
                                                @endif

                                                <a href="{{ route('orders.order-items.production-file.download', $orderItem->id) }}"
                                                   class="btn btn-sm btn-outline-dark mt-1">
                                                    <i data-feather="printer" class="me-25"></i>
                                                    Download Production File with QR
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach

                    {{-- <div class="mb-3 border-bottom pb-2">
                        <div class="d-flex align-items-start justify-content-between">
                            <div class="d-flex">
                                <img src="{{ asset('images/banner/banner-1.jpg') }}" class="mx-1 rounded" alt="Product"
                                    style="width: 60px; height: 60px;">
                                <div>
                                    <div class="fw-bold text-black fs-16">Product Name 1</div>
                                    <div class="text-dark fs-5">Qty: 2</div>
                                </div>
                            </div>
                            <div class="text-end">
                                <div class="fw-bold text-black">$40.00</div>
                            </div>
                        </div>
                    </div> --}}

                    <h5 class="mt-3 mb-1 text-black fs-16">Pricing Details</h5>
                    <div class="d-flex justify-content-between mb-1">
                        <span class="text-dark fs-16 fw-bold">Subtotal</span>
                        <span class="fs-4 text-black fw-bold"> {{ $model->subtotal }} </span>
                    </div>
                    <div class="d-flex justify-content-between mb-1">
                        <span class="text-dark fs-16 fw-bold">Discount</span>
                        <span class="fs-16 text-black">-{{ $model->discount_amount }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-1">
                    <span class="text-dark fs-16 fw-bold">
                        Delivery
                        <i data-feather="info" data-bs-toggle="tooltip"
                           title="Delivery charges may vary based on location."></i>
                    </span>
                        <span class="fs-16 text-black"> {{$model->delivery_amount}}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-1">
                    <span class="text-dark fs-16 fw-bold">
                        Tax
                        <i data-feather="info" data-bs-toggle="tooltip"
                           title="Tax is calculated as per applicable laws."></i>
                    </span>
                        <span class="fs-16 text-black">{{ $model->tax_amount }}</span>
                    </div>

                    <hr class="border-dashed my-1">

                    <div class="d-flex justify-content-between fw-bold fs-5 mb-3">
                        <span class="fs-4 text-black ">Total</span>
                        <span class="fs-4 text-black fw-bold"> {{$model->total_price}}</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Order Status</label>
                        <div class="d-flex align-items-center status-pill justify-content-center">
                            <div class="status-icon me-1">
                                <i data-feather="check"></i>
                            </div>
                            <span class="status-text">{{ $model->status->label() }}</span>
                        </div>
                    </div>

                    <div class="d-flex gap-2 justify-content-end ">
                        <a class="btn btn-primary" href="{{ route('orders.edit',$model->id) }}">Edit Order</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/forms/repeater/jquery.repeater.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
    <script !src="">
        handleAjaxFormSubmit("#requestPickupForm", {
            successMessage: "Request Pickup done successfully"
        })
    </script>
    <script>
        $(document).on('click', '#print-order', function () {
            $.ajax({
                url: "{{ route('orders.printOrder',$model) }}",
                method: "GET",
                success: function (response) {
                    // Create hidden printable iframe
                    const printWindow = window.open('', '', 'width=900,height=650');
                    printWindow.document.write(`
                <html>
                    <head>
                        <title>Confirmed Order</title>
                        <style>
                            body { font-family: Arial, sans-serif; }
                            table { border-collapse: collapse; width: 100%; }
                            th, td { border: 1px solid #ccc; padding: 5px; }
                            h3 { margin-bottom: 5px; }
                        </style>
                    </head>
                    <body>
                        ${response.html}
                        <script>
                            window.onload = function() {
                                window.print();
                                setTimeout(() => window.close(), 500);
                            };
                        <\/script>
                    </body>
                </html>
            `);
                    printWindow.document.close();
                },
                error: function () {
                    alert('❌ Failed to load confirmed orders for printing.');
                }
            });
        });
    </script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
@endsection