@extends('layouts.main')

@push('nav_title')
    <a class="navbar-brand" href="{{route('products')}}">Product</a>
@endpush

@section('page_title')
    <div class="container">
        <h1>Products List</h1>

        <div class="d-flex justify-content-between">
            <div class="card user-management">
                <div class="card-body management">
                    <div class="upcoming-box">
                        <div class="upcoming-icon"><span class="d-flex text-xl"><i class="fa-solid fa-user"></i></span></div>
                        <h1>Total Products: {{ $products->count() }}</h1>
                    </div>

            <div class="add-product-btn">
                <a href="{{route('product_form')}}">
                    <button class="btn btn-primary">Add Product</button>
                </a>
            </div>
        </div>

        </div>
    </div>
@endsection


@section('side_bar')

    @include('layouts/side_bar')

@endsection


@section('profile')

    @include('layouts/profile')

@endsection


@section('main_div')
    <div class="container">

        <div class="product-card">
            <div class="product-body">
                <div class="row g-20">
                    @foreach($products as $product)

                        <div class="col-xxl-3 col-lg-4 col-sm-6">
                            <div class="product-box">
                                <div class="product-img">
{{--                                    <img src="https://demo-activewear.myshopify.com/cdn/shop/products/axel-ribbed-tank-top-white-front-1000x1500_a4c09da5-5687-43fb-9ebd-9cf0fc21e3cc.jpg?v=1695528536&amp;width=360">--}}
                                    <img src="{{ url('/../../interior.images.local/'.$product->image) }}">
                                </div>
                                    <div class="p-8">
                                        <h5 class="mb-8"><a href="course-details.html" 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 class="flex-align gap-8">
                                            <div class="flex-align gap-2">
                                                <span class="text-sm text-main-600 d-flex"><i class="fas fa-sort-amount-up"></i></span>
                                                <span class="text-18 text-gray-600">{{$product->quantity}}</span>
                                            </div>
                                            <div class="flex-align gap-2">
                                                <span class="text-sm text-main-600 d-flex"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></span>
                                                <span class="text-18 text-gray-600">{{$product->size}}</span>
                                            </div>


                                            <div class="flex-between gap-4 flex-wrap ">
                                                <div class="flex-align gap-2">
                                                    <a href="{{route('edit_product',['id'=>$product->id])}}">
                                                        <span class="icon"><i class="fas fa-edit"></i></span>
                                                    </a>
                                                    |
                                                    <a href="{{route('delete_product',['id'=>$product->id])}}">
                                                        <span class="icon"><i class="ph ph-trash"></i></span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>


                    @endforeach

                </div>
            </div>
        </div>
    </div>
    </div>
@endsection