@extends('layouts.public.app')

@section('title', 'Search | Chemical Wholesale')
@section('description', 'Search for products in Chemical Wholesale')
@section('keywords', 'Search, Chemical Wholesale')

@section('content')
    <div class="greybg">
        <div class="search-keywords">
            <div class="container-fluid">
                <div class="top-filter border-0 ps-0">
                    <p class="search-keywords-text">1-48 of over 100,000 results for
                        "<a href="#!">{{ @$keyword['keyword'] != '' ? $keyword['keyword'] : 'All Products' }}</a>"
                        {{ @$keyword['category'] ? ($keyword['category'] == 'all' ? 'in All Categories' : 'in ' . ucfirst($categoryName)) : '' }}
                    </p>
                    <div class="view-container">
                        <a href="/search" class="icon"><i class="bi bi-list-task"></i></a>
                        <a href="/searchcard" class="icon"><i class="bi bi-grid"></i></a>
                        <a href="/searchmap" class="icon active"><i class="bi bi-layout-text-window-reverse"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-filter-results mt-3">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-3">
                        <form action="" method="get">
                            <div class="filter-card">
                                <div class="filter-card-title">Filters</div>
                                <div class="trade-assurance">
                                    <div class="trade-input">
                                        <input type="checkbox" class="form-check">
                                        <div class="ms-2">
                                            <div class="trade-title">
                                                <img src="/assets/img/icons/safety.png" alt="safety" style="height: 20px">
                                                Trade Assurance
                                            </div>
                                            <p class="trade-p text-grey">
                                                Protects your orders on Chemical
                                                Wholesale
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="accordion">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#supplier" aria-expanded="true" aria-controls="supplier">
                                                Suppliers
                                            </button>
                                        </h2>
                                        <div id="supplier" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="supplier_type"
                                                        value="all" onchange="this.form.submit()"
                                                        {{ @$request['supplier_type'] == 'all' ? 'checked' : '' }}>
                                                    <label class="form-check-label">
                                                        All Suppliers
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="supplier_type"
                                                        value="verified" onchange="this.form.submit()"
                                                        {{ @$request['supplier_type'] == 'verified' ? 'checked' : '' }}>
                                                    <label class="form-check-label">
                                                        <img src="/assets/img/icons/verified.png" alt="verified"
                                                            style="height:20px" class="ms-1 me-1">
                                                        Suppliers
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#price" aria-expanded="true" aria-controls="price">
                                                Price
                                            </button>
                                        </h2>
                                        <div id="price" class="accordion-collapse collapse show">
                                            <div class="accordion-body">
                                                <div class="">
                                                    <select name="price" class="form-control form-select cw-input"
                                                        onchange="this.form.submit()">
                                                        <option value="lowhigh"
                                                            {{ @$request['price'] == 'lowhigh' ? 'selected' : '' }}>
                                                            Low to High
                                                        </option>
                                                        <option value="highlow"
                                                            {{ @$request['price'] == 'highlow' ? 'selected' : '' }}>
                                                            High to Low
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#package" aria-expanded="true"
                                                aria-controls="package">
                                                Package Type
                                            </button>
                                        </h2>
                                        <div id="package" class="accordion-collapse collapse">
                                            <div class="accordion-body">
                                                Package Type
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        @php
                                            $selectedBrands = @$request->input('brand', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button
                                                class="accordion-button {{ !empty($selectedBrands) ? '' : 'collapsed' }}"
                                                type="button" data-bs-toggle="collapse" data-bs-target="#brand"
                                                aria-expanded="true" aria-controls="brand">
                                                Brand
                                            </button>
                                        </h2>
                                        <div id="brand"
                                            class="accordion-collapse {{ !empty($selectedBrands) ? 'collapse show' : '' }}">
                                            <div class="accordion-body">
                                                @foreach ($brands as $b)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="brand[]"
                                                            value="{{ $b }}"
                                                            {{ in_array($b, $selectedBrands) ? 'checked' : '' }}>
                                                        <label class="form-check-label">
                                                            {{ $b }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        @php
                                            $selectedGrade = @$request->input('grade', []);
                                        @endphp
                                        <h2 class="accordion-header">
                                            <button class="accordion-button collapsed" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#grade" aria-expanded="true"
                                                aria-controls="grade">
                                                Grade
                                            </button>
                                        </h2>
                                        <div id="grade" class="accordion-collapse collapse">
                                            <div class="accordion-body">

                                                @foreach ($grade as $g)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="grade[]"
                                                            value="{{ $g }}"
                                                            {{ in_array($g, $selectedGrade) ? 'checked' : '' }}>
                                                        <label class="form-check-label">
                                                            {{ @$g ?: 'N.A' }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                                <button type="submit" class="filter-submit mt-3">Apply</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-9">
                        <div class="product-map-container mb-4">
                            <div class="product-map">
                                <div class="map-search d-lg-flex d-none">
                                    <div class="input-group mb-3 map-search-input">
                                        <span class="input-group-text">
                                            <i class="bi bi-search fw-bold"></i>
                                        </span>
                                        <input type="text" class="form-control" placeholder="India">
                                    </div>
                                    <div class="current-location">
                                        <i class="bi bi-crosshair fw-bold text-primary me-1"></i>
                                        Use my current location
                                    </div>
                                </div>
                                <iframe
                                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15359793.915836886!2d65.57852277574838!3d19.96861807134049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1712330997566!5m2!1sen!2sin"
                                    width="100%" height="800" allowfullscreen="" loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>

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

        </div>
    </div>
@endsection
@push('css')
@endpush
@push('js')
@endpush