@extends('layouts.webshop')

@section('main-content')
<div class="container py-4">


    <h2 class="mb-2 mx-auto pb-4 text-center">
        Megrendeléseim
    </h2>

    @if($closing_hours)
    <div class="mb-4" style="background: #a40c01;" class="text-center">
        <p class="p-4 text-light font-weight-bold text-center">
            {{$closing_hours->title}} ({{$closing_hours->description}})
        </p>
    </div>
    @endif

    {{-- START Megrendelés törlése --}}
    @if (Session::has('deleted_order'))
        @php
            $deleted_order = Session::get('deleted_order');
        @endphp

        <h3 class="mb-4 text-capitalize text-center">
            A törlési igény beküldése sikeres!
        </h3>

        <div class="mb-4 black-box text-capitalize">
            <div class="row">
                <div class="col-12 col-md-4">
                    Megrendelésszám: {{ $deleted_order->id }}
                </div>
                <div class="col-12 col-md-4">
                    Státusz: {{ $deleted_order->status }}
                </div>
                <div class="col-12 col-md-4">
                    Törlés Ideje: {{ now()->format('Y-m-d') }}
                </div>
            </div>
        </div>

        <h3 class="mb-3 text-capitalize text-center">
            A "{{ $deleted_order->id }}" számú rendelésre a törlési igényedet beküldtük.
        </h3>

        <div class="mb-3 text-center">
            Ha szeretnél mégis tovább válogatni kattints!
        </div>

        <div class="mb-5 text-center">
            <button type="button" class="btn btn-primary" onclick="window.location='/'">Szétnézek</button>
        </div>
    @endif
    {{-- END Megrendelés törlése --}}


    {{-- START Aktív Megrendelések --}}
    <h3 class="mb-4 text-capitalize text-center">Aktív megrendelések</h3>
    @forelse ($active_orders as $order)
        <div class="mb-4 black-box text-capitalize">
            <div class="row">
                <div class="col-12 col-md-4">
                    Megrendelésszám: {{ $order->id }}
                </div>
                <div class="col-12 col-md-4">
                    Státusz: {{ $order->status }}
                </div>
                <div class="col-12 col-md-4">
                    Rendelés dátuma: {{ $order->created_at->format('Y-m-d') }}
                </div>
                <div class="col-12 pt-1">
                    <i class="fas fa-chevron-down" style="font-size: 1.5rem;"></i>
                </div>
            </div>
        </div>
        <div class="mb-4 row text-capitalize text-center">
            <div class="col-12 col-md-4">
                Összérték: {{ $order->displayFullPrice }}
            </div>
            <div class="col-12 col-md-4">
                Fizetési mód: {{ $order->payment_method }}
            </div>
            <div class="col-12 col-md-4">
                Várható Kiszállítás: {{ $order->created_at->modify('+7 day')->format('Y-m-d') }} {{-- TODO: Várható kiszállítás dátumát meg kell adni pontosan. (Ezt lehet az mpl adja vissza, vagy hozzáadunk a létrehozás dátumához 7-et.) --}}
            </div>
        </div>

        {{-- START Megrendelés termékei --}}
        <div class="mb-4">
            @forelse ( $order->order_items as $order_item )
                <div class="@if($loop->index != 0) order_{{ $order->id }}-product d-none @endif">
                    @include('webshop.list_card', ['product' => $order_item->product, 'cart' => false, 'hide_buttons' => true])
                </div>
            @empty
                <div class="text-center">
                    Ehhez a megrendeléshez nem tartoznak termékek.
                </div>
            @endforelse
        </div>
        {{-- END Megrendelés termékei --}}

        {{-- START Gombok --}}
        <div class="d-flex justify-content-end mb-4">
            @if ($order->order_items->count() > 1)
            <div class="p-2">
                <button type="button" class="btn btn-light" onclick="$('.order_{{ $order->id }}-product').toggleClass('d-none'); $(this).text(function(i, text){ return text === 'További tételek mutatása' ? 'Kevesebb tétel mutatása' : 'További tételek mutatása';});">További tételek mutatása</button>
            </div>
            @endif
            <div class="p-2">
                <button type="button" class="btn btn-dark" @if($order->status == 'törlés igényelve') disabled @endif onclick="window.location='{{ route('customer.order.destroy', ['id' => $order->id]) }}'">Megrendelés Törlése</button>
            </div>
        </div>
        {{-- END Gombok --}}
    @empty
        <div class="mb-4 text-center">
            Jelenleg nincsenek aktív megrendeléseid.
        </div>
    @endforelse
    {{-- END Aktív Megrendelések --}}

    {{-- START Korábbi megrendelések --}}
    <h3 class="mb-4 text-capitalize text-center">Korábbi megrendelések</h3>
    @forelse ($inactive_orders as $order)
        <div class="mb-4 @if($loop->index % 2 == 0) gray-box @else light-gray-box @endif text-capitalize" onclick="$('.order_{{ $order->id }}-products-container').toggleClass('d-none');" style="cursor: pointer;">
            <div class="row">
                {{-- <div class="col-12 col-md-4">
                    {{ $order->order_items->first()->product->manufacturer->name.' '.$order->order_items->first()->product->car_model->short_name.' Alkatrészek' }}
                </div> --}}
                <div class="col-12 col-md-4">
                    Megrendelésszám: {{ $order->id }}
                </div>
                <div class="col-12 col-md-4">
                    Státusz: {{ $order->status }}
                </div>
                <div class="col-12 col-md-4">
                    Rendelés dátuma: {{ $order->created_at->format('Y-m-d') }}
                </div>
                <div class="col-12 pt-1">
                    <i class="fas fa-chevron-down" style="font-size: 1.5rem;"></i>
                </div>
            </div>
        </div>

        {{-- START Megrendelés termékei --}}
        <div class="mb-4 order_{{ $order->id }}-products-container d-none">
            @forelse ( $order->order_items as $order_item )
                @include('webshop.list_card', ['product' => $order_item->product, 'cart' => false, 'hide_buttons' => true])
            @empty
                <div class="text-center">
                    Ehhez a megrendeléshez nem tartoznak termékek.
                </div>
            @endforelse
        </div>
        {{-- END Megrendelés termékei --}}
    @empty
        <div class="mb-4 text-center">
            Nincsenek korábbi megrendeléseid.
        </div>
    @endforelse
    {{-- END Korábbi megrendelések --}}
</div>

@endsection