@extends('components.dashboard.layouts.master')

@section('styles')
    @stack('datatableStyles')
@endsection

@section('title')
    {{ __('dashboard.order_summary') }}
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row"></div>
            <div class="content-body">
                <section class="order-details-wrapper">
                    <x-dashboard.layouts.breadcrumb :now="$order->serial_number">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.orders.index') }}">
                                {{ __('dashboard.orders') }}
                            </a>
                        </li>
                    </x-dashboard.layouts.breadcrumb>

                    <!-- Order Summary -->
                    <div class="col-12 mt-3">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('dashboard.order_summary') }}</h4>
                            </div>
                            <div class="card-body row">
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.serial_number') }}</label>
                                    <p>{{ $order->serial_number }}</p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.created_at') }}</label>
                                    <p>{{ $order->created_at->translatedFormat('Y-m-d H:i a') }}</p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.status') }}</label>
                                    <p>
                                        @php use App\Enum\OrderStatusEnum; @endphp
                                        <span class="badge {{ OrderStatusEnum::from($order->status)->badgeClass() }}">
                                        {{ OrderStatusEnum::from($order->status)->label() }}
                                    </span>
                                    </p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.payment_method') }}</label>
                                    <p>
                                          {{ __($order->payment_method) }}
                                    </p>
                                </div>

                                <div class="col-md-3">
                                    <label>{{ __('dashboard.total') }}</label>
                                    <p><strong>{{ $order->total }}</strong></p>
                                </div>
                            </div>
                        </div>

                        <!-- User & Address Details -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('dashboard.user_details') }}</h4>
                            </div>
                            <div class="card-body row">
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.name') }}</label>
                                    <p>{{ $order->user->name ?? '--' }}</p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.country') }}</label>
                                    <p>
                                        {{ $order->address->country ?? '--' }}
                                    </p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.city') }}</label>
                                    <p>
                                       {{ $order->address->city ?? '--' }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Products List -->
                        <div class="card mt-3">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('dashboard.products_list') }}</h4>
                            </div>
                            <div class="card-body">
                                @foreach($order->products as $op)
                                    <div class="row mb-3 text-center">
                                        <!-- Product Name -->
                                        <div class="col-md-3">
                                            <label>{{ __('dashboard.name') }}</label>
                                            <p>{{$op->name }}</p>
                                        </div>

                                        <!-- Price -->
                                        <div class="col-md-2">
                                            <label>{{ __('dashboard.price') }}</label>
                                            <p>{{ $op->pivot->price }}</p>
                                        </div>

                                        <!-- Quantity -->
                                        <div class="col-md-2">
                                            <label>{{ __('dashboard.quantity') }}</label>
                                            <p>{{ $op->pivot->quantity }}</p>
                                        </div>

                                        <!-- Sizes -->
                                        <div class="col-md-2">
                                            <label>{{ __('dashboard.sizes') }}</label>
                                            <p>
                                                @foreach($op->sizes as $size)
                                                    {{ $size->name }}{{ !$loop->last ? ', ' : '' }}
                                                @endforeach
                                            </p>
                                        </div>

                                        <!-- Colors -->
                                        <div class="col-md-3">
                                            <label>{{ __('dashboard.colors') }}</label>
                                            <div class="d-flex flex-wrap justify-content-center">
                                                @foreach($op->colors as $color)
                                                    <div class="color-circle"
                                                         style="width:25px; height:25px; border-radius:50%;
                        background-color: {{ $color->code }};
                        border:1px solid #ccc;
                        margin: 2px;">
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>

                                        <!-- Product Image -->
                                        <div class="col-md-2">
                                            @if($op->hasMedia('images'))
                                                @foreach($op->getMedia('images') as $image)
                                                <img src="{{ $image->getUrl() }}"
                                                     alt="{{ $op->name }}"
                                                     class="img-fluid dataTableImage"
                                                     style="width:60px; height:60px; border-radius:5px;">
                                                @endforeach
                                            @else
                                                <span>--</span>
                                            @endif
                                        </div>

                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Change Order Status -->
                        <div class="card mt-4 shadow-sm border-0">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('dashboard.change_status') }}</h4>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('admin.orders.change-status', $order->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')

                                    <div class="mb-3">
                                        <select name="status" id="status" class="form-select form-select-lg">
                                            @foreach(OrderStatusEnum::cases() as $status)
                                                <option value="{{ $status->value }}"
                                                        @if($order->status === $status->value) selected @endif>
                                                    {{ $status->label() }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <button type="submit" class="btn btn-success btn-lg w-50 mt-2">
                                        <i class="fa fa-check-circle me-2"></i> {{ __('dashboard.update_status') }}
                                    </button>
                                </form>
                            </div>
                        </div>

                        <!-- Approval/Reject Message -->
                        @if($order->msg)
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.message_for_action') }}</h4>
                                </div>
                                <div class="card-body">
                                    <p>{{ $order->msg }}</p>
                                </div>
                            </div>
                        @endif

                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @stack('datatableScripts')
    <script>
        // Click to view image fullscreen
        $('.dataTableImage').on('click', function () {
            openFullscreen(this);
        });

        function openFullscreen(elem) {
            if (elem.requestFullscreen) elem.requestFullscreen();
            else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen();
            else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
            else if (elem.msRequestFullscreen) elem.msRequestFullscreen();
        }
    </script>
@endsection