@extends('Admin.layout.app')

@section('content')

<div class="container-fluid mt-4">

    {{-- PAGE TITLE --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Order #{{ $order->id }}</h4>

        <a href="{{ url()->previous() }}" class="btn btn-outline-secondary btn-sm">
            ← Back
        </a>
    </div>

    {{-- TOP CARDS --}}
    <div class="row">

        {{-- ORDER INFO --}}
        <div class="col-md-4">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white">
                    <strong>Order Information</strong>
                </div>

                <div class="card-body">
                    <p><strong>Order ID:</strong> #{{ $order->id }}</p>

                    <p>
                        <strong>Status:</strong>
                        @if($order->delivery_status == 'delivered')
                                 <span class="badge bg-success">Delivered</span>

                           @elseif($order->delivery_status == 'cancelled')
                                 <span class="badge bg-danger">Cancelled</span>

                           @else
                                 <span class="badge bg-warning">Pending</span>
                           @endif
                    </p>

                    <p>
                        <strong>Date:</strong>
                        {{ \Carbon\Carbon::createFromTimestamp($order->created_at)->format('d M Y h:i A') }}
                    </p>

                    <p>
                        <strong>Payment:</strong>
                        {{ $order->payment_method ?? 'COD' }}
                    </p>

                    <p>
                        <strong>Total:</strong>
                        <span class="text-success fw-bold">
                            Rs {{ number_format($order->grand_total, 2) }}
                        </span>
                    </p>
                </div>
            </div>
        </div>

        {{-- CUSTOMER INFO --}}
        <div class="col-md-4">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white">
                    <strong>Customer Information</strong>
                </div>

                <div class="card-body">
                    <p>
                        <strong>Name:</strong>
                        {{ $order->user->first_name ?? '' }} {{ $order->user->last_name ?? '' }}
                    </p>

                    <p>
                        <strong>Email:</strong>
                        {{ $order->user->email ?? '' }}
                    </p>
                </div>
            </div>
        </div>

        {{-- SHIPPING --}}
        <div class="col-md-4">
            <div class="card shadow-sm mb-3">
                <div class="card-header bg-white">
                    <strong>Shipping Address</strong>
                </div>

                <div class="card-body">
                    

                    <p><strong>{{ $order->shipping_address['name'] ?? '' }}</strong></p>
                    <p>{{ $order->shipping_address['address'] ?? '' }}</p>
                    <p>{{  $order->shipping_address['city'] ?? '' }}, {{  $order->shipping_address['state'] ?? '' }}</p>
                    <p>{{  $order->shipping_address['country'] ?? '' }} - {{  $order->shipping_address['postal_code'] ?? '' }}</p>
                    <p><strong>Phone:</strong> {{ $order->shipping_address['phone'] ?? '' }}</p>
                </div>
            </div>
        </div>

    </div>

    {{-- PRODUCTS TABLE --}}
    <div class="card shadow-sm mt-3">

        <div class="card-header bg-white">
            <strong>Ordered Products</strong>
        </div>

        <div class="card-body p-0">

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">

                    <thead class="table-light">
                        <tr>
                            <th>#</th>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Qty</th>
                            <th>Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        @php $grandTotal = 0; @endphp

                        @foreach($order->orderDetails as $key => $item)

                            @php
                                $total = $item->price * $item->quantity;
                                $grandTotal += $total;
                            @endphp

                            <tr>
                                <td>{{ $key + 1 }}</td>

                                <td>
                                    <strong>{{ $item->product->name ?? 'Deleted Product' }}</strong>
                                    <small class="text-muted"> {{ $item->variation ?? ''}}
                                </td>

                                <td>Rs. {{ $item->price }}</td>

                                <td>{{ $item->quantity }}</td>

                                <td class="text-success fw-bold">
                                    Rs. {{ $total }}
                                </td>
                            </tr>

                        @endforeach
                    </tbody>

                    <tfoot class="table-light">
                        <tr>
                            <th colspan="4" class="text-end">Grand Total</th>
                            <th class="text-success">
                                Rs. {{ $grandTotal }}
                            </th>
                        </tr>
                    </tfoot>

                </table>
            </div>

        </div>
    </div>

    {{-- Buttons --}}

    <div class="card-footer text-end border-top pt-4">

    <button type="button"
        class="btn btn-success rounded-pill px-4"
        data-bs-toggle="modal"
        data-bs-target="#confirmOrderModal">
        <i class="las la-check-circle"></i> Confirm Order
    </button>

    <button type="button"
        class="btn btn-danger rounded-pill px-4 ms-2"
        data-bs-toggle="modal"
        data-bs-target="#cancelOrderModal">
        <i class="las la-times-circle"></i> Cancel Order
    </button>

     <a href="{{ route('admin.order.print', $order->id) }}"
       target="_blank"
       class="btn btn-info rounded-pill px-4">
        <i class="las la-print"></i> Print
    </a>

</div>

</div>

{{--confirmation modal--}}

<div class="modal fade" id="confirmOrderModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Confirm Order</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                Are you sure you want to mark this order as Confirmed?
            </div>

            <div class="modal-footer">
                <button type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">
                    No
                </button>

                <form action="{{ route('admin.order.confirm', $order->id) }}"
                    method="POST">
                    @csrf

                    <button type="submit" class="btn btn-success">
                        Yes, Confirm
                    </button>
                </form>
            </div>

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

{{--cancle modal--}}
<div class="modal fade" id="cancelOrderModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <form action="{{ route('admin.order.cancel', $order->id) }}"
                method="POST">

                @csrf

                <div class="modal-header">
                    <h5 class="modal-title">Cancel Order</h5>
                    <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div class="mb-3">
                        <label class="form-label">
                            Cancellation Reason
                        </label>

                        <textarea
                            name="feedback"
                            class="form-control"
                            rows="4"
                            placeholder="Enter cancellation reason..."
                            required></textarea>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                        Close
                    </button>

                    <button type="submit"
                        class="btn btn-danger">
                        Cancel Order
                    </button>
                </div>

            </form>

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

@endsection