@include('layouts.header')

@include('layouts.tostMessage')

<style>
    body {
        min-height: 211vh;
        min-width: fit-content;
        background-size: cover;
        font-family: 'Lato', sans-serif;
        color: rgba(0, 0, 0, 0.667);
        background: linear-gradient(140deg, #ffffff, 50%, #424ca9);
    }
</style>



<!-- Content page -->
<div  style="margin-top: 100px;">
<div class="container-fluid my-5 d-flex justify-content-center">
    <div class="card card-1">
        <div class="card-body">
            <div class="container">
<div class="row justify-content-center">
    <div class="col-12 text-center">
        <h4 style="font-weight: bold; color: black; padding: 10px; border-radius: 5px;">
            ORDER DETAILS
        </h4>
    </div>
    <div class="col-12 text-center">
        <span style="font-style: italic; font-size: small; font-family: Arial, sans-serif; color: rgb(173, 211, 173); padding: 5px 10px; border-radius: 5px; animation: blink 1s infinite;">
            <span style="font-size: 20px; color: green;">✓</span>
            <span>
                <span style="color: #4CAF50;">Th</span><span style="color: #4CAF50;">an</span><span style="color: #5CAF50;">k</span> 
                <span style="color: #6CAF50;">yo</span><span style="color: #7CAF50;">u</span> 
                <span style="color: #8CAF50;">fo</span><span style="color: #9CAF50;">r</span> 
                <span style="color: #ACAF50;">yo</span><span style="color: #BCAF50;">ur</span> 
                <span style="color: #CCAF50;">or</span><span style="color: #DDAF50;">der</span>
            </span>
        </span>
    </div>
</div>
                <div class="row justify-content-center">
                    
                    <div class="col-auto ml-auto">
                        <a href="{{ route('my-orders') }}" class="btn btn-dark"
                           style="color: #fff; background-color: #37336c; border-color: #343a40; text-decoration: none;
                                  transition: background-color 0.3s ease; /* Optional: Smooth transition effect */">
                            <!-- Button text -->
                            All Orders
                        </a>
                    </div>
                </div>
            </div>

            <style>
                @keyframes blink {
                    0% {
                        opacity: 1;
                    }
                    50% {
                        opacity: 0;
                    }
                    100% {
                        opacity: 1;
                    }
                }
            </style>

            <div class="row">
                <div class="card-body">
                    <div class="row justify-content-between">
                        <div class="col-md-6 text-left">
                       

@if ($orders->isNotEmpty() && $orders->first()->delivery_status === 'delivered')
    @php
        $deliveryDate = \Carbon\Carbon::parse($orders->first()->delivery_date);
        $today = now()->startOfDay(); // Get the current date at midnight
        $tenDaysBeforeDelivery = $today->subDays(10); // Calculate 10 days before today

        // Ensure we are comparing up to the end of the delivery day
        $deliveryDayEnd = $deliveryDate->endOfDay();
    @endphp

    @if ($deliveryDate->gte($tenDaysBeforeDelivery) && $deliveryDate->lte($deliveryDayEnd))
        <div class="d-flex flex-wrap align-items-center">
            <form action="{{ route('return.replace.form') }}" method="POST" id="returnForm" class="d-inline-block">
                @csrf
                <input type="hidden" name="order_id" value="{{ $orders->first()->id }}">
                <input type="hidden" name="order_no" value="{{ $orders->first()->order_no }}">
                <input type="hidden" name="product_name" value="{{ $orders->first()->orderDetails->first()->name }}">
                <input type="hidden" name="color" value="{{ $orders->first()->orderDetails->first()->color }}">
                <input type="hidden" name="size" value="{{ $orders->first()->orderDetails->first()->size }}">
                <input type="hidden" name="return_amount" value="{{ $orders->first()->total_amount }}">
                <input type="hidden" name="name" value="{{ $orders->first()->name }}">
                <input type="hidden" name="phone" value="{{ $orders->first()->phone }}">
                <input type="hidden" name="return_email" value="{{ $orders->first()->email }}">
                <input type="hidden" name="country" value="{{ $orders->first()->country }}">
                <input type="hidden" name="address_line_1" value="{{ $orders->first()->address_line_1 }}">
                <input type="hidden" name="address_line_2" value="{{ $orders->first()->address_line_2 }}">
                <input type="hidden" name="city" value="{{ $orders->first()->city }}">
                <input type="hidden" name="postal_code" value="{{ $orders->first()->postal_code }}">
                <input type="hidden" name="state" value="{{ $orders->first()->state }}">
                <button type="submit" class="btn btn-sm btn-dark" id="returnButton">Replacement/Exchange</button>
            </form>
            
            @if ($orders->first()->shipping_link)
                <a href="{{ $orders->first()->shipping_link }}" target="_blank" class="btn btn-sm btn-dark ml-2" id="trackOrderButton">Track Your Order</a>
            @endif
        </div>
    @endif
@endif



                            @if ($orders->isNotEmpty() && $orders->first()->delivery_status === 'shipped')
                                @if ($orders->first()->shipping_link)
                                    <a href="{{ $orders->first()->shipping_link }}" target="_blank" class="btn btn-sm btn-dark" id="trackOrderButton">Track Your Order</a>
                                @endif
                            @elseif ($orders->first()->delivery_status === 'pending')
                                <form action="{{ route('cancel-order') }}" method="POST" id="cancelPendingForm">
                                    @csrf
                                    <input type="hidden" name="order_no" value="{{ $orders->first()->order_no }}">
                                    <input type="hidden" name="email" value="{{ $orders->first()->email }}">
                                    <input type="hidden" name="order_id" value="{{ $orders->first()->id }}">
                                </form>
                                <button type="button" class="btn btn-sm btn-outline-dark" id="cancelPendingButton">Cancel Order</button>
                            @elseif ($orders->first()->delivery_status === 'return_pending')
                                <form action="{{ route('cancel-order') }}" method="POST" id="cancelReturnForm">
                                    @csrf
                                    <input type="hidden" name="order_no" value="{{ $orders->first()->order_no }}">
                                    <input type="hidden" name="email" value="{{ $orders->first()->email }}">
                                    <input type="hidden" name="order_id" value="{{ $orders->first()->id }}">
                                </form>
                                <button type="button" class="btn btn-sm btn-outline-dark" id="cancelReturnButton">Cancel Return</button>
                            @elseif ($orders->first()->delivery_status === 'replacement_pending')
                                <form action="{{ route('cancel-order') }}" method="POST" id="cancelReplacementForm">
                                    @csrf
                                    <input type="hidden" name="order_no" value="{{ $orders->first()->order_no }}">
                                    <input type="hidden" name="email" value="{{ $orders->first()->email }}">
                                    <input type="hidden" name="order_id" value="{{ $orders->first()->id }}">
                                </form>
                                <button type="button" class="btn btn-sm btn-outline-dark" id="cancelReplacementButton">Cancel Replacement</button>
                            @else
                                <!-- Hide the buttons if delivery status is any of the statuses to hide -->
                                <p class="text-muted">&nbsp;</p>
                            @endif
                        </div>
<div class="col-12 text-right">
    @if ($orders->isNotEmpty() && $orders->first()->delivery_status)
        <!--<strong>Delivery Status:</strong>-->
        <p class="delivery-status" style="font-size:16px;"><b>
            @if (strtoupper($orders->first()->delivery_status) === 'REPLACED')
                Replacement Successful
            @else
                {{ strtoupper(str_replace('_', ' ', $orders->first()->delivery_status)) }}
            @endif
        </b></p>
    @else
        <p class="{{ $orders->first()->delivery_status }}-status" style="font-size:16px;"><b>

    @endif
</div>


                    </div>
                </div>
            </div>

<div class="row mt-4">
    <div class="col">
    @foreach ($orders as $order)
        <div class="card mb-3">
            <div class="card-body">
                <div class="row">
                    <h4>#{{ $order->order_no }}</h4>
                    <div class="col-md-3">
                         
                        <img src="{{ asset('product/' . explode(',', $order->orderDetails->first()->images)[0]) }}" alt="{{ $order->orderDetails->first()->name }}" class="img-thumbnail" style="max-width: 100px;" loading="lazy">
                    </div>
                    <div class="col-md-9">
                        <h5>{{ $order->orderDetails->first()->name }}</h5>
                        <p><strong>Color:</strong> {{ $order->orderDetails->first()->color }}</p>
                        <p><strong>Size:</strong> {{ $order->orderDetails->first()->size }}</p>
                        <p><strong>Quantity:</strong> {{ $order->orderDetails->first()->quantity }}</p>
                        <p><strong>Product Price:</strong> ${{ $order->orderDetails->first()->price }}</p>
                        <!--<p><strong>Total:</strong> ${{ number_format($order->orderDetails->first()->quantity * $order->orderDetails->first()->price, 2) }}</p>-->
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
   <div class="card mb-3">
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <h5 class="card-title">Order Summary</h5>
                <!--<p class="card-text">-->
                <!--    <span style="font-weight: bold;">Sub Total:</span> ${{ number_format($order->total_amount - $order->shipping_charge, 2) }}-->
                <!--</p>-->
                <p class="card-text">
                    <span style="font-weight: bold;">Delivery Charges:</span> ${{ $order->shipping_charge }}
                </p>
                <p class="card-text">
                    <span style="font-weight: bold;">Total Paid:</span> ${{ number_format($order->total_amount - $order->shipping_charge, 2) }}
                </p>
                <p class="card-text">
                    <span style="font-weight: bold;">Payment Method:</span>
                    @if ($order->payment == 'cash')
                        Cash on Delivery
                    @elseif($order->payment == 'paid')
                        Paid (Card)
                    @endif
                </p>

                <!--<h5>Shipping Method:</h5>-->
                <!--<p class="card-text">-->
                <!--    @if ($order->payment == 'cash')-->
                <!--        Cash on Delivery-->
                <!--    @elseif($order->payment == 'paid')-->
                <!--        Card-->
                <!--    @endif-->
                <!--</p>-->
            </div>

            <div class="col-md-6">
                <h5>Contact Information:</h5>
                <p><span style="font-weight: bold;">Email:</span> {{ $order->email }}</p>
                <p><span style="font-weight: bold;">Phone:</span> {{ $order->phone }}</p>
                
                <h5>Shipping Address:</h5>
                <p><span style="font-weight: bold;">Name:</span> {{ $order->name }}</p>
                <p>{{ $order->address_line_1 }}, {{ $order->address_line_2 }}, {{ $order->city }}, {{ $order->postal_code }}, {{ $order->state }}</p>
                <p><span style="font-weight: bold;">{{ $order->country }}</span> {{ $order->phone }}</p>
                
                <h5>Billing Address:</h5>
                <p><span style="font-weight: bold;">Name:</span> {{ $order->name }}</p>
                <p>{{ $order->address_line_1 }}, {{ $order->address_line_2 }}, {{ $order->city }}, {{ $order->postal_code }}, {{ $order->state }}</p>
                <p><span style="font-weight: bold;">{{ $order->country }}</span> {{ $order->phone }}</p>
            </div>
        </div>
    </div>
</div>

</div>

    @endforeach
</div>
<div class="row justify-content-center">
                    {{ $orders->links() }}
                </div>
</div>

        </div>
    </div>
</div>
</div>
@if (session('success_message'))
<script>
    Swal.fire({
    icon: 'success',
    title: '<span style="animation: blink-animation 1s infinite;">{{ session('success_message') }}</span>',
    showConfirmButton: false,
    timer: 4000,
    timerProgressBar: true,
    html: '<div style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6;">Welcome. You have now officially joined the circle. All orders are made fresh when purchased and may take 7 to 10 business days to be delivered. We appreciate your patience as well as your business. You will be notified when your order is shipped along with your tracking information based on the delivery option you selected.</div>',
    footer: 'Thank you for your order. We will connect with you soon.'
});
</script>
@elseif (session('success_payment'))
<script>
    Swal.fire({
    icon: 'success',
    title: '<span style="animation: blink-animation 1s infinite;">Order has been successfully placed</span>',
    showConfirmButton: false,
    timer: 5000,
    timerProgressBar: true,
    html: '<div style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6;">Welcome. You have now officially joined the circle. All orders are made fresh when purchased and may take 7 to 10 business days to be delivered. We appreciate your patience as well as your business. You will be notified when your order is shipped along with your tracking information based on the delivery option you selected.</div>',
    footer: 'Thank you for your payment. We will connect with you soon.'
});
</script>
@elseif (session('return_message'))
    <script>
        Swal.fire({
            icon: 'success',
            title: '<span style="animation: blink-animation 1s infinite;">Return request submitted successfully.</span>',
            showConfirmButton: false,
            timer: 5000,
            timerProgressBar: true,
            html: '<div style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6;">We regret any inconvenience caused regarding your product. We are committed to promptly inspecting and replacing your product at the earliest. A notification has been sent to your email for future updates. Stay connected with us. Thank you.</div>',
            footer: 'Thank you for your shopping with Bwc Clothing.'
        });
    </script>
@endif
@if (session('cancel_success'))
    <script>
        Swal.fire({
            icon: 'success',
            title: '<span style="animation: blink-animation 1s infinite;">{{ session('cancel_success') }}</span>',
            showConfirmButton: false,
            timer: 5000,
            timerProgressBar: true,
            html: '<div style="font-family: Arial, sans-serif; font-size: 14px; line-height: 1.6;">Your cancellation request has been processed successfully. We appreciate your understanding.</div>',
            footer: 'Thank you for choosing us.'
        });
    </script>
@endif



<script>
    // document.getElementById('returnButton').addEventListener('click', function() {
    //     if (confirm('Are you sure you want to Replacement/Exchange this order?')) {
    //         document.getElementById('returnForm').submit();
    //     }
    // });

    document.getElementById('trackOrderButton').addEventListener('click', function() {
        // Tracking analytics code here
    });

    document.getElementById('cancelPendingButton').addEventListener('click', function() {
        if (confirm('Are you sure you want to cancel this pending order?')) {
            document.getElementById('cancelPendingForm').submit();
        }
    });

    document.getElementById('cancelReturnButton').addEventListener('click', function() {
        if (confirm('Are you sure you want to cancel this return request?')) {
            document.getElementById('cancelReturnForm').submit();
        }
    });

    document.getElementById('cancelReplacementButton').addEventListener('click', function() {
        if (confirm('Are you sure you want to cancel this replacement request?')) {
            document.getElementById('cancelReplacementForm').submit();
        }
    });
</script>

@include('layouts.footer')