@extends('layouts/contentLayoutMaster')
@section('title', 'Jobs')

@section('vendor-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/animate/animate.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
@endsection

@section('page-style')
    <style>
        @media print {
            /* Hide everything except the printable area */
            body * {
                visibility: hidden !important;
            }

            #ticketArea, #ticketArea * {
                visibility: visible !important;
            }

            /* Make the printed section occupy the page cleanly */
            #ticketArea {
                position: static !important; /* keep normal flow */
                width: 100% !important;
                background: #fff !important;
            }

            /* Page setup */
            @page {
                size: A4;
                margin: 12mm;
            }

            * {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Don’t print UI chrome */
            #printTicketBtn, .btn, .navbar, .footer, .no-print {
                display: none !important;
            }
        }
    </style>
    {{-- Page Css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-sweet-alerts.css')) }}">
@endsection
@section('content')
    <section class="app-user-view-account">


        {{-- Page header / toolbar --}}
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
            <div class="d-flex align-items-center gap-1 flex-wrap">
                <h5 class="mb-0 d-flex align-items-center gap-2">
                    <span class="badge bg-dark">{{ $model->code }}</span>
                </h5>
            </div>

            <div class="d-flex align-items-center gap-1">
                <a href="{{ url()->previous() }}" class="btn btn-sm btn-outline-secondary">
                    <i data-feather="arrow-left" class="me-25"></i> Back
                </a>
                <button id="printTicketBtn" class="btn btn-sm btn-outline-primary">
                    <i data-feather="printer" class="me-25"></i> Print
                </button>
            </div>
        </div>

        <div id="ticketArea">
            @php
                $specsRaw = $model->specs ?? []; // or the JSON you have
                $specs = is_array($specsRaw) ? $specsRaw : (json_decode($specsRaw ?? '[]', true) ?? []);
                $now = now();
                $due = $model->due_at ?? null;
                $dueDiffMins = $due ? $now->diffInMinutes($due, false) : null; // negative if overdue
                $dueBadgeClass = $due
                ? ($dueDiffMins < 0 ? 'bg-danger' : ($dueDiffMins <=180 ? 'bg-warning text-dark' : 'bg-success' )) : 'bg-secondary'
                    ; $dueTitle=$due ? ($dueDiffMins < 0 ? 'Overdue by ' .$now->diffForHumans($due, ['parts' => 2, 'short'=>true,
                    'syntax'=>\Carbon\CarbonInterface::DIFF_ABSOLUTE])
                    : 'Due in '.$due->diffForHumans($now, ['parts' => 2, 'short'=>true]))
                    : 'No due date';
            @endphp

            {{-- Top: Details + Codes + Status --}}
            <div class="p-1 d-flex flex-column flex-md-row gap-2 rounded-3" style="background-color: white">
                <div class="d-flex flex-column">
                    @php
                        $orderItem = $model->orderItem;
                        $itemable = $orderItem?->itemable;
                        $isDesign    = $itemable && get_class($itemable) === \App\Models\Design::class;
                $isTemplate  = $itemable && get_class($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 && $itemable->linked_to_mockup =>
                   $itemable->getFirstMediaUrl('front-mockup-designs')
                   ?: $itemable->getFirstMediaUrl('none-mockup-designs'),

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

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

                    @endphp

                    <img
                        src="{{ $previewImage ?: asset('/images/item-photo.png') }}"
                        alt="item photo"
                        class="mb-2 rounded"
                        style="max-width: 500px; width: 100%; height: auto; object-fit: contain; background: #f8f8f8;"
                    >

                    @if($model->jobEvents->last()?->admin)
                        <div class="d-flex flex-column">
                            <div class="d-flex flex-column gap-1">
                                <p style="color: #424746; margin: 0; font-size: 16px">Last Operator:</p>
                                <div class="d-flex align-items-center gap-1">
                                    <img
                                        src="{{ $model->jobEvents->last()?->admin?->image?->getUrl() ?: asset('images/admin-avatar.png') }}"
                                        alt="Admin avatar"
                                        width="48" height="48"
                                        class="rounded-circle"
                                        style="object-fit:cover"
                                    />

                                    <div class="d-flex flex-column">
                                        <h5 style="color: #121212">{{ $model->jobEvents->last()?->admin?->name }}</h5>
                                        <p style="margin: 0; color: #424746">{{
                                    $model->jobEvents->last()?->admin?->roles->first()?->name }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <hr>
                    <div class="d-flex flex-column">
                        <div class="d-flex flex-column gap-1">
                            <p style="color: #424746; margin: 0; font-size: 16px">Order ID:</p>
                            <div class="d-flex align-items-center justify-content-between">
                                <p style="margin: 0; color: #121212">{{ $model->orderItem->order->order_number }}</p>
                                <a href="{{ route('orders.show',$model->orderItem->order->id) }}"
                                   style="margin: 0; color: #24B094; cursor: pointer">Go to Order</a>
                            </div>
                            <p style="color: #424746; margin: 0; font-size: 16px">Order Item ID:</p>

                            <div class="d-flex align-items-center justify-content-between">
                                <p style="margin: 0; color: #121212">{{ $model->orderItem->id }}</p>
                            </div>
                            <p style="color: #424746; margin: 0; font-size: 16px">Order Item Quantity:</p>

                            <div class="d-flex align-items-center justify-content-between">
                                <p style="margin: 0; color: #121212">{{ $model->orderItem->quantity }}</p>
                            </div>
                            @if($model->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: {{ $model->orderItem->color }};
                                "
                                    ></span>
                                    <span class="text-muted">{{ $model->orderItem->color }}</span>
                                </div>
                            @endif
                            {{--                            @if(--}}
                            {{--            $model->orderItem->itemable--}}
                            {{--        && get_class($model->orderItem->itemable) === \App\Models\Design::class--}}
                            {{--                     && $model->orderItem->itemable->linked_to_mockup--}}
                            {{--     )--}}

                            {{--                                <p style="color: #424746; margin: 0; font-size: 16px">Mockup Positions on Design:</p>--}}

                            {{--                                @foreach($model->orderItem->itemable->design_mockup_area as $index => $area)--}}
                            {{--                                    <div style="margin-bottom: 10px;">--}}
                            {{--                                        <p><strong>Area {{ $index + 1 }} ({{ $area['name'] ?? 'unknown' }}):</strong>--}}
                            {{--                                        </p>--}}
                            {{--                                        <ul style="padding-left: 20px; margin: 0;">--}}
                            {{--                                            <li>Top-Left X: {{ $area['p1x'] }}</li>--}}
                            {{--                                            <li>Top-Left Y: {{ $area['p1y'] }}</li>--}}
                            {{--                                            <li>Top-Right X: {{ $area['p2x'] }}</li>--}}
                            {{--                                            <li>Top-Right Y: {{ $area['p2y'] }}</li>--}}
                            {{--                                            <li>Bottom-Left X: {{ $area['p3x'] }}</li>--}}
                            {{--                                            <li>Bottom-Left Y: {{ $area['p3y'] }}</li>--}}
                            {{--                                            <li>Bottom-Right X: {{ $area['p4x'] }}</li>--}}
                            {{--                                            <li>Bottom-Right Y: {{ $area['p4y'] }}</li>--}}
                            {{--                                        </ul>--}}
                            {{--                                    </div>--}}
                            {{--                                @endforeach--}}
                            {{--                            @endif--}}
                        </div>
                    </div>
                    <hr>
                    @if($orderItem->itemable?->types)
                        <div class="d-flex flex-column">
                            <p style="color: #424746; margin: 0; font-size: 16px">Designs:</p>
                            <div class="d-flex flex-wrap align-items-start 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);

                                        // ✅ Colored preview saved on this specific order item
                                        $coloredPreview = null;

                                        if ($orderItem->color) {
                                            $coloredPreview = $orderItem->getMedia('order_item_previews')
                                                ->first(function ($media) use ($label, $orderItem) {
                                                    return strtolower((string) $media->getCustomProperty('type')) === strtolower((string) $label)
                                                        && (
                                                            ! $media->hasCustomProperty('color')
                                                            || strtolower((string) $media->getCustomProperty('color')) === strtolower((string) $orderItem->color)
                                                        );
                                                })
                                                ?->getUrl();
                                        }
                                    @endphp

                                    <div class="d-flex flex-column">
                                        <p style="margin: 0; color: #121212">{{ $label }} Design</p>

                                        <img
                                            class="rounded"
                                            style="max-height: 200px; max-width: 100%; width: auto; height: auto; object-fit: contain; background: #f8f8f8;"
                                            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>

                                        {{-- ✅ Colored download --}}
                                        @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
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
                {{-- Details --}}
                <div class="d-flex flex-column">
                    <div>
                        <p style="color: #424746; margin: 0; font-size: 18px">{{ $model->code }}</p>
                        <hr>
                        <h5 style="color: #121212; font-size: 25px">{{ $model->orderItem->orderable?->name }}</h5>
                        <p style="color: #424746; font-size: 15px">{{$model->orderItem->orderable?->description}}</p>
                        <div class="d-flex flex-column gap-2">
                            <div class="d-flex gap-2 gap-md-4">
                                <div class="d-flex gap-1 align-items-center">
                                    <p style="color: #424746; margin:0">Station:</p>
                                    <span class="rounded-3"
                                          style="color: #424746; background-color: #FAFBFC; padding: 7px">{{
                                    $model->station?->name }}</span>
                                </div>
                                <div class="d-flex gap-1 align-items-center">
                                    <p style="color: #424746; margin:0">Status:</p>
                                    <span class="rounded-3"
                                          style="color: #424746; background-color: #CED5D4; padding: 7px">{{
                                    $model->currentStatus?->name }}</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2 gap-md-4">
                                <div class="d-flex gap-1 align-items-center">
                                    <p style="color: #424746; margin:0">Priority:</p>
                                    <span class="rounded-3" @php use App\Enums\JobTicket\PriorityEnum;use Illuminate\Support\Str; $bg=match
                                    ($model->priority) {
                                    PriorityEnum::STANDARD => '#F8AB1B',
                                    PriorityEnum::RUSH => '#E74943',
                                    default => null,
                                    };
                                    @endphp

                                    <span @if($bg) style="color:white;background-color:{{ $bg }};padding:7px" @endif>
                                        {{ $model->priority?->label() }}
                                    </span>
                                </div>
                                <div class="d-flex gap-1 align-items-center">
                                    <p style="color: #424746; margin:0">Due Date:</p>
                                    <span class="rounded-3" style="color: #424746; padding: 7px">{{
                                    $model->due_at?->format("d/m/Y") }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Codes card --}}
                    <div class="row g-1 text-center mt-2">
                        @if($model->station_id && $model->current_status_id)
                            <div class="col-12">
                                {{-- Code128 --}}
                                <img src="{{ $model->qr_png_url }}"
                                     alt="QR"
                                     style="width:200px; height:auto; border:1px solid #ddd; border-radius:6px; padding:4px;">
                            </div>
                    </div>
                    <div class="row g-1 text-center mt-2">
                        <div class="col-12">
                            {{-- Code128 --}}
                            <img src="{{ $model->barcode_svg_url }}" alt="Code128"
                                 class="img-fluid border rounded p-2 w-100">
                        </div>
                    </div>
                    @endif
                    {{-- Specifications --}}
                    @php
                        $specsRaw = $model->specs ?? []; // or the JSON you have
                        $specs = is_array($specsRaw) ? $specsRaw : (json_decode($specsRaw ?? '[]', true) ?? []);
                    @endphp

                    @if(!empty($specs))
                        <div class="table-responsive mt-1">
                            <table class="table table-sm table-bordered">
                                <thead>
                                <tr>
                                    <th class="w-35">Specification</th>
                                    <th>Option</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($specs as $row)
                                    <tr>
                                        <th>{{ \Illuminate\Support\Str::headline((string)($row['spec_name'] ?? '')) }}</th>
                                        <td>{{ $row['option_name'] ?? '—' }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted mt-1">No specifications.</p>
                    @endif
                </div>
            </div>
        </div>

    </section>
@endsection


@section('vendor-script')
    {{-- Vendor js files --}}
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
    {{-- data table --}}
    <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/polyfill.min.js')) }}"></script>
@endsection

@section('page-script')

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    {{-- Page js files --}}
    <script src="{{ asset('js/scripts/pages/modal-edit-user.js') }}?v={{ time() }}"></script>
    <script src="{{ asset(mix('js/scripts/pages/app-user-view-account.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/pages/app-user-view.js')) }}"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    {{-- Page js files --}}
    <script src="{{ asset('js/scripts/pages/modal-edit-user.js') }}?v={{ time() }}"></script>
    <script src="{{ asset(mix('js/scripts/pages/app-user-view-account.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/pages/app-user-view.js')) }}"></script>
    {{--<script>--}}
    {{--    document.addEventListener('DOMContentLoaded', () => {--}}
    {{--        document.getElementById('printTicketBtn')?.addEventListener('click', () => {--}}
    {{--            window.open("{{ route('job-tickets.pdf', $model->id) }}", "_blank");--}}
    {{--        });--}}
    {{--    });--}}
    {{--</script>--}}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('printTicketBtn')?.addEventListener('click', (e) => {
                e.preventDefault();
                window.print();
            });
        });
    </script>

@endsection