@extends('template')

@section('content')
    @php
        use Carbon\Carbon;
    @endphp
    <div class="h-screen pt-4">
        <section
            class="mt-lg-3 mt-5 w-100 inter center "style="background-image: url({{ asset('assets/images/bg/event.png') }});background-size: cover;height:70vh">
            <div class="">
                <h1 class="text-event text-white text-center h1 ">
                    Cari Keseruan Yang Sobat Inginkan</h1>
                <form class="m-3 form-search event-search w-100 center" style="filter: none!important"
                    action="{{ route('search_event') }}" method="POST">
                    @csrf
                    <input class="rounded-left border-0 mt-lg-5 m-0"style="height:30px; width:100%;" type="text"
                        name="search">
                    <button type="submit"
                        class="rounded-right button-green mt-lg-5 border-0 px-3"style="height:30px;">Cari</button>
                </form>

            </div>
        </section>
        <section class="center py-5 ">
            <div class="wrapper-wrap center">
                <div class="text-center m-3">
                    <a href="{{ route('tags_event', Crypt::encrypt(1)) }}">
                        <img class="img-shadow svg-tag" src="{{ asset('assets/images/content/konser.svg') }}"
                            alt="">
                    </a>
                    <h3 class="text-green mt-2 ">Konser</h3>
                </div>
                <div class="text-center m-3">
                    <a href="{{ route('tags_event', Crypt::encrypt(2)) }}">
                        <img class="img-shadow" src="{{ asset('assets/images/content/olahraga.svg') }}" alt="">
                    </a>
                    <h3 class="text-green  mt-2  ">Olahraga</h3>
                </div>
                <div class="text-center m-3">
                    <a href="{{ route('tags_event', Crypt::encrypt(3)) }}">
                        <img class="img-shadow" src="{{ asset('assets/images/content/Bisnis.svg') }}" alt="">
                    </a>
                    <h3 class="text-green  mt-2  ">Bisnis</h3>
                </div>
                <div class="text-center m-3">
                    <a href="{{ route('tags_event', Crypt::encrypt(4)) }}">
                        <img class="img-shadow" src="{{ asset('assets/images/content/konfrensi.svg') }}" alt="">
                    </a>
                    <h3 class="text-green  mt-2  ">Konfrensi</h3>
                </div>
                <div class="text-center m-3">
                    <a href="{{ route('tags_event', Crypt::encrypt(5)) }}">
                        <img class="img-shadow" src="{{ asset('assets/images/content/pelatihan.svg') }}" alt="">
                    </a>
                    <h3 class="text-green  mt-2  ">Pelatihan</h3>
                </div>
                <div class="text-center m-3">
                    <a href="{{ route('tags_event', Crypt::encrypt(6)) }}">
                        <img class="img-shadow" src="{{ asset('assets/images/content/festival.svg') }}" alt="">
                    </a>
                    <h3 class="text-green  mt-2  ">Festival</h3>
                </div>
            </div>

        </section>
        <section class="w-100 pt-5" style="background-color: #ebebeb">
            <div class="wrapper-wrap container">
                @foreach ($event as $item)
                    <div class="text-green m-2 mb-5 card h-100 d-flex shadow  "
                        style="border-radius:10px!important;align-items:center;">

                        <img class="news-photo rounded center " src="{{ asset('images/' . $item->photo) }}" alt=""
                            style="border-top-left-radius: 10px!important;border-top-right-radius: 10px!important;">
                        <P class="align-self-start m-3 text-white px-3"
                            style="background-color:{{ $item->tag_event->color }}">{{ $item->tag_event->name }}</P>

                        <h5 class="text-green-dark  text-left mt-3"style="width:300px;justify-content:center;">
                            {{ $item->title }}</h5>
                        <div class="row center">
                            <i style="font-size: 18px" class="bi bi-geo-alt m-2"></i>
                            <p class="text-green mb-0"style="width:300px;font-size:15px;">{{ $item->alamat }}</p>
                        </div>


                        <div class="row center">
                            <i style="font-size: 18px" class="bi bi-calendar-week m-3"></i>
                            <p class="text-green mb-0"style="width:300px;font-size:15px;">{{ $item->tanggal }} -
                                {{ Carbon::parse($item->jam)->format(' H:i') }}</p>
                        </div>
                        <div class="d-flex  w-100 justify-content-between">
                            @if ($item->keterangan == 1)
                                <i class=" text-seconary m-3">gratis</i>
                            @elseif($item->keterangan == 0 && $item->biaya != null)
                                <i class=" text-seconary m-3">Rp.{{ $item->biaya }}</i>
                            @elseif($item->keterangan == 0)
                                <i class="text-seconary m-3">Berbayar</i>
                            @endif
                            <a class="button-outline px-3 m-3" style="width: auto!important;" target="_blank"
                                href="{{ $item->link }}">
                                <h6 class="m-0">Join Us</h6>
                            </a>
                        </div>






                    </div>
                @endforeach

                <div class="w-100 center">{{ $event->links('pagination::bootstrap-4') }}</div>
            </div>
        </section>
        <section class="center display-col my-5">
            <div>
                <h1 class="text-green-dark">Tags Kategori Event</h1>
            </div>
            <div class="container "style="padding-left:10%;padding-right:10%;">
                <div class="wrapper-wrap center">
                    @foreach ($tags as $item)
                        <a class=" button-outline m-2"
                            href="{{ route('tags_event', Crypt::encrypt($item->id)) }}">{{ $item->name }}</a>
                    @endforeach
                </div>


            </div>
            <svg id="svg" style="position:absolute;z-index:-1">
                <defs>
                    <filter id="colorFilter">
                        <feColorMatrix color-interpolation-filters="sRGB" type="matrix"
                            values="0.03 0   0   0   0
                            0   0.41  0   0   0
                            0   0   0.23  0   0
                            0   0   0   1   0 " />
                    </filter>
                </defs>
            </svg>

        </section>

    </div>
@endsection