@extends('layouts.admin')

@section('content')

@include('partials.admin-show-header', [
    'back' => route('admin.quotations.index'),
    'backLabel' => 'Back to Quotations',
    'title' => 'Quotation #' . $quotation->id,
    'subtitle' => 'Requested ' . $quotation->created_at->format('M d, Y \a\t g:i A'),
])

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white h-100">
            <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3">Customer Details</h6>
            <div class="row g-3">
                <div class="col-sm-6">
                    <span class="text-muted small d-block">NAME</span>
                    <span class="fw-bold text-secondary">{{ $quotation->name }}</span>
                </div>
                <div class="col-sm-6">
                    <span class="text-muted small d-block">PHONE</span>
                    <a href="tel:{{ $quotation->phone }}" class="text-decoration-none text-danger fw-semibold">{{ $quotation->phone }}</a>
                </div>
                <div class="col-12">
                    <span class="text-muted small d-block">EMAIL</span>
                    <a href="mailto:{{ $quotation->email }}" class="text-decoration-none text-secondary">{{ $quotation->email }}</a>
                </div>
                @if($quotation->notes)
                <div class="col-12">
                    <span class="text-muted small d-block">CUSTOMER NOTES</span>
                    <div class="card bg-light border-0 p-3 rounded-3 small text-secondary mt-1">{{ $quotation->notes }}</div>
                </div>
                @endif
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white h-100">
            <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3">Product Requested</h6>
            @if($quotation->product)
                @php $img = mjs_image($quotation->product->primaryImage?->image_path, $quotation->product_id); @endphp
                <div class="d-flex gap-3 align-items-center mb-3">
                    <img src="{{ $img }}" class="rounded border object-fit-cover" style="width:72px;height:72px;" alt="">
                    <div>
                        <span class="text-danger text-uppercase fw-bold small d-block">{{ $quotation->product->brand ?? 'Generic' }}</span>
                        <h6 class="fw-bold text-secondary mb-1">{{ $quotation->product->name }}</h6>
                        <span class="fw-bold text-secondary">KSh {{ number_format($quotation->product->active_price) }}</span>
                    </div>
                </div>
                <a href="{{ route('marketplace.show', $quotation->product->slug) }}" target="_blank" class="btn btn-outline-secondary btn-sm rounded-pill">View Product</a>
            @else
                <p class="text-muted small mb-0">Product no longer available.</p>
            @endif
        </div>
    </div>
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
            <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3">Update Status</h6>
            <form action="{{ route('admin.quotations.update_status', $quotation->id) }}" method="POST" class="row g-3 align-items-end">
                @csrf
                <div class="col-md-4">
                    <label class="form-label small fw-semibold text-muted">Status</label>
                    <select name="status" class="form-select rounded-pill" data-swal-status data-swal-title="Update quotation status?">
                        @foreach(['pending', 'reviewed', 'accepted', 'rejected'] as $st)
                        <option value="{{ $st }}" {{ $quotation->status === $st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary-mj rounded-pill px-4">Save Status</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection
