@extends('layout.template')

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

@section('content')

<style>
    .timeline {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin: 20px 0;
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 22px;
        left: 0;
        width: 100%;
        height: 4px;
        background: #ddd;
        z-index: 0;
    }

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

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

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

    .step p {
        margin-top: 8px;
        font-size: 12px;
    }

    .review-box {
        border-top: 1px solid #eee;
        padding-top: 15px;
    }

    <style>.star-rating {
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
    }

    .star-rating input {
        display: none;
    }

    .star-rating label {
        font-size: 25px;
        color: #ccc;
        cursor: pointer;
    }

    .star-rating input:checked~label {
        color: gold;
    }

    .star-rating label:hover,
    .star-rating label:hover~label {
        color: gold;
    }

    #preview img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
    }
</style>
</style>

<div class="container py-4">

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

    {{-- ORDER SUMMARY --}}
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">

                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Order ID:</strong> {{ $order['order_number'] }}</p>
                            <p><strong>Date:</strong> {{ $order['order_date'] }}</p>
                            <p><strong>Status:</strong>
                                <span class="badge bg-{{ $colors[$order['status']] ?? 'secondary' }}">{{ ucfirst($order['status']) }}</span>
                            </p>
                        </div>

                        <div class="col-md-6 text-md-end">
                            <p><strong>Total:</strong> ₹{{ number_format($order['amounts']['total'],2) }}</p>
                            <p><strong>Payment:</strong>
                                {{ strtoupper($order['payment']['method']) }}
                                ({{ ucfirst($order['payment']['status']) }})
                            </p>
                        </div>
                    </div>

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

        <div class="col-md-6">
            {{-- TRACKING / COURIER --}}
            <div class="card mb-4 shadow-sm pb-6">
                <div class="card-body d-flex justify-content-between align-items-center">

                    <div>
                        <h5>Courier: {{ $order['courier']['name'] }}</h5>
                        <p>
                            <a href="{{ $order['courier']['website_address'] }}" target="_blank" style="color:blue;">
                                Track Shipment
                            </a>
</p>
                    </div>

                    <img src="{{ $order['courier']['logo'] }}" height="60">
                </div>
            </div>
        </div>
    </div>


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

    $currentStatus = $order['status'];
    $currentIndex = array_search($currentStatus, $steps);
    @endphp
    {{-- 🔥 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>
{{-- ORDER ITEMS --}}
<div class="row">
    <div class="col-md-6">
        <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="d-flex align-items-center border-bottom mb-3 pb-3">

                    <img src="{{ $item['image'] }}" width="80" class="me-3 rounded">

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

                    <div>
                        ₹{{ number_format($item['total'],2) }}
                    </div>

                </div>
                @endforeach

            </div>
        </div>
    </div>
    <div class="col-md-6">
        {{-- PRICE DETAILS --}}
        <div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h5>Price Details</h5>
            </div>
            <div class="card-body">

                <div class="d-flex justify-content-between">
                    <span>Subtotal</span>
                    <span>₹{{ number_format($order['amounts']['sub_total'],2) }}</span>
                </div>

                <div class="d-flex justify-content-between">
                    <span>Delivery Fee</span>
                    <span>₹{{ number_format($order['amounts']['delivery_fee'],2) }}</span>
                </div>

                <div class="d-flex justify-content-between">
                    <span>Discount</span>
                    <span>- ₹{{ number_format($order['amounts']['discount'],2) }}</span>
                </div>

                <hr>

                <div class="d-flex justify-content-between fw-bold">
                    <span>Total</span>
                    <span>₹{{ number_format($order['amounts']['total'],2) }}</span>
                </div>

            </div>
        </div>
    </div>
</div>
{{-- ADDRESSES --}}
<div class="row mb-4">

    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header">
                <h6>Billing Address</h6>
            </div>
            <div class="card-body">
                <p>{{ $order['billing_address']['name'] }}</p>
                <p>{{ $order['billing_address']['address_line1'] }}</p>
                <p>{{ $order['billing_address']['address_line2'] }}</p>
                <p>{{ $order['billing_address']['city'] }}, {{ $order['billing_address']['state'] }}</p>
                <p>{{ $order['billing_address']['pincode'] }}</p>
                <p>{{ $order['billing_address']['phone'] }}</p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header">
                <h6>Shipping Address</h6>
            </div>
            <div class="card-body">
                <p>{{ $order['shipping_address']['name'] }}</p>
                <p>{{ $order['shipping_address']['address_line1'] }}</p>
                <p>{{ $order['shipping_address']['address_line2'] }}</p>
                <p>{{ $order['shipping_address']['city'] }}, {{ $order['shipping_address']['state'] }}</p>
                <p>{{ $order['shipping_address']['pincode'] }}</p>
                <p>{{ $order['shipping_address']['phone'] }}</p>
            </div>
        </div>
    </div>

</div>


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

<div class="card shadow-sm mb-4">
    <div class="card-header">
        <h5>Write a Review</h5>
    </div>

    <div class="card-body">

        <form id="reviewForm" enctype="multipart/form-data">
            @csrf

            {{-- SELECT PRODUCT --}}
            <div class="mb-3">
                <label class="form-label">Select Product</label>
                <select name="product_id" class="form-control" required>
                    <option value="">Choose product</option>
                    @foreach($order['items'] as $item)
                    <option value="{{ $item['product_id'] }}">
                        {{ $item['name'] }}
                    </option>
                    @endforeach
                </select>
            </div>

            <input type="hidden" name="order_id" value="{{ $order['order_id'] }}">

            {{-- STAR RATING --}}
            <div class="mb-3">
                <label class="form-label">Rating</label>
                <div class="star-rating">
                    @for($i = 5; $i >= 1; $i--)
                    <input type="radio" name="rating" value="{{ $i }}" id="star{{ $i }}">
                    <label for="star{{ $i }}">★</label>
                    @endfor
                </div>
            </div>

            {{-- REVIEW TEXT --}}
            <div class="mb-3">
                <textarea name="review" class="form-control" placeholder="Write your review..."></textarea>
            </div>

            {{-- IMAGE UPLOAD --}}
            <div class="mb-3">
                <input type="file" name="images[]" multiple class="form-control" id="reviewImages">
                <div id="preview" class="mt-2 d-flex gap-2 flex-wrap"></div>
            </div>

            <button type="submit" class="btn btn-primary">
                Submit Review
            </button>

        </form>

    </div>
</div>

@endif


</div>

{{-- ITEMS --}}

<script>
    $('#reviewImages').on('change', function() {

        $('#preview').html('');

        let files = this.files;

        for (let i = 0; i < files.length; i++) {
            let reader = new FileReader();

            reader.onload = function(e) {
                $('#preview').append(`<img src="${e.target.result}">`);
            }

            reader.readAsDataURL(files[i]);
        }

    });


    $('#reviewForm').submit(function(e) {

        e.preventDefault();

        let formData = new FormData(this);
        let btn = $(this).find('button');

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

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

            success: function(res) {

                Swal.fire({
                    icon: 'success',
                    title: 'Review Submitted'
                });

                $('#reviewForm')[0].reset();
                $('#preview').html('');

                btn.prop('disabled', false).text('Submit Review');
            },

            error: function(err) {

                Swal.fire('Error', err.responseJSON?.message || 'Failed', 'error');

                btn.prop('disabled', false).text('Submit Review');
            }
        });

    });
</script>

@endsection