@extends('layout')

@section('h4-page', __('view') . ' ' . __('order'))

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="card">
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card-body">
                    <div>
                        <span>{{ $main->order?->no }}</span>
                        @if ($main->type == 'RECEIVE')
                            <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                {{ __('from') }}:
                                <span
                                    style="color: black; font-weight: 400;">{{ $main->order?->receive_address_order }}</span>
                            </p>
                            <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                {{ __('to') }}: <span
                                    style="color: black; font-weight: 400;">{{ $main->order?->getStore?->name }}</span>
                            </p>
                            <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                {{ __('Remark') }}: <span
                                    style="color: black; font-weight: 400;">{{ $main->order?->receive_remark }}</span>
                            </p>
                        @elseif($main->type == 'SEND')
                            <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                {{ __('from') }}:
                                <span style="color: black; font-weight: 400;">{{ $main->order?->getStore?->name }}</span>
                            </p>
                            <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                {{ __('to') }}:<span
                                    style="color: black; font-weight: 400;">{{ $main->order?->send_address_order }}</span>
                            </p>
                            <p style="font-size: 10px;color:#12A5E9; font-weight: 700;">
                                {{ __('Remark') }}: <span
                                    style="color: black; font-weight: 400;">{{ $main->order?->send_remark }}</span>
                            </p>
                        @endif
                    </div>
                    <div>
                        <span
                            style="font-size: 10px;">{{ \Carbon\Carbon::parse(optional($main->order)->date)->translatedFormat('d M Y') }}</span>
                    </div>
                    <div class="detailsOrder">
                        <div class="row">
                            <div class="col-6">
                                <span class="fw-bold" style="color: #099FD9;">{{ __('Type') }}</span>
                            </div>
                            <div class="col-6 text-end">
                                <span class="fw-bold" style="color: #099FD9;">{{ __('qty') }}</span>
                            </div>
                            @php
                                $tempService = 0;
                            @endphp
                            @foreach ($main->order?->getDetails ?? [] as $k => $value)
                                @if ($tempService != $value?->service_id)
                                    @php
                                        $tempService = $value?->service_id;
                                    @endphp
                                    <div class="col-12">
                                        <span class="fw-bold" style="color: #099FD9;">{{ $value?->service?->name }}</span>
                                    </div>
                                @endif
                                <div class="col-6">
                                    <p class="p-0">{{ $value->product?->name }}</p>
                                </div>
                                <div class="col-6 text-end">
                                    <p class="p-0">x{{ $value->qty }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="form__files-container" id="files-list-container">
                    </div>
                    @if (@$main->status_order != 'PENDING')
                        <div class="form__files-container" id="files-list-container">
                            <div class="form__image-container-show "
                                style="display: flex ; justify-content: center; row-gap: 1rem; column-gap: 1rem; flex-wrap: wrap;">
                                @if (@$main->order?->status_booking == App\Enums\OrderStatusEnums::PICKUP)
                                    @foreach ($main->order?->attachmentOrderPickup ?? [] as $i => $d)
                                        <img class="form__image" src="{{ $d->pathImage() }}" alt="">
                                    @endforeach
                                @else
                                    @foreach ($main->order?->attachmentOrderShipping ?? [] as $i => $d)
                                        <img class="form__image" src="{{ $d->pathImage() }}" alt="">
                                    @endforeach

                                @endif
                            </div>
                        </div>
                    @endif
                    <a href="{{ route('mapOrderRider.index') }}" class="btn bg-gradient-success mt-3">{{__("back")}}</a>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
    <script src="{{ asset('js/qrcode.min.js') }}"></script>
    <script type="text/javascript">
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "{{ route('order.pickup', $main->unique_id ?? 0) }}",
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    </script>
    <script>
        function changeLange(e) {
            document.getElementById("lange").value = e.id;
            document.getElementById("imageFlagDrowdown").src = e.querySelector('img').src;
            lange = document.querySelectorAll(`.datalange`);
            lange.forEach(element => {
                if (element.classList.contains(`datalange_${e.id}`)) {
                    element.classList.remove("d-none");
                } else {
                    element.classList.add("d-none");
                }
            });
        }
    </script>
@endsection