@extends('buyer.layout')

@section('title')
<title>Buyer Dashboard</title>
@endsection

@section('frontend-content')
<div class="container my-4 mx-auto">
    <div class="row align-items-center mb-3">
        <div class="d-flex justify-content-between align-items-center w-100">
            <h4 class="my-0">Welcome, {{ Auth::user()->name ?? 'Buyer Name' }}</h4>
            <div class="d-flex gap-2">
                <div class="p-2 px-3 bg-light border rounded">
                    <strong>3</strong> Active Orders
                </div>
                <div class="p-2 px-3 bg-light border rounded">
                    <strong>2</strong> Pending Approvals
                </div>
            </div>
        </div>
    </div>

    {{-- Active Orders and Production Timeline --}}
    <div class="row">
        {{-- Active Orders Card --}}
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="row card-body">
                    <div class="col-sm-6">
                        <h5 class="card-title">Active Orders</h5>
                        <p>Order #1234</p>
                        <h6>Product Name</h6>
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-shirt me-2 fs-4"></i>
                            <h7>500 units In Production</h7>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="progress my-3 h-25">
                            <div class="progress-bar bg-secondary" style="width: 30%">Sampling</div>
                            <div class="progress-bar bg-primary" style="width: 40%">Production</div>
                            <div class="progress-bar bg-success" style="width: 30%">Started</div>
                        </div>
                        <div class="d-flex gap-2 my-3">
                            <a href="#" class="btn btn-outline-primary">View Details</a>
                            <a href="#" class="btn btn-outline-secondary">Track Shipment</a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Recent Activities / Notifications --}}
            <div class="col-md-12 my-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Recent Activities / Notifications</h5>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">✅ Your sample for Order #1235 was approved</li>
                            <li class="list-group-item">📦 Shipment for Order #1222 has been dispatched</li>
                            <li class="list-group-item text-danger">⚠️ Delay alert: Fabric sourcing delayed by 2 days
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row">
                {{-- Pending Actions --}}
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Pending Actions</h5>
                            <ul class="list-unstyled">
                                <li>• Approve sample for Order #1235</li>
                                <li>• Confirm PO for Order #1236</li>
                                <li>• Provide design feedback on Order #1237</li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Document Center --}}
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Document Center</h5>
                            <ul class="list-unstyled">
                                <li><a href="#">Latest Invoice</a></li>
                                <li><a href="#">Sample Image</a></li>
                                <li><a href="#">QC Report</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- Production Timeline --}}
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Production Timeline</h5>
                    <p>Tech Pack Approved</p>
                    <div class="progress mb-2">
                        <div class="progress-bar" style="width: 80%"></div>
                    </div>

                    <p>Sample Sent</p>
                    <div class="progress mb-2">
                        <div class="progress-bar bg-info" style="width: 60%"></div>
                    </div>

                    <p>Production Started</p>
                    <div class="progress mb-2">
                        <div class="progress-bar bg-warning" style="width: 20%"></div>
                    </div>

                    <p>Dispatch Date: <strong>Sep 05 2023</strong></p>
                    <a href="#" class="btn btn-sm btn-outline-primary">View More</a>
                </div>
            </div>

            {{-- Analytics & Insights --}}
            <div class="col-md-12 my-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Analytics & Insights</h5>
                        <p>On-Time Delivery Rate</p>
                        <div class="d-flex align-items-center mb-2">
                            <div class="display-6 me-3">60%</div>
                            <div class="progress w-100">
                                <div class="progress-bar bg-success" style="width: 60%"></div>
                            </div>
                        </div>
                        <p>Top Products Ordered</p>
                        <div class="d-flex gap-2">
                            <a href="#" class="btn btn-outline-primary btn-sm">View More</a>
                            <a href="#" class="btn btn-outline-secondary btn-sm">Contact</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Notifications, Actions, Documents, Analytics --}}
    <div class="row">



    </div>



</div>
@endsection

@section('custom-script')
@endsection