@extends('layouts.vendor.vendor')
@section('title', 'Order Detail')
@section('content')

<div class="container-fluid px-4 py-3">

    <a href="{{ route('vendor.orders') }}" class="btn btn-outline-primary btn-sm mb-4">← Back to Orders</a>

    @if(session('success'))
        <div class="alert border-0 rounded-3 mb-3 small fw-medium" style="background:#e6f7f0; color:#0a8a55;">
            ✓ {{ session('success') }}
        </div>
    @endif

    {{-- Order Title + Status --}}
    @php
        $badgeMap = [
            'pending'    => ['bg' => 'warning',   'text' => 'dark'],
            'accepted'   => ['bg' => 'success',   'text' => 'white'],
            'dispatched' => ['bg' => 'primary',   'text' => 'white'],
            'delivered'  => ['bg' => 'success',   'text' => 'white'],
            'completed'  => ['bg' => 'secondary', 'text' => 'white'],
            'cancelled'  => ['bg' => 'danger',    'text' => 'white'],
        ];
        $badge = $badgeMap[$order->status] ?? $badgeMap['pending'];
    @endphp

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="fw-semibold mb-0">
            Order —
            <span class="font-monospace badge bg-primary bg-opacity-10 text-primary fw-medium px-2 py-1">
                {{ $order->po_number }}
            </span>
        </h5>
        <span class="badge rounded-pill bg-{{ $badge['bg'] }} text-{{ $badge['text'] }}">
            {{ ucfirst($order->status) }}
        </span>
    </div>

    {{-- Order Details --}}
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-header bg-light border-bottom py-2 px-3">
            <span class="text-uppercase fw-semibold text-secondary" style="font-size:11px; letter-spacing:0.6px;">Order Details</span>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-header bg-light border-bottom py-2 px-3">
        <span class="text-uppercase fw-semibold text-secondary"
              style="font-size:11px; letter-spacing:0.6px;">
            Order Items
        </span>
    </div>

    <div class="card-body p-0">
        <table class="table table-bordered mb-0 text-center">
            <thead class="table-light">
                <tr>
                    <th>ID</th>
                    <th>Item Name</th>
                    <th>Unit</th>
                    <th>Qty</th>
                    <th>Rate</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orderItems as $index => $item)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $item->name }}</td>
                        <td>{{ $item->unit }}</td>
                        <td>{{ $item->qty }}</td>
                        <td>₹ {{ number_format($item->rate, 2) }}</td>
                        <td>₹ {{ number_format($item->qty * $item->rate, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
                <div class="col-md-4">
                    <p class="text-uppercase text-secondary mb-1" style="font-size:11px; letter-spacing:0.5px; font-weight:600;">Delivery Date</p>
                    <span class="fw-medium">{{ \Carbon\Carbon::parse($order->delivery_date)->format('d M Y') }}</span>
                </div>
                <div class="col-md-4">
                    <p class="text-uppercase text-secondary mb-1" style="font-size:11px; letter-spacing:0.5px; font-weight:600;">Delivery Location</p>
                    <span class="fw-medium">{{ $order->delivery_location ?? '—' }}</span>
                </div>
                <div class="col-md-4">
                    <p class="text-uppercase text-secondary mb-1" style="font-size:11px; letter-spacing:0.5px; font-weight:600;">Notes</p>
                    <span class="fw-medium">{{ $order->notes ?? '—' }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Amount Breakdown --}}
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-header bg-light border-bottom py-2 px-3">
            <span class="text-uppercase fw-semibold text-secondary" style="font-size:11px; letter-spacing:0.6px;">Amount Breakdown</span>
        </div>
        <div class="card-body">
            <div style="max-width: 400px;">
                <div class="d-flex justify-content-between py-2 border-bottom small">
                    <span class="text-secondary">Rate × Quantity</span>
                    <span class="font-monospace">₹ {{ number_format($order->rate, 2) }} × {{ $order->quantity }}</span>
                </div>
                <div class="d-flex justify-content-between py-2 border-bottom small">
                    <span class="text-secondary">Subtotal</span>
                    <span class="font-monospace">₹ {{ number_format($order->subtotal, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between py-2 border-bottom small">
                    <span class="text-secondary">GST ({{ $order->gst_percent }}%)</span>
                    <span class="font-monospace">₹ {{ number_format($order->gst_amount, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between py-2 fw-semibold">
                    <span>Total Amount</span>
                    <span class="font-monospace">₹ {{ number_format($order->total_amount, 2) }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Accept / Reject (pending only) --}}
    @if($order->status === 'pending')
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-header bg-light border-bottom py-2 px-3">
            <span class="text-uppercase fw-semibold text-secondary" style="font-size:11px; letter-spacing:0.6px;">Order Response</span>
        </div>
        <div class="card-body d-flex gap-3">
            <form method="POST" action="{{ route('vendor.orders.updateStatus', $order->id) }}">
                @csrf
                <input type="hidden" name="status" value="accepted">
                <button type="submit" class="btn btn-sm fw-semibold px-3"
                    style="background:#e6f7f0; color:#0a8a55; border:1px solid #b7ebd6;">
                    ✓ Accept Order
                </button>
            </form>
            <button class="btn btn-sm fw-semibold px-3"
                style="background:#ffeaea; color:#c0392b; border:1px solid #f5c6c6;"
                data-bs-toggle="modal" data-bs-target="#rejectModal">
                ✕ Reject Order
            </button>
        </div>
    </div>

    {{-- Reject Modal --}}
    <div class="modal fade" id="rejectModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-3">
                <form method="POST" action="{{ route('vendor.orders.updateStatus', $order->id) }}">
                    @csrf
                    <input type="hidden" name="status" value="cancelled">
                    <div class="modal-header border-bottom">
                        <h6 class="modal-title fw-semibold">Reject Order</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-2"
                            style="font-size:11px; letter-spacing:0.5px;">
                            Reason for Rejection <span class="text-danger">*</span>
                        </label>
                        <textarea name="reject_reason" class="form-control form-control-sm rounded-2"
                            rows="3" placeholder="Enter reason..." required></textarea>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger btn-sm">Confirm Reject</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif

    {{-- Status Update (accepted / dispatched) --}}
    @if(in_array($order->status, ['accepted', 'dispatched']))
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-header bg-light border-bottom py-2 px-3">
            <span class="text-uppercase fw-semibold text-secondary" style="font-size:11px; letter-spacing:0.6px;">Update Status</span>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('vendor.orders.updateStatus', $order->id) }}"
                  class="d-flex gap-3 align-items-center">
                @csrf
                <select name="status" class="form-select form-select-sm w-auto rounded-2">
                    <option value="accepted"   {{ $order->status == 'accepted'   ? 'selected' : '' }}>Accepted</option>
                    <option value="dispatched" {{ $order->status == 'dispatched' ? 'selected' : '' }}>Dispatched</option>
                    <option value="delivered"  {{ $order->status == 'delivered'  ? 'selected' : '' }}>Delivered</option>
                </select>
                <button type="submit" class="btn btn-primary btn-sm px-3 fw-semibold">Update Status</button>
            </form>
        </div>
    </div>
    @endif

    {{-- Dispatch & Tracking --}}
    @if(!in_array($order->status, ['pending', 'cancelled']))
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-header bg-light border-bottom py-2 px-3">
            <span class="text-uppercase fw-semibold text-secondary" style="font-size:11px; letter-spacing:0.6px;">Dispatch & Tracking Details</span>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('vendor.orders.dispatch', $order->id) }}"
                  enctype="multipart/form-data">
                @csrf
                <div class="row g-3">

                    <div class="col-md-4">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-1"
                            style="font-size:11px; letter-spacing:0.5px;">Tracking Number</label>
                        <input type="text" name="tracking_number" class="form-control form-control-sm rounded-2"
                            value="{{ $order->tracking_number }}" placeholder="e.g. TRK123456">
                    </div>

                    <div class="col-md-4">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-1"
                            style="font-size:11px; letter-spacing:0.5px;">Courier / Transport Name</label>
                        <input type="text" name="courier_name" class="form-control form-control-sm rounded-2"
                            value="{{ $order->courier_name }}" placeholder="e.g. DTDC, Mahindra Logistics">
                    </div>

                    <div class="col-md-4">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-1"
                            style="font-size:11px; letter-spacing:0.5px;">Vehicle Number</label>
                        <input type="text" name="vehicle_number" class="form-control form-control-sm rounded-2"
                            value="{{ $order->vehicle_number }}" placeholder="e.g. TN01AB1234">
                    </div>

                    <div class="col-md-4">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-1"
                            style="font-size:11px; letter-spacing:0.5px;">Dispatch Date</label>
                        <input type="date" name="dispatch_date" class="form-control form-control-sm rounded-2"
                            value="{{ $order->dispatch_date }}">
                    </div>

                    <div class="col-md-4">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-1"
                            style="font-size:11px; letter-spacing:0.5px;">Invoice (PDF)</label>
                        <input type="file" name="invoice" class="form-control form-control-sm rounded-2" accept=".pdf">
                        @if($order->invoice_path)
                            <a href="{{ asset('storage/' . $order->invoice_path) }}"
                               target="_blank"
                               class="btn btn-outline-primary btn-sm rounded-pill px-3 mt-2">
                                📄 View Invoice
                            </a>
                        @endif
                    </div>

                    <div class="col-md-4">
                        <label class="text-uppercase text-secondary fw-semibold d-block mb-1"
                            style="font-size:11px; letter-spacing:0.5px;">Delivery Challan (PDF)</label>
                        <input type="file" name="challan" class="form-control form-control-sm rounded-2" accept=".pdf">
                        @if($order->challan_path)
                            <a href="{{ asset('storage/' . $order->challan_path) }}"
                               target="_blank"
                               class="btn btn-outline-primary btn-sm rounded-pill px-3 mt-2">
                                📄 View Challan
                            </a>
                        @endif
                    </div>

                    <div class="col-12">
                        <button type="submit" class="btn btn-primary btn-sm px-4 fw-semibold">
                            Save Dispatch Details
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>
    @endif

    {{-- Rejection Reason --}}
    @if($order->status === 'cancelled' && $order->reject_reason)
    <div class="card border-0 shadow-sm rounded-3 mb-4">
        <div class="card-header bg-light border-bottom py-2 px-3">
            <span class="text-uppercase fw-semibold text-secondary" style="font-size:11px; letter-spacing:0.6px;">Rejection Reason</span>
        </div>
        <div class="card-body">
            <p class="mb-0 small text-danger">{{ $order->reject_reason }}</p>
        </div>
    </div>
    @endif

</div>

@endsection