@extends(get_view('pages.user.index'))
@section('user.title', __('Siparişlerim'))
@section('user.sidebar-my-orders')
    active
@endsection
@section('user.content')


    @if ( $orders->count() > 0 )
        <div class="accordion" id="ordersAccordion">
            @foreach ($orders as $key => $order)
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button @if ($key != 0) collapsed @endif" type="button"
                            data-bs-toggle="collapse" data-bs-target="#order_{{ $order->id }}" aria-expanded="true"
                            aria-controls="order_{{ $order->id }}">
                            <div class="row w-100 align-items-center fw-bold">
                                <div class="fs-3 col-lg-3 col-6">
                                    <p class="m-0 p-0 text-dark fw-bold" style="line-height: 16px;">{{ $order->order_number }}
                                    </p>
                                    <p class="m-0 p-0"><small>{{ $order->created_at->diffForHumans() }}</small></p>
                                </div>
                                <div class="fs-3 col-lg-3 col-6 text-lg-start text-end">
                                    {{ __('Ürün Sayısı:') }} <span>{{ $order->order_products->count() }}</span>
                                </div>
                                <div class="fs-3 col-lg-3 col-6">
                                    @if ($order->status == 0)
                                        <span class="text-dark" style="font-size: 14px;"><i
                                                class="fas fa-hourglass-start text-warning me-2 text-center"
                                                style="min-width: 20px;"></i>{{ __('Sipariş Alındı') }}</span><br>
                                    @elseif ($order->status == 1)
                                        <span class="text-dark" style="font-size: 14px;"><i
                                                class="fa fa-check-circle text-success me-2 text-center"
                                                style="min-width: 20px;"></i>{{ __('Sipariş Onaylandı') }}</span><br>
                                    @elseif ($order->status == 2)
                                        <span class="text-dark" style="font-size: 14px;"><i
                                                class="fa fa-times text-danger me-2 text-center"
                                                style="min-width: 20px;"></i>{{ __('Sipariş İptal Edildi') }}</span><br>
                                    @endif
                                </div>
                                <div class="fs-3 col-lg-3 col-6 text-end">
                                    {{ $order->get_price(false) }}
                                </div>
                            </div>
                        </button>
                    </h2>
                    <div id="order_{{ $order->id }}"
                        class="accordion-collapse @if ($key != 0) collapse @else collapse show @endif"
                        data-bs-parent="#ordersAccordion">
                        <div class="accordion-body">

                            {{-- Fatura --}}
                            @if ($order->invoice_filename != null)
                                <div class="text-right">
                                    <a href="{{ Common::get_order_invoice($order->id, $order->invoice_filename) }}"
                                        target="_blank" class="btn btn-outline-dark btn-sm"><i class="bi bi-receipt"></i>
                                        {{ __('Faturayı Görüntüle') }}</a>
                                </div>
                            @endif


                            {{-- Sipariş Ürünleri --}}
                            <div class="bg-light py-4 px-2">
                                @foreach ($order->order_products as $order_product)
                                    <div class="border-bottom p-2 mb-2">

                                        <div class="pl-3 pr-3 mb-4">
                                            @if ($order_product->order_status >= 0 && $order_product->order_status <= 3)
                                                @include('admin.components.order.steps.inprogress')
                                            @elseif($order_product->order_status > 3 && $order_product->order_status <= 5)
                                                @include('admin.components.order.steps.return')
                                            @endif
                                        </div>

                                        <div class="row py-3">
                                            <div class="col-md-6 col-12">
                                                <div class="d-flex">
                                                    <div>
                                                        <a href="{{ route('product.detail', ['permalink' => $order_product->product->content->permalink]) }}"
                                                            class="d-inline">
                                                            @if ($order_product->product->first_image != null)
                                                                <img src="{{ Common::get_product_small_image($order_product->product_id, $order_product->product->first_image->name) }}"
                                                                    class="border"
                                                                    alt="{{ $order_product->product->content->name }}"
                                                                    style="min-width: 100px; max-width: 100px;">
                                                            @else
                                                                <div class="bg-white shadow-sm border mr-3 d-flex align-items-center justify-content-center text-center text-secondary mb-2"
                                                                    style="width: 100px; height: 100px; font-size: 10px;">
                                                                    {{ __('Ürün Fotoğrafı Bulunamadı') }}
                                                                </div>
                                                            @endif
                                                        </a>
                                                    </div>
                                                    <div class="ms-2 text-start">
                                                        <div>
                                                            <p class="mt-1 mb-1 fw-bold"
                                                                style="font-size: 15px; line-height: 16px;">
                                                                {{ $order_product->product->content->name ?? '-' }}
                                                            </p>
                                                            <p class="m-0 mb-2 p-0 text-success fw-bold">
                                                                {{ $order_product->get_price(false) }} <small
                                                                    class="text-muted">({{ $order_product->quantity }}x)</small>
                                                            </p>
                                                            @if($order_product->product_variant->options ?? null)
                                                            <p class="m-0 p-0">
                                                                <div class="header-style-5">
                                                                    @foreach ($order_product->product_variant->options as $option)
                                                                    <span class="badge rounded-pill  bg-secondary opacity-75 text-white header-top-campaign px-3 py-2">{{ $option->option_value->content->name}} {{ $option->option->content->name}}</span>
                                                                    @endforeach
                                                                </div>
                                                            </p>
                                                            @endif
                                                            <p class="m-0 p-0">
                                                                {{-- <a href="#" class="text-primary"><i class="fa fa-star"></i> Ürünü Değerlendir</a> --}}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-12">
                                                <div class="row">

                                                    @if ($order_product->order_status >= 2)
                                                        @if ($order_product->cargo_company_name != null && $order_product->cargo_number != null)
                                                            <div class="col-12">
                                                                <p class="m-0 mb-2 p-0 fs-11">
                                                                    <b>{{ __('Kargo Firması') }}:</b><br>
                                                                    {{ $order_product->cargo_company_name }}
                                                                </p>
                                                                <p class="m-0 p-0 fs-11">
                                                                    <b>{{ __('Kargo Numarası') }}:</b><br>
                                                                    {{ $order_product->cargo_number }}
                                                                </p>
                                                            </div>
                                                        @endif
                                                    @endif

                                                    <div class="col-6">
                                                        @if ($order_product->invoice_filename != null)
                                                            <a href="#"
                                                                class="btn btn-outline-primary fs-4">{{ __('Faturayı Gör') }}</a>
                                                        @endif

                                                        @if ($order_product->can_review())
                                                            <a href="#" class="btn btn-outline-warning fs-4"
                                                                data-order-product-id="{{ $order_product->id }}"
                                                                data-bs-toggle="modal" data-bs-target="#reviewModal">
                                                                {{ __('Ürünü Değerlendir') }}
                                                            </a>
                                                        @elseif($order_product->user_review)
                                                            <p class="m-0 p-0">{{ __('Bu ürünü değerlendirdin') }}</p>
                                                            <div title="{{ $order_product->review_count }}">
                                                                @php
                                                                    $reviewaverage = $order_product->product->rate;
                                                                @endphp
                                                                @foreach (range(1, 5) as $i)
                                                                    @if ($reviewaverage > 0)
                                                                        @if ($reviewaverage > 0.5)
                                                                            <i class="fas fa-star text-warning"></i>
                                                                        @elseif ($reviewaverage <= 0.5 && $reviewaverage > 0)
                                                                            <i class="fas fa-star-half-alt text-warning"></i>
                                                                        @endif
                                                                    @else
                                                                        <i class="far fa-star text-warning"></i>
                                                                    @endif
                                                                    @php
                                                                        $reviewaverage--;
                                                                    @endphp
                                                                @endforeach
                                                            </div>
                                                        @endif

                                                        @if ($order_product->can_return())
                                                            <a href="#" class="btn btn-outline-danger fs-4"
                                                                data-order-product-id="{{ $order_product->id }}"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#returnRequestModal">{{ __('İade Talebi Oluştur') }}
                                                            </a>
                                                        @elseif($order_product->return_request())
                                                            <div class="text-danger py-2">
                                                                <p class="text-danger">
                                                                    <i class="fa fa-info-circle"
                                                                        style="width: 15px; height: 15px; text-align: center;"
                                                                        data-toggle="tooltip"
                                                                        title="Ürünü koşullarına uygun şekilde kargo ile geri gönderdiğinizde veya iade işleminiz satıcı tarafından onaylandığında işlemler tamamlanacaktır."></i>
                                                                    {{ __('İade Talebi Oluşturuldu') }}
                                                                </p>
                                                            </div>
                                                        @endif
                                                    </div>

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


                            {{-- Adresler --}}
                            <div class="p-3">
                                <div class="row">
                                    <div class="col-md-6 col-12 text-start">
                                        <h6 class="mb-1 fw-bold">{{ __('Teslimat Adresi') }}</h6>
                                        <p class="m-0 p-0"><b>{{ $order->delivery_address->fullname ?? '' }}</b></p>
                                        <p class="m-0 p-0">{{ $order->delivery_address->phone ?? '' }}</p>
                                        <p class="m-0 p-0">
                                            {{ $order->delivery_address->country->name ?? '' }}/{{ $order->delivery_address->city ?? '' }}/{{ $order->delivery_address->district ?? '' }}
                                            - {{ $order->delivery_address->postcode ?? '' }}</p>
                                        <p class="m-0 p-0">{{ $order->delivery_address->address ?? '' }}</p>
                                    </div>
                                    <div class="col-md-6 col-12  text-start">
                                        <h6 class="mb-1 fw-bold">{{ __('Fatura Adresi') }}</h6>
                                        <p class="m-0 p-0"><b>{{ $order->invoice_address->fullname ?? '' }}</b></p>
                                        <p class="m-0 p-0">{{ $order->invoice_address->phone ?? '' }}</p>
                                        <p class="m-0 p-0">
                                            {{ $order->invoice_address->country->name ?? '' }}/{{ $order->invoice_address->city ?? '' }}/{{ $order->invoice_address->district ?? '' }}
                                            - {{ $order->invoice_address->postcode ?? '' }}</p>
                                        <p class="m-0 p-0">{{ $order->invoice_address->address ?? '' }}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        @include(get_view('components.errors.order-not-found'))
    @endif



    <!-- Modal -->
    <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('front.user.order-product.review.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="order_product_id" value="" required>
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="reviewModalLabel">{{ __('Ürünü Değerlendir') }}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- star -->
                        <label for="star5">{{ __('Ürünü değerlendiriniz:') }}</label>
                        <div class="form-group mb-3">
                            <div class="position-relative rating fs-1 cursor-pointer">
                                <input type="radio" name="rate" id="star1" value="1" required hidden>
                                <label for="star1"><i class="fa fa-star"></i></label>
                                <input type="radio" name="rate" id="star2" value="2" required hidden>
                                <label for="star2"><i class="fa fa-star"></i></label>
                                <input type="radio" name="rate" id="star3" value="3" required hidden>
                                <label for="star3"><i class="fa fa-star"></i></label>
                                <input type="radio" name="rate" id="star4" value="4" required hidden>
                                <label for="star4"><i class="fa fa-star"></i></label>
                                <input type="radio" name="rate" id="star5" value="5" required hidden>
                                <label for="star5"><i class="fa fa-star"></i></label>
                            </div>
                        </div>
                        <!-- comment -->
                        <div class="form-group">
                            <label for="">{{ __('Yorumunuzu giriniz:') }}</label>
                            <textarea name="comment" id="comment" rows="3" class="form-control"
                                placeholder="Ürün hakkındaki yorumunuzu giriniz..."></textarea>
                            <p class="m-0 p-0">
                                <small>{{ __('Değerlendirmeniz onaylandığında adınız herkese açık şekilde paylaşılmayacaktır.') }}</small>
                            </p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="axil-btn btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('İptal') }}</button>
                        <button type="submit" class="axil-btn btn btn-primary">{{ __('Gönder') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="returnRequestModal" tabindex="-1" aria-labelledby="returnRequestModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{ route('front.user.order-product.return.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="order_product_id" value="" required>
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="returnRequestModalLabel">{{ __('İade Talebi Oluştur') }}</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="">{{ __('İade nedenini giriniz:') }}</label>
                            <textarea name="reason" id="reason" rows="3" class="form-control"
                                placeholder="Ürünü iade etme sebebini giriniz..."></textarea>
                            <small>{{ __('Bu ürünün iade koşullarını doğru bir şekilde karşıladığınız taktirde 14 gün içinde teslim edebilirsiniz.') }}</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary  axil-btn py-1"
                            data-bs-dismiss="modal">{{ __('İptal') }}</button>
                        <button type="submit" class="btn btn-primary axil-btn py-1">{{ __('Oluştur') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('user.footer')
    <script>
        $(document).ready(function() {
            const myModalEl = document.getElementById('returnRequestModal')
            myModalEl.addEventListener('show.bs.modal', event => {
                var order_product_id = $('a[data-bs-target="#returnRequestModal"]').data(
                    'order-product-id');
                $('#returnRequestModal input[name="order_product_id"]').val(order_product_id);
            })
            const myModalEl2 = document.getElementById('reviewModal')
            myModalEl2.addEventListener('show.bs.modal', event => {
                var order_product_id = $('a[data-bs-target="#reviewModal"]').data(
                    'order-product-id');
                $('#reviewModal input[name="order_product_id"]').val(order_product_id);
            })
            //.rating input onclik fill star
            $('.rating input').on('click', function() {
                var star = $(this).val();
                console.log(star);
                $(this).parent().children('label').removeClass('text-warning');
                $(this).parent().children('label').removeClass('text-secondary');
                $(this).parent().children('label').each(function(index) {
                    if (index < star) {
                        $(this).removeClass('text-secondary');
                        $(this).children('i').removeClass('fa-star');
                        $(this).children('i').addClass('fa-star');
                        $(this).addClass('text-warning');
                    } else {
                        $(this).children('i').removeClass('fa-star');
                        $(this).children('i').addClass('fa-star');
                        $(this).addClass('text-secondary');
                    }
                });
            });

        })
    </script>
@endsection