@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>
@endsection
@section('content')

    
    <div class="page-header">
        <div class="container">
            <div class="row py-3">
                <div class="col-12">
                    <div class="d-flex bd-highlight">
                        <div class="p-2  bd-highlight">
                            <div class="profile mr-3">
                                <i class="bi-shop" style="font-size: 4rem; color:#fff"></i>
                            </div>
                        </div>
                        <div class="p-2 flex-fill bd-highlight">
                            <h2 class="mt-0 pt-3 mb-0">
                                {{ $data['merchant']['enterprise_name'] }}
                            </h2>
                            <p>{{ $data['merchant']['address1'] }} | @if(Auth::check())
                                    <i class="bi bi-telephone"></i> {{ $data['merchant']['phone1'] }}
                                @else
                                    <i class="bi bi-telephone"></i> ***-***-****
                                @endif<br/>
                                <span>
                                    <a  class="btn btn-sm btn-primary" href="{{ URL::to('/enterprise/' . $data['merchant']['eidn'] . '/products/browse')  }}">
                                        Browse Store
                                    </a>
                                    <button class="btn btn-sm btn-primary" id="btnfollow" data-storeid="{{$data['merchant']['eidn']}}" >
                                        <i class="bi bi-plus-circle-fill"></i>
                                    </button>
                                </span>
                            </p>
                        </div>

                        <div class="d-flex flex-row-reverse bd-highlight py-4">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item"><h5 class="font-weight-bold mb-0 d-block">
                                        <a href="{{ URL::to('/enterprise/' . $data['merchant']['eidn'] . '/products/browse')  }}">10</a>
                                    </h5>
                                    <small
                                        class="text-muted"> <i class="fas fa-image mr-1"></i>Products</small></li>
                                <li class="list-inline-item"><h5 class="font-weight-bold mb-0 d-block">1</h5><small
                                        class="text-muted"> <i class="fas fa-user mr-1"></i>Followers</small></li>
                                <li class="list-inline-item"><h5 class="font-weight-bold mb-0 d-block">1</h5><small
                                        class="text-muted"> <i class="fas fa-user mr-1"></i>Following</small></li>
                            </ul>
                        </div>

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


    <div class="container-fluid">
        <div class="row">
    <div class="col-lg-3">
        <div class="card mt-3" >
            <div class="card-body">
                <h3>Categories</h3>
                <ul class="collapse show list-unstyled pl-3">
                    @foreach($data['categories'] as $category)
                        <div class="form-check">
                            <input class="form-check-input category-filter" type="checkbox"
                                   value="{{ $category['code'] }}"
                                   id="{{ trim($category['name']) }}">
                            <label class="form-check-label fs-6" for="{{ $category['name'] }}">
                                {{ ucfirst( strtolower($category['name']) ) }}
                            </label>
                        </div>
                    @endforeach
                </ul>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-body">
                <h3>Sub-categories</h3>
                <ul id="collapseTwo" class="list-unstyled pl-3">
                    <ul class="collapse show list-unstyled pl-3">
                        @foreach($data['subcategories'] as $subcategory)
                            <li class="form-check">
                                <input class="form-check-input subcategory-filter" type="checkbox"
                                       value="{{ $subcategory['sub_code'] }}"
                                       id="{{ $subcategory['sub_name'] }}">
                                <label class="form-check-label fs-6" for="{{ $subcategory['sub_code'] }}">
                                    {{ ucfirst( strtolower( $subcategory['sub_name'])) }}
                                </label>
                            </li>
                        @endforeach
                    </ul>
                </ul>
            </div>
        </div>

    </div>

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

                    </div>
                    <div class="col-md-6 pb-4">
{{--                        <div class="d-flex">--}}
{{--                            <select class="form-control">--}}
{{--                                <option>Featured</option>--}}
{{--                                <option>A to Z</option>--}}
{{--                                <option>Item</option>--}}
{{--                            </select>--}}
{{--                        </div>--}}
                    </div>
                </div>
                <div class="row">

                    @foreach($data['products'] as $product)
                    <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>
                                    {{ $product['description'] }}
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

    <script>
        $(document).ready(function () {
            const urlParams = new URLSearchParams(window.location.search);
            const categories = urlParams.getAll('category[]');
            categories.forEach(function (val) {
                $(`.category-filter[value="${val}"]`).prop('checked', true);
            });
            const subcategories = urlParams.getAll('subcategory[]');
            subcategories.forEach(function (val) {
                $(`.subcategory-filter[value="${val}"]`).prop('checked', true);
            });
        });


        $('.form-check-input').on('change', function () {
            let filters = {
                category: [],
                subcategory: []
            };
            $('.category-filter:checked').each(function () {
                filters.category.push($(this).val());
            });
            $('.subcategory-filter:checked').each(function () {
                filters.subcategory.push($(this).val());
            });
            const params = new URLSearchParams();
            filters.category.forEach(val => params.append('category[]', val));
            filters.subcategory.forEach(val => params.append('subcategory[]', val));
            window.location.href = window.location.pathname + '?' + params.toString();
        });

    </script>

@endsection