@extends('layouts.default-detail')

@section('content')

<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<!-- Page header -->
<div id="home" class="relative py-40 align-items-center d-flex bg-gray1 bb-1 b-gray1">
    <!-- Container for breadcrumb and title -->
    <div class="container">
        <!-- Row for all details -->
        <div class="row">
            <!-- Column for the title -->
            <div class="col-lg-6 t-left t-center-sm">
                <p class="font-secondary uppercase fs-20 dark">
                    KEGIATAN
                </p>
            </div>
            <!-- Column for the breadcrumb -->
            <div class="col-lg-6 d-flex t-right t-center-sm justify-content-lg-end justify-content-center">
                <!-- Start breadcrumb -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 gray8 bold uppercase fs-12 c-default">
                        <li class="breadcrumb-item"><a href="/" class="colored-hover">Beranda</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Kegiatan</li>
                    </ol>
                </nav>
                <!-- End breadcrumb -->
            </div>
        </div>
        <!-- End row for all details -->
    </div>
    <!-- End container for breadcrumb and title -->
</div>
<!-- End page header -->

<!-- Start blog section -->
<section id="blog" class="bg-white pt-50 pb-120">

    <!-- Container for all -->
    <div class="container mt-50">

        <!-- Row -->
        <div class="row">

            <!-- Column for posts -->
            <div class="col-lg-12">

                <!-- Keeper for image and tags -->
                <div class="relative">
                    <!-- Your image -->
                    <div class="d-block relative zi-2">
                        <img data-src="{{asset('storage/event/' . $detail->image)}}" src="{{asset('assets/images/blog/post_loader.svg')}}" alt="post image template" class="d-block fullwidth">
                    </div>
                    <div class="overlay align-items-end justify-content-end px-30 py-30 zi-5 dark-corner-right-bottom pointer-events-none">
                        <!-- Post owner and date -->
                        <h6 class="white bold uppercase mt-15 pointer-events-all">
                            {{ $detail->created_at }}
                        </h6>
                    </div>
                </div>
                <!-- End keeper for image and tags -->

                <!-- Start post detals -->
                <div class="row">
                    <!-- Column fullwidth for texts and images -->
                    <div class="col-12 py-30">

                        <a href="#" class="h1 d-inline-flex underline-hover dark font-secondary uppercase lh-md">
                            {!!html_entity_decode($detail->title)!!}
                        </a>

                        <p class="fs-17 c-default lh-30 gray7 mt-15">
                            {!!html_entity_decode($detail->desc)!!}
                        </p>

                    </div>
                    <!-- End column fullwidth for texts and images -->
                </div>
                <!-- End post detals -->


                <!-- Fullwidth column for contact form -->
                <div id="contact-form-container" class="col-12 mt-50 d-flex fullwidth flex-column align-items-center slow-cubic">

                    <a href="#" class="h1 d-inline-flex underline-hover dark font-secondary uppercase lh-md">
                        FORM PENDAFTARAN {!!html_entity_decode($detail->title)!!}
                    </a>

                    <!-- Contact form wrapper -->
                    <div class="contact-form-wrapper o-hidden fullwidth slow-cubic">

                        @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif

                        @if (Session::has('success'))
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="fa fa-times">X</i>
                            </button>
                            <!-- <strong>Berhasil !</strong> {{ session('success') }} -->
                            <!-- SVG for check icon -->
                            <svg width="54px" height="50px" viewBox="0 0 54 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M18.9526053,50 C17.0492133,50.0026165 15.2485978,49.1358819 14.0621508,47.6459509 L0.348067622,30.4593528 C-0.250279824,29.5582555 -0.0598946109,28.3486099 0.786242025,27.6753353 C1.63237866,27.0020608 2.85255542,27.0893162 3.59449702,27.876155 L17.3085802,45.0419209 C17.7187995,45.5777448 18.3629613,45.881359 19.0368836,45.8565261 C19.7108059,45.8316931 20.3309261,45.4814922 20.7006827,44.9169275 L50.189083,0.919236234 C50.6054349,0.3014969 51.3193752,-0.046964041 52.0619694,0.00511527446 C52.8045636,0.0571945899 53.462994,0.501902075 53.7892363,1.17172072 C54.1154786,1.84153937 54.0599688,2.6347078 53.6436169,3.25244713 L24.176027,47.2293061 C23.0638578,48.8938865 21.2221934,49.9241298 19.2231411,50 L18.9526053,50 Z" fill="#49D078" fill-rule="nonzero"></path>
                                </g>
                            </svg>
                            <!-- End SVG for check icon -->

                            <h1 class="font-secondary uppercase gray8 fs-40 mt-25 font-custom">
                                Terima kasih!
                            </h1>
                            <p class="fs-20 lh-30 gray6 mt-10 font-custom">
                                Pendaftaran Anda telah sampai kepada kami. Kami akan menghubungi Anda sesegera mungkin.
                            </p>
                        </div>
                        @endif

                        <form id="fmevent" action="{{ route('event.upload', $detail->id) }}" method="POST" enctype="multipart/form-data" class="needs-validation">
                            @csrf

                            <input type="hidden" name="event_category_id" id="event_category_id" value="{{ $detail->event_category_id }}" required class="py-25 px-25 b-gray2 fs-18 bg-gray2 dark-placeholder mt-30 font-custom">
                            <input type="hidden" name="event_id" id="event_id" value="{{ $detail->id }}" required class="py-25 px-25 b-gray2 fs-18 bg-gray2 dark-placeholder mt-30 font-custom">

                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label class="font-weight-bold">BUKTI BAYAR</label>
                                        <div class="md-2">
                                            <img id="imgPreview" src="{{asset('assets/images/default-slider.png')}}" alt="Gambar" style="width: 340px; height: 223px" />
                                        </div>
                                        <div class="md-2">
                                            <p>
                                        </div>
                                        <input type="file" class="form-control" id="images" name="images" accept=".jpg,.jpeg,.png,.pdf" value="{{ $detail->image }}" placeholder="Masukkan bukti bayar" required="">
                                        <!-- error message untuk image -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan bukti bayar
                                        </div>
                                    </div>
                                </div>
                                <div class="col-8">
                                    <div class="form-group">
                                        <label class="font-weight-bold">NAMA</label>
                                        <input type="text" class="form-control" name="name" value="{{ $detail->name }}" placeholder="Masukkan nama lengkap dan gelar" required="">
                                        <!-- error message untuk title -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan nama lengkap dan gelar
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">EMAIL</label>
                                        <input type="email" class="form-control" name="email" value="{{ $detail->email }}" placeholder="Masukkan email aktif" required="">
                                        <!-- error message untuk name -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan email aktif
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="font-weight-bold">NO HANDPHONE</label>
                                        <input type="number" class="form-control" name="phone" value="{{ $detail->phone }}" placeholder="Masukkan nomor handphone" required="">
                                        <!-- error message untuk title -->
                                        <div class="invalid-feedback alert alert-danger mt-2">
                                            Masukan nomor handphone
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 mt-2">
                                    <div class="form-group">
                                        <!-- Send Button -->
                                        <button type="submit" id="submit" class="btn-action xl-btn block b-1 b-gray2 fullwidth font-secondary uppercase bg-gray2 bg-colored-hover py-25 dark white-hover fs-17 slow font-custom">Daftar Sekarang</button>
                                        <!-- End Send Button -->
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!-- End contact form wrapper -->

                    <!-- Success message wrapper -->
                    <div class="success-message-wrapper unselectable none px-100 py-150 py-80-sm mxw-600 bg-gray2 t-center d-flex flex-column align-items-center slow-md">

                        <!-- SVG for check icon -->
                        <svg width="54px" height="50px" viewBox="0 0 54 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <path d="M18.9526053,50 C17.0492133,50.0026165 15.2485978,49.1358819 14.0621508,47.6459509 L0.348067622,30.4593528 C-0.250279824,29.5582555 -0.0598946109,28.3486099 0.786242025,27.6753353 C1.63237866,27.0020608 2.85255542,27.0893162 3.59449702,27.876155 L17.3085802,45.0419209 C17.7187995,45.5777448 18.3629613,45.881359 19.0368836,45.8565261 C19.7108059,45.8316931 20.3309261,45.4814922 20.7006827,44.9169275 L50.189083,0.919236234 C50.6054349,0.3014969 51.3193752,-0.046964041 52.0619694,0.00511527446 C52.8045636,0.0571945899 53.462994,0.501902075 53.7892363,1.17172072 C54.1154786,1.84153937 54.0599688,2.6347078 53.6436169,3.25244713 L24.176027,47.2293061 C23.0638578,48.8938865 21.2221934,49.9241298 19.2231411,50 L18.9526053,50 Z" fill="#49D078" fill-rule="nonzero"></path>
                            </g>
                        </svg>
                        <!-- End SVG for check icon -->

                        <h1 class="font-secondary uppercase gray8 fs-40 mt-25 font-custom">
                            Terima kasih!
                        </h1>
                        <p class="fs-20 lh-30 gray6 mt-10 font-custom">
                            Pendaftaran Anda telah sampai kepada kami. Kami akan menghubungi Anda sesegera mungkin.
                        </p>

                    </div>
                    <!-- End success message wrapper -->

                </div>
                <!-- Contact column end -->



                <!-- Row for related posts -->
                <div class="row mt-30">
                    <!-- Column for all -->
                    <div class="col-12">
                        <!-- Keeper -->
                        <div class="fullwidth px-25 py-30 bg-gray2 d-block b-1 b-gray2">

                            <!-- Title and navigation -->
                            <div class="row align-items-center justify-content-between">
                                <div class="col-auto">
                                    <h3 id="latest-articles-title" class="font-secondary uppercase">
                                        Daftar Kegiatan
                                    </h3>
                                </div>
                                <div class="col-auto ml-auto">
                                    <div class="px-5">
                                        <!-- Previous button -->
                                        <button type="button" class="icon-sm ml-3 bg-dark white bg-colored-hover" data-slider-control="#related-post-slider" data-slider-dir="prev">
                                            <i class="ti-angle-left"></i>
                                        </button>
                                        <!-- Next button -->
                                        <button type="button" class="icon-sm ml-3 bg-dark white bg-colored-hover" data-slider-control="#related-post-slider" data-slider-dir="next">
                                            <i class="ti-angle-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Slider -->
                            <div id="related-post-slider" class="custom-slider block-img dots-circle c-grab mt-20" data-slick='{"speed":600, "fade": false, "draggable":true, "slidesToShow": 4, "slidesToScroll": 1, "responsive":[{"breakpoint": 1024,"settings":{"slidesToShow": 4}},{"breakpoint": 768,"settings":{"slidesToShow": 1}}]}'>
                                @foreach ($data as $item)
                                <!-- Slide -->
                                <div class="px-5">
                                    <a href="{{ route('event.show', $item->id) }}" class="has-overlay d-flex hover-container">
                                        <!-- Overlay text -->
                                        <div class="overlay dark-bottom d-flex align-items-start justify-content-end flex-column px-30 py-20">
                                            <h3 class="fs-16 medium lh-25 white">
                                                {{ $item->title }}
                                            </h3>
                                            <p class="white mt-5 semibold fs-13 uppercase lh-normal">
                                                <i class="ti-timer mr-3"></i>
                                                {{ $item->created_at }}
                                            </p>
                                        </div>
                                        <img src="images/blog/post_loader.svg" data-lazy="{{ asset('storage/event/'. $item->image) }}" class="zoom-in-hover-item slow" alt="post iamge template">
                                    </a>
                                </div>
                                <!-- End slide -->
                                @endforeach
                            </div>
                            <!-- End Slider -->

                        </div>
                        <!-- End keeper -->
                    </div>
                    <!-- End column for all -->
                </div>
                <!-- End row for related posts -->

            </div>
            <!-- End column for posts -->

        </div>
        <!-- End row -->

    </div>
    <!-- End container for all -->

</section>
<!-- End blog section -->

@endsection