@extends('template')

@section('content')
    @php
        use Carbon\Carbon;
    @endphp

    <div class="h-screen pt-5">
        <div class="py-5 "style="background-color:#333;margin-top:53px;">
            <div class="container ">
                <h1 class="text-white text-center fw-bold hidden">EVENT</h1>
            </div>
        </div>
        <div class="container hidden">

            <div class=" row center ">
                @foreach ($event as $item)
                    <div class="d-flex m-3 big card flex-row p-5 col-xl-3 col-md-1 mb-5 ">
                        <img src="{{ asset('images/event/' . $item->photo) }}" class="img-fluid "
                            style=" width:50px; height:50px;object-fit:cover;"alt="Responsive image">
                        <div class="mx-3">
                            <h5>{{ $item->nama }}</h5>
                            <p class="text-secondary"><i
                                    class="bi bi-calendar-week mr-2"></i>{{ Carbon::parse($item->tanggal)->formatLocalized('%d %b %Y') }}
                            </p>
                            <a target="_blank" href="{{ $item->link }}"
                                class="btn btn-outline-dark justifty-self-end my-1">Selengkapnya</a>
                            <a target="_blank" href="{{ route('login') }}" data-bs-toggle="modal" data-bs-target="#event"
                                class="btn btn-outline-dark justifty-self-end my-1">Daftar</a>

                        </div>
                    </div>
                @endforeach

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

    {{-- Modal Biodata start --}}
    <div class="modal fade" id="event">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title" id="exampleModalLabel">Biodata</h5>
                    <button type="button" class="close text-white" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-5 center flex-column">

                    <div class="text-center mb-5">
                        <h4>Apakah Anda telah memiliki akun DBON?</h4>
                    </div>
                    <img class="w-25 m-1 bigger" src="{{ asset('assets/images/content/bola.svg') }}" alt="">
                    <div class="mt-5 center">

                        <a class="btn  btn-dark m-1" href="{{ route('login') }}">Ya</a>
                        <a class="btn btn-secondary m-1" href="{{ route('createAtlit') }}">Belum</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    {{-- Modal Biodata end --}}
@endsection