@extends('backend.adminlayouts.master')

@section('body')
<div class="bg-gray-50">
    <main class="max-w-2xl mx-auto pt-8 pb-24 sm:pt-16 sm:px-6 lg:max-w-7xl lg:px-8">
        <div class="px-4 space-y-2 sm:px-0 sm:flex sm:items-baseline sm:justify-between sm:space-y-0">
            <div class="flex sm:items-baseline sm:space-x-4">
                <h1 class="text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl">Comanda #{{$orderInfo->order_number}}</h1>
            </div>
            <p class="font-bold text-gray-600">Data Comenzii
                <time datetime="{{ $orderInfo->created_at }}" class="font-medium text-gray-600">{{ Carbon\Carbon::parse($orderInfo->created_at)->format('d/m/Y H:i') }}</time>
            </p>
            <form action="{{ route('adminOrders.update', $orderInfo->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if(in_array($orderInfo->status, ['pending', 'processing', 'in_progress', 'completed']))
                <div class="flex justify-center mt-8" x-data="{ toggle: '{{ $orderInfo->is_shipped }}' }">
                    <h2 class="text-grey-500 font-weight-bold inline-block mr-3">{{ $orderInfo->is_shipped ? 'Livrata' : 'Livreaza comanda' }}</h2>
                    <div class="relative w-12 h-6 transition duration-200 ease-linear rounded-full mt-[-5px]" :class="toggle == '1' ? 'bg-green-400' : 'bg-gray-400'">
                        <label for="is_shipped" class="absolute left-0 w-6 h-6 mb-2 transition duration-100 ease-linear transform bg-white border-2 rounded-full cursor-pointer" :class="toggle == '1' ? 'translate-x-full border-green-400' : 'translate-x-0 border-gray-400'"></label>
                        <input type="checkbox" id="is_shipped" name="is_shipped" class="w-full h-full appearance-none focus:outline-none" @click="toggle = toggle == '0' ? '1' : '0'" {{ $orderInfo->is_shipped ? 'disabled' : '' }} />
                    </div>
                </div>
                @else
                <h2 class="text-red-500 font-weight-bold">Comanda Anulata</h2>
                @endif
            </form>
        </div>

        <!-- Products -->
        <section aria-labelledby="products-heading" class="mt-6">
            <h2 id="products-heading" class="sr-only">Produse achizitionate</h2>
            <div class="space-y-8">
                <div class="bg-white border-t border-b border-gray-200 shadow-sm sm:border sm:rounded-lg">
                    @foreach($orderInfo->orderItem as $item)
                    <div class="py-1 px-1 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:p-8">
                        <div class="sm:flex lg:col-span-7 pl-10 pt-4">
                            <div class="flex-shrink-0 w-full aspect-w-1 aspect-h-1 rounded-lg sm:w-40">
                                @if($item->product->img_01 && Storage::exists($item->product->img_01))
                                <img src="{{ Storage::url($item->product->img_01) }}" class="img-slider">
                                @endif
                            </div>
                            <div class="mt-6 pt-2 sm:mt-0 sm:ml-6">
                                <h3 class="text-base font-medium text-indigo-600">
                                    <a href="{{ route('shop.show', [$item->product->slug, $item->product->id]) }}" target="_blank">
                                        {{ $item->product->item_name }}
                                    </a>
                                </h3>
                                <p class="mt-2 text-sm font-medium text-gray-900">{{ priceView($item->price, true) }}</p>
                                <p class="mt-2 text-sm font-medium text-gray-900">Cantitate: {{ $item->quantity }}</p>
                                @if($item->product->isbn_printed)
                                <p class="mt-3 text-sm font-medium text-gray-500">ISBN Tiparit: {{ $item->product->isbn_printed }}</p>
                                @endif
                                @if($item->product->isbn_pdf)
                                <p class="mt-3 text-sm font-medium text-gray-500">ISBN Digital: {{ $item->product->isbn_pdf }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <hr>
                    @endforeach
                    @if(in_array($orderInfo->status, ['pending', 'processing', 'in_progress', 'completed']))
                    <div class="border-t border-gray-200 py-6 px-4 sm:px-6 lg:p-8">
                        <h4 class="sr-only">Status </h4>
                        {{-- <p class="text-sm font-medium text-gray-900">{{ $orderInfo->is_shipped ? 'Livrata pe' : 'Pregatire ' }} <time datetime="{{ $order->created_at }}">{{ Carbon\Carbon::parse($order->created_at)->format('d/m/Y') }}</time></p>--}}
                        <div class="mt-6" aria-hidden="true">
                            <x-progress-bar :status="$orderInfo->status" />
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </section>

        <!-- Billing -->
        <section aria-labelledby="summary-heading" class="mt-16">
            <div class="bg-gray-100 py-6 px-4 sm:px-6 sm:rounded-lg lg:px-8 lg:py-8 lg:grid lg:grid-cols-12 lg:gap-x-8">
                <dl class="grid grid-cols-2 gap-6 text-sm lg:col-span-7">
                    <div>
                        <dt class="font-medium text-gray-900">Detalii livrare</dt>
                        <dd class="mt-3 mb-3 text-gray-500">
                            @if($orderInfo->shipping_company)
                            <span class="block"><strong>Company: </strong> {{$orderInfo->shipping_company}}</span>
                            @endif
                            <span class="block"><strong>Nume: </strong> {{$orderInfo->shipping_name}} {{$orderInfo->shipping_surname}}</span>
                            <span class="block"><strong>Adresa: </strong>{{$orderInfo->shipping_street}} {{$orderInfo->shipping_address}}</span>
                            <span class="block">{{$orderInfo->shipping_zipcode}} {{$orderInfo->shipping_city}} ({{$orderInfo->shipping_province}})</span>
                            <span class="block"><strong>Telefon: </strong>{{$orderInfo->shipping_phone}}</span>
                        </dd>
                        <dt class="font-medium text-gray-900">Detalii facturare</dt>
                        <dd class="mt-3 text-gray-500">
                            @if($orderInfo->billing_company)
                            <span class="block"><strong>Company: </strong> {{$orderInfo->billing_company}}</span>
                            <span class="block"><strong>VAT ID: </strong> {{$orderInfo->billing_vat}}</span>
                            @endif
                            <span class="block"><strong>Nume: </strong> {{$orderInfo->billing_name}} {{$orderInfo->billing_surname}}</span>
                            <span class="block"><strong>Adresa: </strong>{{$orderInfo->billing_street}} {{$orderInfo->billing_address}}</span>
                            <span class="block">{{$orderInfo->billing_zipcode}} {{$orderInfo->billing_city}} ({{$orderInfo->billing_province}})</span>
                            <span class="block"><strong>Telefon: </strong>{{$orderInfo->billing_phone}}</span>
                        </dd>
                        @if($orderInfo->notes)
                        <dd class="mt-4 text-gray-500">
                            <span class="block"><strong>Notes: </strong> {{$orderInfo->notes}}</span>
                        </dd>
                        @endif
                    </div>

                    <div>
                        <dt class="font-medium text-gray-900">Detalii plata</dt>
                        @if(in_array($orderInfo->status, ['pending', 'processing', 'in_progress', 'completed']))
                        <div class="mt-3">
                            @if($orderInfo->payment_method === 'card-payment' && $orderInfo->is_paid === 1)
                            <dd class="-ml-4">
                                <div class="ml-3 mt-0 flex-shrink-0">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Plata primita</span>
                                </div>
                                <div class="ml-3 mt-3">
                                    <h5 class="mb-2"><strong>Metoda de plata:</strong></h5>
                                    <p>Plata cu cardul</p>
                                </div>
                            </dd>
                                @elseif($orderInfo->payment_method === 'card-payment' && $orderInfo->is_paid === 0)
                                <dd class="-ml-4">
                                    <div class="ml-3 mt-0">
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-300 text-warning-800">Se asteapta plata</span>
                                    </div>
                                    <div class="ml-3 mt-3">
                                        <h5 class="mb-2"><strong>Metoda de plata:</strong></h5>
                                        <p>Plata cu cardul</p>
                                    </div>
                            @elseif($orderInfo->payment_method === 'cash-on-delivery')
                            <dd class="-ml-4">
                                <div class="ml-3 mt-0">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $orderInfo->is_paid ? 'bg-green-100 text-green-800' : 'bg-yellow-300 text-warning-800' }}">
                                        {{ $orderInfo->is_paid ? 'Plata primita' : 'Se asteapta plata' }}
                                    </span>
                                </div>
                                <div class="ml-3 mt-3">
                                    <h5 class="mb-2"><strong>Metoda de plata:</strong></h5>
                                    <p>Plata ramburs</p>
                                </div>
                            </dd>
                            @endif
                        </div>
                        @else
                        <div class="mt-3">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Comanda anulata</span>
                        </div>
                        @endif
                    </div>
                </dl>

                <dl class="mt-8 divide-y divide-gray-200 text-sm lg:mt-0 lg:col-span-5">
                    @if($orderInfo->orderItem->contains('is_downloadable', 0) && $orderInfo->shipping_cost > 0)
                    <div class="py-4 flex items-center justify-between">
                        <dt class="text-gray-600">Livrare<br><span class="font-weight-light pt-3">Curier: Fan Courier</span></dt>
                        <dd class="font-medium text-gray-900"><br>+ {{ priceView($orderInfo->shipping_cost) }}</dd>
                    </div>
                    @endif
                    @if($orderInfo->discount)
                    <div class="py-4 flex items-center justify-between">
                        <dt class="text-gray-600">Coupon</dt>
                        <dd class="font-medium text-gray-900"><br>- {{ priceView($orderInfo->discount) }}</dd>
                    </div>
                    @endif
                    <div class="pt-4 flex items-center justify-between">
                        <dt class="font-medium text-gray-900">Pret total (TVA inclus)</dt>
                        <dd class="font-medium text-indigo-600">{{ priceView($orderInfo->grand_total) }}</dd>
                    </div>
                </dl>
            </div>
        </section>
        <div class="py-3">
        <form action="{{ route('adminOrders.uploadInvoice', $orderInfo->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6 border-2 py-3 px-3">
            @csrf
            <div class="form-group">
                <label for="invoice" class="block text-sm font-medium text-gray-700">
                    @if($orderInfo->invoice)
                    {{ __('Schimba Factura') }} - <a href="{{ Storage::url($orderInfo->invoice) }}" target="_blank" class="text-blue-500">Vezi factura</a>
                    @else
                    {{ __('Incarca factura') }}
                    @endif
                </label>
                <input type="file" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" id="invoice" name="invoice">
            </div>
            <div class="form-group">
                <label for="awb" class="block text-sm font-medium text-gray-700">{{ __('AWB') }}</label>
                <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" id="awb" name="awb" value="{{ $orderInfo->awb ?? '' }}">
            </div>
            <button type="submit" class="btn btn-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">{{ __('Salveaza') }}</button>
        </form>
        </div>
        <div class="py-3 bg-gray-50 text-right sm:pb-10 mt-8" style="display:flex !important;">

            <a href="{{ url()->previous() }}" class="btn btn-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-5" aria-label="Inapoi">
                Inapoi
            </a>
            @if($orderInfo->status == 'in_progress' && $orderInfo->is_shipped)
            <div x-data="{ showModal: false }" @keydown.escape="showModal = false">
                <button type="button" @click="showModal = true" class="btn btn-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 mr-5">
                    Finalizeaza comanda
                </button>

                <div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal">
                    <div class="max-w-2xl px-6 py-6 mx-auto text-left rounded" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
                        <div class="flex items-center justify-between bg-white mt-2">
                            <h5 class="ml-3 mr-3 text-black">Finalizare comanda</h5>
                            <button type="button" class="z-50 cursor-pointer" @click="showModal = false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>

                        <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                            <div class="md:flex sm:items-start py-3">
                                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
                                    <svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                    </svg>
                                </div>
                                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Sunteți sigur că doriți să finalizati această comandă?</h3>
                                    <div class="mt-2">
                                        <p class="text-sm text-gray-500">{{ __('product.alertSentence') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-4 py-5 sm:px-6 sm:flex sm:flex-row-reverse">
                            <form action="{{ route('finishOrder', $orderInfo->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto mt-3">
                                    Da - Finalizeaza comanda
                                </button>
                            </form>
                            <button type="button" class="z-50 cursor-pointer" @click="showModal = false">
                                <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto mt-3">
                                    Nu - Inapoi
                                </h5>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            @endif
            @if(in_array($orderInfo->status, ['pending', 'processing']))
            <div x-data="{ showModal: false }" @keydown.escape="showModal = false">
                <button type="button" @click="showModal = true" class="btn btn-primary inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                    {{ __('product.cancel') }}
                </button>

                <div class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50" x-show="showModal">
                    <div class="max-w-2xl px-6 py-6 mx-auto text-left rounded" @click.away="showModal = false" x-transition:enter="motion-safe:ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100">
                        <div class="flex items-center justify-between bg-white mt-2">
                            <h5 class="ml-3 mr-3 text-black">Anulare comanda</h5>
                            <button type="button" class="z-50 cursor-pointer" @click="showModal = false">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>

                        <div class="bg-white px-4 pt-5 pb-4 py-5 sm:p-6 sm:pb-4">
                            <div class="md:flex sm:items-start py-3">
                                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                                    <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                    </svg>
                                </div>
                                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900">Sunteți sigur că doriți să anulati această comandă?</h3>
                                    <div class="mt-2">
                                        <p class="text-sm text-gray-500">{{ __('product.alertSentence') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-4 py-5 sm:px-6 sm:flex sm:flex-row-reverse">
                            <form action="{{ route('cancelOrder', $orderInfo->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto mt-3">
                                    Da - Anuleaza comanda
                                </button>
                            </form>
                            <button type="button" class="z-50 cursor-pointer" @click="showModal = false">
                                <h5 class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto mt-3">
                                    Nu - Inapoi
                                </h5>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endif

        </div>

    </main>
</div>

@endsection