@extends('layouts.guest')

@section('title')
Welcome to DrugstoreNG
@stop

@section('body')

<!-- Banner
================================================== -->
<div class="main-search-container" data-background-image="{{ asset('images/FeliciaYoung2017-crop.jpg') }}">
    <div class="main-search-inner">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>WELCOME TO DRUGSTORE</h2>
                    <h4>YOUR HEALTH IS OUR UTMOST PRIORITY</h4>
                    <form method="GET" action="{{ url('search') }}">
                    <div class="main-search-input">

                        <div class="main-search-input-item">
                            <input type="text" placeholder="Search for Drug name, Brand, Pharmacy or Category" name="query" value=""/>
                        </div>

                        <div class="main-search-input-item location">
                            <datalist id="states">
                                @forelse ($states as $state)
                                    <option>{{ $state->state }}</option>
                                @empty
                                @endforelse
                            </datalist>
                            <input type="text" placeholder="City" value="{{ old('state') }}" name="state" list="states" required/>
                        </div>

                        <div class="main-search-input-item">
                            <datalist id="cities">
                                @forelse ($cities as $city)
                                    <option>{{ $city->city }}</option>
                                @empty
                                @endforelse
                            </datalist>
                            <input type="text" name="city" placeholder="Area" list="cities" value="{{ old('city') }}" required>
                        </div>
                        <button type="submit" class="button medium">
                            Search
                        </button>
                    </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container-fluid">
    <h3 class="headline centered margin-top-50">Browse Drugs by Categories</h3>
    @foreach ($categories as $category)
        <div class="row">
            <h3 class="headline centered"><span>{{ $category->name }}</span></h3>
            @foreach ($category->stocks->take(4) as $drug)
                <div class="col-md-3 col-sm-4 col-xs-12">
                    <a href="{{ route('showStock',['pharmacy'=>$drug->company,'stock'=>$drug->id]) }}" class="listing-item-container compact">
                        <div class="listing-item">
                            <img src="{{ asset(Storage::url($drug->picture_path)) }}" alt="">

                            <div class="listing-item-content">
                                <h3>{{ $drug->name }}</h3>
                                <span>{{ 'NGN'.number_format($drug->price) }}</span>
                            </div>
                            {{-- <span class="like-icon"></span> --}}
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
        <hr>
    @endforeach
</div>

<section class="fullwidth margin-top-65 padding-top-75 padding-bottom-70" data-background-color="#f8f8f8"
style="background: rgb(248, 248, 248);" id="about">

    <div class="container">
        <div class="row">

            <div class="col-md-12">
                <h3 class="headline centered margin-bottom-45">
                    About Us
                    <span>
                        Drugstore is an online marketplace, with different pharmaceutical retail outlets in one place.
                        Patients, Customers, Pharmacists and Pharmacy connects on the platform to consult, purchase, recommend
                        and sell drugs.
                        Drugstore enables easier and faster access to drugs.
                    </span>
                </h3>
            </div>
        </div>
    </div>

</section>

@stop

@section('footer')
    @include('partials.footer-guest')
@stop