@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="special-order-details-wrapper">
                    <x-dashboard.layouts.breadcrumb :now="$specialOrder->serial_number">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.special-orders.index') }}">
                                {{ __('dashboard.special_orders') }}
                            </a>
                        </li>
                    </x-dashboard.layouts.breadcrumb>

                    <!-- Special 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>{{ $specialOrder->serial_number }}</p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.product_name') }}</label>
                                    <p>{{ $specialOrder->product_name }}</p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.quantity') }}</label>
                                    <p>{{ $specialOrder->quantity }}</p>
                                </div>
                                <div class="col-md-3">
                                    <label>{{ __('dashboard.material') }}</label>
                                    <p>{{ $specialOrder->material }}</p>
                                </div>

                                <div class="col-md-3 mt-2">
                                    <label>{{ __('dashboard.sizes') }}</label>
                                    <p>{{ $specialOrder->sizes }}</p>
                                </div>
                                <div class="col-md-3 mt-2">
                                    <label>{{ __('dashboard.colors') }}</label>
                                    <div class="d-flex flex-wrap">
                                        @foreach($specialOrder->colors as $color)
                                            <div class="color-circle"
                                                 style="width:25px; height:25px; border-radius:50%;
                                                    background-color: {{ $color }};
                                                    border:1px solid #ccc; margin:2px;">
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-md-6 mt-2">
                                    <label>{{ __('dashboard.notes') }}</label>
                                    <p>{{ $specialOrder->notes }}</p>
                                </div>

                                <div class="col-md-3 mt-2">
                                    <label>{{ __('dashboard.status') }}</label>
                                    <p>
                                    <span class="badge {{ \App\Enum\OrderStatusEnum::from($specialOrder->status)->badgeClass() }}">
                                        {{ \App\Enum\OrderStatusEnum::from($specialOrder->status)->label() }}
                                    </span>
                                    </p>
                                </div>

                                <div class="col-md-3 mt-2">
                                    <label>{{ __('dashboard.price') }}</label>
                                    <p>{{ $specialOrder->price ?? '--' }}</p>
                                </div>

                                <div class="col-md-3 mt-2">
                                    <label>{{ __('dashboard.user') }}</label>
                                    <p>{{ $specialOrder->user->name ?? '--' }}</p>
                                </div>

                                <div class="col-md-3 mt-2">
                                    <label>{{ __('dashboard.address') }}</label>
                                    <p>{{ $specialOrder->address->city ?? '--' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Special Order Images -->
                        @if($specialOrder->hasMedia('images'))
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h4 class="card-title">{{ __('dashboard.images') }}</h4>
                                </div>
                                <div class="card-body d-flex flex-wrap">
                                    @foreach($specialOrder->getMedia('images') as $img)
                                        <img src="{{ $img->getUrl() }}" alt="{{ $specialOrder->serial_number }}"
                                             class="img-fluid dataTableImage me-2 mb-2" style="width:120px; height:120px; border-radius:5px;">
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <!-- Change Special 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.special-orders.change-status', $specialOrder->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <div class="mb-3">
                                        <select name="status" class="form-select form-select-lg">
                                            @foreach(\App\Enum\OrderStatusEnum::cases() as $status)
                                                <option value="{{ $status->value }}"
                                                        @if($specialOrder->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>

                        <!-- Update Special Order Price -->
                        <div class="card mt-4 shadow-sm border-0">
                            <div class="card-header">
                                <h4 class="card-title">{{ __('dashboard.update_price') }}</h4>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('admin.special-orders.update-price', $specialOrder->id) }}" method="POST">
                                    @csrf
                                    @method('PATCH')

                                    <div class="mb-3">
                                        <label for="price" class="form-label">{{ __('dashboard.price') }}</label>
                                        <input type="number" name="price" id="price" class="form-control form-control-lg w-50"
                                               value="{{ $specialOrder->price ?? '' }}" placeholder="Enter new price" min="0" step="0.01" required>
                                    </div>

                                    <button type="submit" class="btn btn-primary btn-lg w-50 mt-2">
                                        <i class="fa fa-dollar-sign me-2"></i> {{ __('dashboard.update_price') }}
                                    </button>
                                </form>
                            </div>
                        </div>

                    </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