@extends('layouts.portal_theme_01')
@section('customcss')
    <style>
        .card-img-top {
            height: 200px; /* Ensures all images are the same height */
            object-fit: cover; /* Maintains aspect ratio and ensures image fills the container */
        }

        .card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Aligns content properly inside the card */
        }
    </style>
    @section('content')
        @php
            $collection_id = $response['collection_id'];
            $data = $response['data']??[];
            $collections = [];
        @endphp

        @foreach($data['collections'] as $collection)
            @php
                $collections[] = [
                    'collection_id' => $collection['collection_id'] ,
                    'collection_name' => $collection['collection_name'],
                    'total_products' =>  count($collection['products']),
                     ];
            @endphp

        @endforeach
        @php
            $collections = array_map(
                "unserialize",
                array_unique(
                    array_map("serialize", $collections)
                )
            );
//            echo __FUNCTION__ . json_encode($data);
//            echo __FUNCTION__ . json_encode($collections);
//            exit;
        @endphp

        <div class="container pb-5">
            <div class="row mt-3">
                <div class="col-lg-3 ">
                    <div class="card ">
                        <div class="card-header">
                            <h3>My Collections
                                <button type="button" data-bs-toggle="modal" data-bs-target="#createModal"
                                        class="btn btn-sm btn-primary">Add
                                </button>
                            </h3>

                        </div>
                        <div class="card-body">

                            <ul class="list-group">
                                @foreach($collections as $collection)
                                    <li class="d-flex justify-content-between align-items-start">
                                        <div class="ms-2 me-auto">
                                            <div class="fw-bold">
                                                <a href="{{ URL::to('/my-pins') }}/{{  strtolower($collection['collection_id'])  }}">
                                                    {{  $collection['collection_name'] }}
                                                </a>
                                            </div>
                                            Total Products
                                        </div>
{{--                                        <span--}}
{{--                                            class="badge text-bg-primary rounded-pill">{{ $collection['total_products']  }}--}}
{{--                                        </span>--}}
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div class="row">

                        @foreach($data['collections'] as $collection)
                            @if(
            strcasecmp( strtolower( $collection['collection_id']), $collection_id) != 0 ||
            empty($collection['products'])
            )
                                @php
                                    continue;
                                @endphp
                            @endif
                            @php
                                $product =  $collection['products'][0]??[];
                            @endphp

                            <div class="col-md-4">
                                <div class="card mb-4 product-wap rounded-0">
                                    <div class="card rounded-0">
                                        @if(!empty($product['images']))
                                            <img class="card-img-top"
                                                 src="{{ $product['images'][0]['image_url'] }}">
                                        @endif
                                    </div>
                                    <div class="card-body">
                                        <a href="{{ URL::to('product/'.  strtolower($product['product_id'])  . '/view')  }}"
                                           class="h3 text-decoration-none">
                                            {{ $product['product_name'] }}
                                        </a>
                                        <p>
                                    <span>
                                        {{ $collection['collection_name'] }}
                                    </span>
                                            <br/>
                                            {{ $product['description'] }}
                                        </p>
                                        {{--                            <p class="text-center mb-0">--}}
                                        {{--                                {{ $product['store']['store_name'] }}--}}
                                        {{--                            </p>--}}
                                    </div>
                                </div>
                            </div>
                        @endforeach

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

        <form method="post" action="{{ URL::to('/collection/save-collection') }}">
            {{ csrf_field() }}
            <div class="modal" id="createModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Add Collection</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3 align-items-center">
                                <div class="col-auto">
                                    <label for="inputPassword6" class="col-form-label">Collection Name:</label>
                                </div>
                                <div class="col-auto">
                                    <input type="text" name='colname' id='colname' class="form-control boxed"
                                           required placeholder="Collection Name">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Save changes</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    @endsection

    @section('script')
        <script>


        </script>
    @endsection