@include('business.layouts.head')
@include('business.layouts.header')
<style>

.collection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.collection-head {
    order: 0;
}
.collection-btn{
    order: 1;
}
.collection-wrap {
    box-shadow: 1px 2px 66px #eee;
    padding: 20px;
    background: #f3f5f700;
    border-radius: 20px;
    margin: 20px;
    box-sizing: border-box;
}
.collection-wrap ul {
    padding-left: 0px;
}
.collection-wrap ul {
    padding-left: 0px;
    display: flex;
    gap: 24px;
}
.collection-wrap ul .col-lg-4 {
    width: calc(33% - 13px);
    flex: none;
}
</style>

<div class="main-content">
    <section class="home">
        <div class="container">
            <div class="row">
                @include('business.layouts.sidebar')
                <div class="col-lg-9">
                    <div class="card">
                        <div class="card-body">
                        @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        @if(session('info'))
                            <div class="alert alert-info">
                                {{ session('info') }}
                            </div>
                        @endif
                            <div class="card-title">Collections</div>

                            <div class="row">


                                <div class="col-lg-12 ">


                                    @foreach($collectionList as $collection)
                                    <div class="collection-wrap">
                                        <div class="collection">
                                            <div class="collection-btn"><a class="btn btn-light btn-small me-1 edit-collection-data" data-name="{{$collection->collectionName}}" data-id="{{$collection->collectionId}}"><i class="far fa-edit me-1"></i></a>
                                                <a data-confirm="Are you sure?" href="{{url('delete-collection/'.$collection->collectionId)}}" class="btn btn-light btn-small ms-1" onclick="return myFunction();"><i class="fas fa-trash-alt me-1 text-danger"></i></a></div>
                                                <div class="collection-head"><h2>{{ $collection->collectionName }}</h2></div>
                                            </div>
                                            <div class="col-lg-12">
                                            <ul>
                                                @foreach($collection->products as $product)
                                                    <div class="col-lg-4"> <a href="{{url('product-details/'.$product->productId)}}">
                                                        <div class="card product-card">
                                                            @if(\Illuminate\Support\Facades\File::exists(public_path(get_product_image($product->productId))))
                                                                <img class="card-img" src="{{ env('APPLICATION_URL') . get_product_image($product->productId) }}">
                                                            @else
                                                                <img class="card-img" src="https://hapiverse.com/ci_api/public/{{ get_product_image($product->productId) }}">
                                                            @endif

                                                            <div class="card-body">
                                                                <h3 class="card-title">{{$product->productName}}</h3>
                                                                <p class="price">${{$product->productPrice}}</p>

                                                            </div>
                                                        </div>
                                                        </a>
                                                    </div>
                                                @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

@include('business.layouts.footer')
<script>
  function myFunction() {
      if(!confirm("Are You Sure to delete this"))
      event.preventDefault();
  }
 </script>