@extends('client.layouts.main')

@section('title', 'Detail Event')

@section('content')
<section class="inner-blog b-details-p pt-50 pb-50">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-3">
                <h2>Event</h2>
                <hr>
            </div>
            <div class="col-lg-8 mx-auto">
                <div class="blog-details-wrap">
                        <img style="object-fit: cover;
                                    width: auto !important;
                                    height: 700px;
                                    border-radius: 10px;" class="d-block w-100 mx-auto" src="{{asset($data->gambar)}}"
                            alt="Gambar Event">
                    <div class="meta__info">
                        <ul>
                            <li><i class="far fa-calendar-alt"></i> {{$data->created_at}}</li>
                            <li><i class="far fa-user"></i>oleh Admin</li>
                            <li class="cursor-pointer"><a data-toggle="modal" data-target="#shareModalCenter"
                                    class="active nav-link"><i class="far fa-share"></i>Bagikan</a></li>
                        </ul>
                    </div>
                    <div class="details__content pb-10">
                        <h2>{{$data->nama}}</h2>
                        {!! $data->deskripsi !!}
                    </div>
                    <a href="{{$data->link}}" target="_blank" style="width: 250px !important" class="btn ss-btn mt-3"
                        data-animation="fadeInRight" data-delay=".8s">Bergabung Sekarang
                        <i class="fas fa-chevron-right"></i></a>
                </div>

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

<!-- Modal -->
<div class="modal fade" id="shareModalCenter" tabindex="-1" role="dialog" aria-labelledby="shareModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="shareModalCenterTitle">Bagikan Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body d-flex mx-auto">
                <a href="whatsapp://send?text={{$data->nama}} | {{URL::full();}}" class="share-btn mr-3">
                    <i class="fa-brands fa-whatsapp"></i>
                </a>
                <a href="https://t.me/share/url?url={{URL::full()}}&text={{$data->nama}}" class="share-btn mr-3"
                    style="background-color: #3198c3;">
                    <i class="fa-brands fa-telegram"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?text={{$data->nama}}" class="share-btn mr-3"
                    style="background-color: #2cafe8">
                    <i class="fa-brands fa-twitter"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection