@extends('layout.template')

@section('title','Order Details')

@section('content')

<style>
/* 🔥 Timeline */
.timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ddd;
    z-index: 0;
}

.step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.step.active .circle {
    background: #28a745;
    color: #fff;
}

.step.completed .circle {
    background: #28a745;
    color: #fff;
}

.step span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

/* ⭐ Rating */
.star {
    font-size: 22px;
    cursor: pointer;
    color: #ccc;
}
.star.active {
    color: #ffc107;
}
</style>

@php
$steps = ['processing','shipped','delivered'];

$currentStatus = $order['status'];
$currentIndex = array_search($currentStatus, $steps);
@endphp

<div class="container py-4">

    <h3 class="mb-4">Order Details</h3>

    {{-- ORDER SUMMARY --}}
    <div class="card mb-4 shadow-sm">
        <div class="card-body d-flex justify-content-between">

            <div>
                <h5>#{{ $order['order_number'] }}</h5>
                <p class="mb-0">{{ $order['order_date'] }}</p>
            </div>

            <div>
                <strong>₹{{ number_format($order['amounts']['total'],2) }}</strong><br>
                <span class="badge bg-success">{{ ucfirst($order['status']) }}</span>
            </div>

        </div>
    </div>

    {{-- 🔥 TIMELINE --}}
    <div class="card mb-4 shadow-sm">
        <div class="card-body">

            <div class="timeline">

                @foreach($steps as $index => $step)

                    @php
                        $class = '';
                        if ($index < $currentIndex) $class = 'completed';
                        elseif ($index == $currentIndex) $class = 'active';
                    @endphp

                    <div class="step {{ $class }}">
                        <div class="circle">
                            ✔
                        </div>
                        <span>{{ ucfirst($step) }}</span>
                    </div>

                @endforeach

            </div>

        </div>
    </div>

    {{-- ITEMS --}}
    <div class="card mb-4 shadow-sm">
        <div class="card-header"><h5>Items</h5></div>
        <div class="card-body">

            @foreach($order['items'] as $item)

            <div class="border-bottom pb-3 mb-3">

                <div class="d-flex align-items-center">
                    <img src="{{ $item['image'] }}" width="80" class="me-3">

                    <div class="flex-grow-1">
                        <h6>{{ $item['name'] }}</h6>
                        <small>Qty: {{ $item['quantity'] }}</small>
                    </div>

                    <strong>₹{{ $item['total'] }}</strong>
                </div>

                {{-- ⭐ REVIEW FORM (ONLY IF DELIVERED) --}}
                @if($order['status'] == 'delivered')

                <form class="reviewForm mt-3" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $item['product_id'] }}">
                    <input type="hidden" name="order_id" value="{{ $order['order_id'] }}">
                    <input type="hidden" name="rating" class="ratingInput">

                    {{-- Stars --}}
                    <div class="mb-2 rating-stars">
                        @for($i=1;$i<=5;$i++)
                            <span class="star" data-value="{{ $i }}">★</span>
                        @endfor
                    </div>

                    <textarea name="review" class="form-control mb-2" placeholder="Write review..."></textarea>

                    <input type="file" name="images[]" multiple class="form-control mb-2">

                    <button class="btn btn-sm btn-primary submitReview">Submit Review</button>
                </form>

                @endif

            </div>

            @endforeach

        </div>
    </div>

</div>
<script>

// ⭐ STAR CLICK
$(document).on('click', '.star', function() {

    let parent = $(this).closest('.rating-stars');
    let value = $(this).data('value');

    parent.find('.star').removeClass('active');

    parent.find('.star').each(function() {
        if ($(this).data('value') <= value) {
            $(this).addClass('active');
        }
    });

    parent.closest('form').find('.ratingInput').val(value);
});


// 🚀 SUBMIT REVIEW
$(document).on('submit', '.reviewForm', function(e) {

    e.preventDefault();

    let form = this;
    let btn = $(form).find('.submitReview');

    btn.prop('disabled', true).text('Submitting...');

    let formData = new FormData(form);

    $.ajax({
        url: "{{ url('/submit-review') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success: function(res) {

            if (!res.success) {
                Swal.fire('Error', res.message, 'error');
                btn.prop('disabled', false).text('Submit Review');
                return;
            }

            Swal.fire('Success', 'Review submitted!', 'success');

            form.reset();
            $(form).find('.star').removeClass('active');
        },

        error: function() {
            Swal.fire('Error', 'Something went wrong', 'error');
            btn.prop('disabled', false).text('Submit Review');
        }
    });

});

</script>
@endsection