@extends('home.users_profile.layout')

@section('title')
    جزئیات سفارش
@endsection
@php

    $address = \App\Models\UserAddress::where('id',$order->address_id)->first();


@endphp
@section('script')
    <script>
        $('.mobile-menu-toggle').click(function () {
            $('.loaded').addClass('mmenu-active');
        })
        $('.mobile-menu-close').click(function () {
            $('.loaded').removeClass('mmenu-active');
        })
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a > span.toggle-btn').click(function (e) {
            e.preventDefault();
            $(this).parent().next().slideToggle(300).parent().toggleClass("show");
        })
        $('#payment-online').click(function () {
            $('#payment-form').submit();
        })
        $('#mobile_menu_nav').click(function () {
            $('#icon-panel').toggleClass('negative');
            $('#icon-panel').toggleClass('positive');
            $('.negative').html('-');
            $('.positive').html('+');
        })


        $(document).ready(function() {
            // Button to open modal when "مرجوع کالا" is clicked
            $('#returnProductBtn').click(function() {
                $('#returnModal').modal('show');
            });
            $(document).ready(function() {
                // هنگام کلیک روی دکمه با id منحصر به فرد
                $('[id^="returnRejectMessage-"]').on('click', function() {
                    // استخراج شناسه از id دکمه
                    var id = $(this).attr('id').split('-')[1]; // گرفتن id از دکمه (مثلا "returnRejectMessage-1")

                    // باز کردن مودال مربوطه با استفاده از شناسه
                    $('#returnRejectMessageModal-' + id).modal('show');
                });
            });
        });

        document.getElementById("product_images").addEventListener("change", function(event) {
            var files = event.target.files;
            var previewContainer = document.getElementById("image-preview");

            // پاک کردن پیش‌نمایش‌های قبلی
            previewContainer.innerHTML = "";

            // برای هر فایل، پیش‌نمایش تصویر و دکمه حذف را اضافه می‌کنیم
            Array.from(files).forEach(function(file, index) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    // ساخت div برای پیش‌نمایش و دکمه حذف
                    var imagePreview = document.createElement("div");
                    imagePreview.classList.add("image-preview-container");
                    imagePreview.classList.add("mb-2");

                    var imgElement = document.createElement("img");
                    imgElement.src = e.target.result;
                    imgElement.style.width = "100px";  // عرض تصویر پیش‌نمایش
                    imgElement.style.marginRight = "10px";

                    var deleteBtn = document.createElement("button");
                    deleteBtn.type = "button";
                    deleteBtn.classList.add("btn", "btn-danger", "btn-sm");
                    deleteBtn.textContent = "×";
                    deleteBtn.style.position = "absolute";
                    deleteBtn.style.top = "0";
                    deleteBtn.style.right = "0";

                    // رویداد برای حذف تصویر
                    deleteBtn.addEventListener("click", function() {
                        imagePreview.remove();  // حذف پیش‌نمایش تصویر
                        // حذف فایل از input
                        var newFileList = Array.from(files).filter((fileItem, fileIndex) => fileIndex !== index);
                        event.target.files = new FileListItems(newFileList);
                    });

                    imagePreview.appendChild(imgElement);
                    imagePreview.appendChild(deleteBtn);
                    previewContainer.appendChild(imagePreview);
                };

                reader.readAsDataURL(file);  // خواندن محتوای فایل به صورت URL
            });
        });

        // سازنده جدید برای FileList که از فایل‌ها استفاده می‌کند.
        function FileListItems(files) {
            var b = new ClipboardEvent("").clipboardData || new DataTransfer();
            for (var i = 0; i < files.length; i++) {
                b.items.add(files[i]);
            }
            return b.files;
        }
    </script>
@endsection
@section('style')
    <style>
        .image-preview-container {
            position: relative;
            display: inline-block;
            margin-right: 10px;
        }

        .image-preview-container img {
            width: 100px;  /* اندازه پیش‌نمایش تصویر */
            height: auto;
            border-radius: 5px;
        }

        .image-preview-container button {
            position: absolute;
            top: -5px;
            right: -5px;
            background: red;
            color: white;
            border-radius: 50%;
            border: none;
            padding: 5px;
            cursor: pointer;
        }

        .image-preview-container button:hover {
            background: darkred;
        }

    </style>

@endsection

@section('content')



    <!-- Modal for Return Form -->
    @if($daysLeft > 0 and $order->return_status == 0)
    <div class="modal fade" id="returnModal" tabindex="-1" role="dialog" aria-labelledby="returnModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="returnModalLabel">فرم مرجوع کالا</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" action="{{ route('returns.create',['order'=>$order->id]) }}" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <label for="product_images">لیست محصولات</label>
                            <select class="form-control" name="product_id">
                                <option value="0">انتخاب محصول مورد نظر</option>
                                @foreach($order->orderItems as $item)
                                    <option value="{{ $item->Product->id }}">{{ $item->Product->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group mb-3">
                            <label for="product_images">تصاویر محصول</label>
                            <input type="file" class="form-control" name="product_images[]" id="product_images" multiple>
                        </div>
                        <div id="image-preview" class="form-group mb-3">
                            <!-- تصاویر پیش‌نمایش در اینجا قرار خواهند گرفت -->
                        </div>
                        <div class="form-group">
                            <label for="description">توضیحات</label>
                            <textarea class="form-control" name="description" id="description" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">بستن</button>
                        <button type="submit" class="btn btn-primary">ارسال درخواست مرجوعی</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    @endif
    @if($order->payment_type == 3)
        @php
            $payment = \App\Models\PaymentMethods::where('id' , $order->payment_type)->first();

        @endphp
        <form style="display: none" id="payment-form" action="{{ route('home.payment') }}" method="POST">
            @csrf


            <input type="hidden" id="address-input" name="address_id"
                   value="{{ $order->address->id }}">
            <input type="hidden" name="order_id" value="{{$order->id}}">
            <input type="hidden" name="payment_method" value="{{$payment->method}}">
        </form>
    @endif
    <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
        @if($order->return_status == 1)
            <div class="app-container container-xxl ">
                <div class="alert alert-info text-center">
                    درخواست مرجوعی سفارش شما در دست بررسی می باشد.
                </div>
            </div>
        @elseif($order->return_status == 2)
            <div class="app-container container-xxl ">
                <div class="alert alert-success text-center">
                    درخواست مرجوعی سفارش شما تایید شده است.
                </div>
            </div>
        @elseif($order->return_status == 3)
            <div class="app-container container-xxl ">
                <div class="alert alert-danger text-center">
                    درخواست مرجوعی سفارش شما رد شده است.


                </div>

            </div>

        @endif



        <div class="app-container container-xxl d-flex">
            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">
                    <!--begin::Content-->
                    <div id="kt_app_content" class="app-content">
                        <!--begin::سفارشdetails page-->
                        <div class="d-flex flex-column gap-7 gap-lg-10">
                            <div class="d-flex flex-wrap flex-stack gap-5 gap-lg-10">
                                <!--begin:::Tabs-->
                                <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-lg-n2 w-100 ">
                                    <!--begin:::Tab item-->
                                    <li class="nav-item">
                                        <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_summary">خلاصه سفارش</a>
                                    </li>
                                    @if($daysLeft > 0 and $order->return_status == 0)
                                    <li class="nav-item ms-auto">
                                        <a class="nav-link  pb-4  btn btn-warning text-dark" id="returnProductBtn">
                                         درخواست مرجوعی سفارش
                                        </a>
                                    </li>
                                    @endif
                                </ul>
                                @if($order->DeliveryMethod->id==1)
                                    <form class="col-12 col-md-4 d-flex align-items-center"
                                          action="{{ route('admin.order.TrackingCodeUpdate',['order'=>$order->id]) }}"
                                          method="post">
                                        @csrf
                                        <input class="form-control form-control-solid w-250px ps-12"
                                               name="TrackingCode" value=""
                                               placeholder="کد رهگیری مرسله پستی">
                                        @if($errors->has('TrackingCode'))
                                            <div
                                                class="error">{{ $errors->first('TrackingCode') }}</div>
                                        @endif
                                        <a type="submit" class="btn btn-primary btn-sm">افزودن سفارش جدید</a>
                                    </form>
                                @endif

                                <!--end::Button-->
                            </div>
                            <!--begin::خلاصه سفارش-->
                            <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
                                <!--begin::سفارشdetails-->
                                <div class="card card-flush py-4 flex-row-fluid">
                                    <!--begin::کارت header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>جزییات سفارش {{ $setting->productCode.'-'.$order->order_number }}</h2>
                                        </div>
                                    </div>
                                    <!--end::کارت header-->
                                    <!--begin::کارت body-->
                                    <div class="card-body pt-0">
                                        <div class="table-responsive">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                <tbody class="fw-semibold text-gray-600">
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-calendar fs-2 me-2"></i>تاریخ ثبت</div>
                                                    </td>
                                                    <td class="fw-bold text-end">{{ verta($order->created_at) }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-wallet fs-2 me-2"></i>روش پرداخت</div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        {{ $order->paymentMethod->title }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-truck fs-2 me-2"></i>روش ارسال</div>
                                                    </td>
                                                    <td class="fw-bold text-end"> {{ $order->DeliveryMethod->name }} </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>
                                                            وضعیت سفارش </div>
                                                    </td>
                                                    <td class="fw-bold text-end"> {{ $order->DeliveryMethodStatus->title }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>
                                                            وضعیت پرداخت </div>
                                                    </td>
                                                    <td class="fw-bold text-end"> {{ $order->payment_status }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>
                                                             زمان دریافت کالا </div>
                                                    </td>
                                                    @php
                                                        $time = explode('-',$order->delivery_date);

                                                    @endphp
                                                    <td class="fw-bold text-end"> {{ count($time) > 1 ? $time[1].' ' .$time[2].'  '.$order->delivery_time : ' ' }}</td>
                                                </tr>
                                                @if($order->DeliveryMethod->id==1)
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>
                                                             گد رهگیری </div>
                                                    </td>
                                                    <td class="fw-bold text-end"> {{ $order->TrackingCode }}</td>
                                                </tr>
                                                @endif
                                                </tbody>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                    </div>
                                    <!--end::کارت body-->
                                </div>
                                <!--end::سفارشdetails-->
                                <!--begin::جزییات مشتری-->
                                <div class="card card-flush py-4 flex-row-fluid">
                                    <!--begin::کارت header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>جزییات مشتریان</h2>
                                        </div>
                                    </div>
                                    <!--end::کارت header-->
                                    <!--begin::کارت body-->
                                    <div class="card-body pt-0">
                                        <div class="table-responsive">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                <tbody class="fw-semibold text-gray-600">
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-profile-circle fs-2 me-2"></i>تحویل گیرنده</div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <div class="d-flex align-items-center justify-content-end">
                                                            <!--begin:: آواتار -->

                                                            <!--end::Avatar-->
                                                            <!--begin::نام-->
                                                            <a  class="text-gray-600 text-hover-primary"> {{ $address->title == null ? 'کاربر' :$address->title }}</a>
                                                            <!--end::نام-->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-sms fs-2 me-2"></i>ایمیل</div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a href="apps/user-management/users/view.html" class="text-gray-600 text-hover-primary">dam@consilting.com</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-phone fs-2 me-2"></i>تلفن</div>
                                                    </td>
                                                    <td class="fw-bold text-end">{{ $address->cellphone }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-phone fs-2 me-2"></i>شماره تماس دوم</div>
                                                    </td>
                                                    <td class="fw-bold text-end">{{ $address->tel }}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                    </div>
                                    <!--end::کارت body-->
                                </div>
                                <!--end::جزییات مشتری-->
                                <!--begin::اسناد-->
                                <div class="card card-flush py-4 flex-row-fluid">
                                    <!--begin::کارت header-->
                                    <div class="card-header">
                                        <div class="card-title">
                                            <h2>وضعیت پرداختی</h2>
                                        </div>
                                    </div>
                                    <!--end::کارت header-->
                                    <!--begin::کارت body-->
                                    <div class="card-body pt-0">
                                        <div class="table-responsive">
                                            <!--begin::Table-->
                                            <table class="table align-middle table-row-bordered mb-0 fs-6 gy-5 min-w-300px">
                                                <tbody class="fw-semibold text-gray-600">
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>مبلغ کل (تومان):

                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ number_format($order->total_amount) }}</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>مبلغ کد تخفیف (تومان):

                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ number_format($order->coupon_amount) }}</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-wallet fs-2 me-2"></i> کیف پول  (تومان):

                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ number_format($order->wallet) }}</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>

                                                            @if($order->DeliveryMethod->id==6 or $order->DeliveryMethod->id==7)
                                                                @if($order->address->province_id==3 or $order->address->province_id==8)
                                                                    هزینه ارسال:
                                                                @else
                                                                    هزینه حمل تا {{ $order->DeliveryMethod->name }}:
                                                                @endif
                                                            @else
                                                                هزینه ارسال:
                                                            @endif

                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ number_format($order->delivery_amount) }}</a>
                                                    </td>
                                                </tr>
                                                @if($order->paymentMethod->id==3)
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>

                                                            @if($order->DeliveryMethodStatus->id==1)
                                                                مبلغ قابل پرداخت (تومان):
                                                            @elseif($order->DeliveryMethodStatus->id==2)
                                                                مبلغ پرداختی (تومان):
                                                            @else
                                                                مبلغ قابل پرداخت (تومان):
                                                            @endif

                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ number_format($order->paying_amount) }}</a>
                                                    </td>
                                                </tr>
                                                @else
                                                    <tr>
                                                        <td class="text-muted">
                                                            <div class="d-flex align-items-center">
                                                                <i class="ki-outline ki-devices fs-2 me-2"></i>

                                                                مبلغ پرداختی (تومان):
                                                            </div>
                                                        </td>
                                                        <td class="fw-bold text-end">
                                                            <a  class="text-gray-600 text-hover-primary">{{ number_format($order->paying_amount) }}</a>
                                                        </td>
                                                    </tr>
                                                @endif
                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>

                                                            کد تخفیف  (تومان):
                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ $order->coupon_id == null ? 'استفاده نشده' : $order->coupon->code }}</a>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td class="text-muted">
                                                        <div class="d-flex align-items-center">
                                                            <i class="ki-outline ki-devices fs-2 me-2"></i>

                                                            مانده  (تومان):
                                                        </div>
                                                    </td>
                                                    <td class="fw-bold text-end">
                                                        <a  class="text-gray-600 text-hover-primary">{{ number_format($order->deposit) }}</a>
                                                    </td>
                                                </tr>

                                                </tbody>
                                            </table>
                                            <!--end::Table-->
                                        </div>
                                    </div>
                                    <!--end::کارت body-->
                                </div>
                                <!--end::اسناد-->
                            </div>
                            <!--end::خلاصه سفارش-->
                            <!--begin::Tab content-->
                            <div class="tab-content">
                                <!--begin::Tab pane-->
                                <div class="tab-pane fade show active" id="kt_ecommerce_sales_order_summary" role="tab-panel">
                                    <!--begin::سفارشات-->
                                    <div class="d-flex flex-column gap-7 gap-lg-10">
                                        <div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
                                            <!--begin::پرداخت address-->
                                            <div class="card card-flush py-4 flex-row-fluid position-relative">
                                                <!--begin::برگشتground-->
                                                <div class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                    <i class="ki-solid ki-two-credit-cart" style="font-size: 14em"></i>
                                                </div>
                                                <!--end::برگشتground-->
                                                <!--begin::کارت header-->
                                                <div class="card-header">
                                                    <div class="card-title">
                                                        <h2>توضیحات سفارش:</h2>
                                                    </div>
                                                </div>
                                                <!--end::کارت header-->
                                                <!--begin::کارت body-->
                                                <div class="card-body pt-0">
                                                    {{ $order->description != null ? $order->description : ' ' }}


                                                </div>
                                                <!--end::کارت body-->
                                            </div>
                                            <!--end::پرداخت address-->
                                            <!--begin::حمل دریایی address-->
                                            <div class="card card-flush py-4 flex-row-fluid position-relative">
                                                <!--begin::برگشتground-->
                                                <div class="position-absolute top-0 end-0 bottom-0 opacity-10 d-flex align-items-center me-5">
                                                    <i class="ki-solid ki-delivery" style="font-size: 13em"></i>
                                                </div>
                                                <!--end::برگشتground-->
                                                <!--begin::کارت header-->
                                                <div class="card-header">
                                                    <div class="card-title">
                                                        <h2>  آدرس تحویل گیرنده</h2>
                                                    </div>
                                                </div>
                                                <!--end::کارت header-->
                                                <!--begin::کارت body-->
                                                <div class="card-body pt-0">


                                                    {{ province_name($order->address->province_id).' / '.city_name($order->address->city_id).' - '.$order->address->address }}

                                                </div>
                                                <!--end::کارت body-->
                                            </div>
                                            <!--end::حمل دریایی address-->
                                        </div>
                                        <!--begin::محصولات لیست-->
                                        <div class="card card-flush py-4 flex-row-fluid overflow-hidden">
                                            <!--begin::کارت header-->
                                            <div class="card-header">
                                                <div class="card-title">
                                                    <h2>سفارش سفارش: {{ $setting->productCode.'-'.$order->order_number }}</h2>
                                                </div>
                                            </div>
                                            <!--end::کارت header-->
                                            <!--begin::کارت body-->
                                            <div class="card-body pt-0">
                                                <div class="table-responsive">
                                                    <!--begin::Table-->
                                                    @php
                                                        $i=1;
                                                        $total_quantitiy=0;
                                                    @endphp
                                                    <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                                                        <thead>
                                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                                            <th class="min-w-175px"><span>تصویر</span></th>

                                                            <th class=""><span>اقلام افزوده</span>
                                                            </th>
                                                            <th class=""><span>تعداد</span></th>
                                                        </tr>
                                                        </thead>
                                                        <tbody class="fw-semibold text-gray-600">
                                                        @foreach ($order->orderItems as $item)