@extends('layouts.main')

@push('nav_title')
    {{--    <a class="navbar-brand" href="{{route('users')}}">User</a>--}}
    <a class="navbar-brand" href="#">Enzy</a>
@endpush

@section('page_title')

@endsection


@section('side_bar')

    @include('layouts/side_bar')

@endsection


@section('profile')

    @include('layouts/profile')

@endsection



@section('main_div')

    <h1>Dashboard</h1>

    <div class="row">
        <div class="col-12">
            <div class="personal_info">

                <div class="image">

                    <div class="personal_info_container">
                        <img src="{{ 'https://www.gravatar.com/avatar/' . md5(strtolower(trim($login_user->email))) . '?s=80&d=identicon' }}" class="img-fluid">
                        <div class="name">
                            <h3>{{$user->name}}<a href="{{route('edit_account',['id' => $user->id])}}"><span><i class="fa-solid fa-pen"></i></span></a></h3>
                            <h5>{{$user->email}}<span>{{$user->phone}}</span></h5>
                        </div>
                    </div>

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

        <!-- Enhanced Credit Limit Card -->
        <div class="col-5 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <h5 class="card-title fw-bold mb-3">Credit Balance</h5>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <div>
                            <h3 class="mb-0">${{ number_format($user->budget, 2) }}</h3>
                            <p class="text-muted mb-0">Available Credit</p>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-success px-3 py-2 rounded-pill">Active</span>
                        </div>
                    </div>
                    
                    @php
                        $creditLimit = 1000; // This should come from the user model
                        $usedCredit = $creditLimit - $user->budget;
                        $percentage = ($usedCredit / $creditLimit) * 100;
                    @endphp
                    
                    <div class="progress mb-2" style="height: 10px;">
                        <div class="progress-bar {{ $percentage > 75 ? 'bg-danger' : ($percentage > 50 ? 'bg-warning' : 'bg-success') }}" 
                             role="progressbar" 
                             style="width: {{ $percentage }}%"
                             aria-valuenow="{{ $percentage }}" 
                             aria-valuemin="0" 
                             aria-valuemax="100"></div>
                    </div>
                    
                    <div class="d-flex justify-content-between small text-muted">
                        <span>Used: ${{ number_format($usedCredit, 2) }}</span>
                        <span>Total Limit: ${{ number_format($creditLimit, 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-7">
            <div class="dashboard-view">

                @foreach($categories as $category)

                    <a href="{{ route('filter_product_list', ['id' => $category->id]) }}">

                        <div class="dashboard-card">
                            <div class="dashboard-card-content">
                                <span class="dashboard-card-title">{{ ucwords($category->category) }}</span>
                                <div class="dashboard-card-value">
                                    {{--                                10+ <span class="dashboard-card-change dashboard-positive">+55%</span>--}}
                                </div>
                            </div>
                            <div class="dashboard-card-icon">
                                <i class="{{ $category->category_icon }}"></i>
                            </div>
                        </div>

                    </a>

                @endforeach

            </div>
            <div class="orders-view">
                <div class="orders-header">Recent Orders</div>
                <table class="orders-table">
                    <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Customer</th>
                        <th>Amount</th>
                        <th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                        @foreach($order_list as $order)

                            @if ($loop->index < 4)
                                <tr>
                                    <td class="orders-id">
                                        <a href="{{route('order_detail',['id'=>$order['cart_groupid']])}}">
                                            #{{$order['cart_total_id']}}
                                        </a>
                                    </td>
                                    <td class="orders-customer">{{$order['user_name']}}</td>
                                    <td class="orders-amount">${{$order['total']}}</td>
                                    <td class="orders-status orders-status-completed">Completed</td>
                                </tr>
                            @endif

                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-5">
            <div class="orders-header">Recent Articles</div>
            <div class="product-body home">

                @foreach($products->take(4) as $product)

                    <div class="product_tab">
                        <div class="product-img">
                            <img src="{{ url('/../../interior.images.local/'.$product->image) }}">
                            <div class="add-to-cart">
                                @if($product->quantity > 0)
                                    <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}">Add To
                                        Cart
                                    </button>
                                @else
                                    <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}" disabled>
                                        Add To Cart
                                    </button>
                                @endif
                            </div>
                        </div>
                        <div class="product_content">
                            <h5 class="mb-8"><a href="{{route('card_detail',['id' => $product->id])}}" class="hover-text-main-600">{{$product->name}}</a></h5>
                            <div class="flex-between gap-4 flex-wrap mt-10">
                                <div class="flex-align gap-2">
                                    <span class="price"><i class="fa-solid fa-dollar-sign"></i>{{$product->price}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>


        </div>
    </div>

    <div class="cart">
        @include('layouts.cart')
    </div>

@endsection