@extends('frontend.app')

@section('content')

    @include('frontend.inc_slider')
    @include('frontend.inc_kampusler')



@if(!empty($popup))
    <div id="myModal" class="modal fade bd-example-modal-xl">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{$popup->baslik}}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <div class="modal-body text-center">
				<p><b>{!!$popup->detay!!}</b></p>
                <a href="{{$popup->link}}" target="_blank"><img src="/uploads/img/splash/{{$popup->resim}}" class="img-fluid"></a>
            </div>
        </div>
    </div>
</div>
@endif

   <div id="modalEvent" class="modal" tabindex="-1" role="dialog">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <div class="modal-title"><p></p></div>
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                 </div>
                 <div class="modal-tarih text-center"><p></p></div>
                 <div class="modal-body text-center">
                     <p></p>
                     <span class="text-left"></span>
                 </div>
             </div>
         </div>
     </div>


    <div class="bilb">
        <img src="/frontend/images/bilb-top.jpg" class="img-fluid">
    </div>
    <div class="container2" style="padding-bottom: 15px">
        <div class="row">
            <div class="col text-right">
                <div>
                <a href="/gaye#card"><img src="/frontend/images/gaye.jpg" class="img-fluid"></a>
                </div>
                <div>
                    <a href="/carem#card"><img src="/frontend/images/carem.jpg" class="img-fluid"></a>
                </div>

            </div>
            <div class="col-3 bil-b-logo">
<div class="text-center">
    <a href=""><img src="/frontend/images/bil-b-logo.jpg" class="img-fluid"></a>
</div>
            </div>
            <div class="col">
                <div>
                    <a href="/bade#card"><img src="/frontend/images/bade.jpg" class="img-fluid"></a>
                </div>
                <div>
                <a href="/idi#card"><img src="/frontend/images/idi.jpg" class="img-fluid"></a>  
                </div>

            </div>
        </div>
            <div class="row">
            <div class="col text-right">
                 <a href="/ses#card"><img src="/frontend/images/ses.jpg" class="img-fluid"></a>

            </div>
            <div class="col">
                <a href="#"><img src="/frontend/images/sem.jpg" class="img-fluid"></a>
            </div>
            </div>
        </div>

    <div class="container2">
        <div class="news">
            <div class="row">
                <div class="col-md-6">    <h3>BİLTEK'TE NELER OLUYOR ? </h3>
                    <hr>

                    @foreach($icerikler as $icerik)

                        <div class="row">
                            <div class="col-md-4 news-image">
                                <a href="/haber/{{$icerik->seo}}"><img src="/uploads/img/icerik/515x290/{{$icerik->icerikResmi->resim}}#card" class="img-fluid"></a>
                            </div>
                            <div class="col-md-8">
                                <p class="title"><a href="/haber/{{$icerik->seo}}#card">{{\Illuminate\Support\Str::substr($icerik->baslik,0, 60)." ..."}}</a></p>

                                    <p class="desc">{{\Illuminate\Support\Str::substr($icerik->descreption,0,150)." ..."}}</p>

                                <p class="link"><a href="/haber/{{$icerik->seo}}#card">HABERİN DEVAMI İÇİN TIKLAYINIZ!</a></p>
                            </div>
                        </div>
                        @endforeach
                    <div><a href="{{route('fHaberler')}}#card" class="btn btn-primary btn-sm btn-block">TÜM HABERLER</a></div>
                </div>
                <div class="col-md-6 mb-calendar">
                    <div class="calendar">
                        <div class="eventImage"><img src="/images/events-aralik.jpg" class="img-fluid"></div>
                        <div id="datepicker" class="datepicker ll-skin-siena">
                        </div>
                        <div class="events">

                            @foreach($events as $event)
                               @php $tarih = \Illuminate\Support\Carbon::parse($event->tarih)->format('d-m-Y'); @endphp
                                   <p class="calTit">{{$event->kampus->isim}}</p>
                                   <p class="calDet">{{$event->baslik}}</p>


                            @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    <div class="container2">
        <div class="galeri st-pd"> <h3>BİLTEK OKULLARI GALERİ</h3>
            <hr />
            <div class="row">
                <div class="col-md-6">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{$embedId}}" allowfullscreen></iframe>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="resimGaleri">

                        <div class="row">
                            @foreach($resimGalerisi as $galeri)
                                <div class="col-md-6" style="padding-bottom: 10px;">
                                    <a href="/resimGaleri/{{$galeri->icerikId}}#card"><img src="/uploads/img/icerik/515x290/{{$galeri->resim}}" class="img-fluid shadow p-3 bg-white rounded"></a>
                                </div>
                            @endforeach

                        </div>

                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <a href="{{route('fResimGalerisi')}}" class="btn btn-primary btn-sm btn-block">TÜM GALERİLER</a>
                </div>
                <div class="col-md-6 mobDis">
                    <a href="{{route('fResimGalerisi')}}" class="btn btn-primary btn-sm btn-block">TÜM GALERİLER</a>
                </div>
            </div>
        </div>
    </div>



        <div class="bottom-form">
            <div class="bottom-form-bg">
                <div class="container2">
                    <div class="bottom-form-fr shadow p-3 bg-white rounded">
                        <div class="bottom-form-fr-pd">
                            <div class="title"><h2>KAYIT BİLGİ FORMU</h2>
                            </div>
                            <div class="stDesc"><h2>ÖĞRENCİ BİLGİLERİ</h2></div>
                            <form id="kayit-form" action="{{route('kayitFormuEkle')}}" method="post">
                                @csrf
                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <input type="text" name="ogrenci_adi" class="form-control form-control-sm" placeholder="Öğrenci Adı" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" name="ogrenci_soyadi" class="form-control form-control-sm" placeholder="Öğrenci Soyadı" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <select name="kampusId" class="form-control form-control-sm" required>

                                            <option value="">Kampüs Seçiniz</option>
                                            @php
                                                $kampuslerForm  = \App\Helper\SqlSorgu::Kampusler();
                                                $kademelerForm  = \App\Helper\SqlSorgu::Kademeler();
                                            @endphp
                                            @foreach($kampuslerForm as $kampusForm)
                                                <option value="{{$kampusForm->id}}">{{$kampusForm->isim}}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                    <div class="col-sm-6">
                                        <select name="kademeId" class="form-control form-control-sm" required>
                                            <option value="">Kademe Seçiniz</option>
                                            @foreach($kademelerForm as $kademeForm)
                                                <option value="{{$kademeForm->id}}">{{$kademeForm->isim}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="stDesc"><h2>VELİ BİLGİLERİ</h2></div>
                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <input type="text" name="veli_adi" class="form-control form-control-sm" placeholder="Veli Adı" required>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" name="veli_soyadi" class="form-control form-control-sm" placeholder="Veli Soyadı" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <input type="email" name="eposta" class="form-control form-control-sm" placeholder="E-Posta">
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" name="telefon" class="form-control form-control-sm"  placeholder="Telefon" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <div class="captcha">
                                        <span>{!! captcha_img()!!}</span>
                                        <button type="button" class="btn btn-success btn-refresh">Yenile</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="text" name="captcha" class="form-control form-control-sm" id="captcha" placeholder="Doğrulama Kodunu Giriniz" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <div class="col-sm-6">
                                        <input type="checkbox" name="chbox" id="chbox" required> <a href="/kisisel-verilerin-korunmasi">Kişisel Verilerin Korunması Hakkındaki Şartları</a> Kabul Ediyorum
                                    </div>
                                    <div class="col-sm-6">
                                        <button type="submit" id="submit" class="btn btn-primary">GÖNDER</button>
                                    </div>
                                </div>

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

        </div>

@endsection
@section('css')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!--<link rel="stylesheet" href="https://rtsinani.github.io/jquery-datepicker-skins/css/siena.datepicker.css">-->
    <style>
        .ui-widget-content {
            border: 1px solid #dddddd;
            background: #ebe9ea;
            color: #25317b;
        }
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
            border: 1px solid #c5c5c5;
            background: #ebe9ea;
            font-weight: normal;
            color: #25317b;
        }
        .ui-widget-header {
            border: 1px solid #dddddd;
            background: #ebe9ea;
            color: #25317b;
            font-weight: bold;
        }
        table.ui-datepicker-calendar tbody td.highlight > a {
            background: repeat-x scroll 50% bottom #dddddd;
            color: #363636;
            border: 1px solid #b5b5b5;
        }
        .ui-datepicker {
            width: 100%; /*what ever width you want*/
            height: 100%;
        }
        .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
        .datepicker-inline {
            width: 100%;
        }
        .datepicker table {
            width: 100%;
        }
    </style>
@endsection
@section('js')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
       $(".btn-refresh").click(function () {
           $.ajax({
               type: 'GET',
               url: '/refresh_captcha',
               success: function (data) {
                   $(".captcha span").html(data.captcha);
               }
           });
       });
   </script>

<script>
	$(document).ready(function(){
		$("#myModal").modal('show');
	});

</script>

    <script>
        $( function() {

            var events = [
                @php
                foreach($eventsAll as $eventAll) {
                $tarih = \Illuminate\Support\Carbon::parse($eventAll->tarih)->format('m/d/Y'); //js için
                $tarihFormat = \Illuminate\Support\Carbon::parse($eventAll->tarih)->format('d-m-Y'); //gösterim için
                echo ' { Title: "'.$eventAll->baslik.'", Image: "'.$eventAll->resim.'", Desc: "'.$eventAll->descreption.'", Tarih: "'.$tarihFormat.'", Date: new Date("'.$tarih.'") },';
                }
            @endphp
                /*
                { Title: "Five K for charity", Date: new Date("12/28/2019") },
                { Title: "Dinner", Date: new Date("12/25/2019") },
                { Title: "Meeting with manager", Date: new Date("12/01/2019") }
                 */
            ];

            $( "#datepicker" ).datepicker({
                monthNames: [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık" ],
                dayNamesMin: [ "Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cts" ],
                firstDay:1,
                nextText: "İleri",
                prevText: "Geri",

                /*
               onSelect: function(dateText) {
               var valim = dateText;
                   console.log("Selected date: " + dateText + "; input's current value: " + this.value);

               }
               */

                beforeShowDay: function(date) {
                    var result = [true, '', null];
                    var matching = $.grep(events, function(event) {
                        return event.Date.valueOf() === date.valueOf();
                    });

                    if (matching.length) {
                        result = [true, 'highlight', null];
                    }
                    return result;
                },
                onSelect: function(dateText) {
                    var date,
                        selectedDate = new Date(dateText),
                        i = 0,
                        event = null;

                    while (i < events.length && !event) {
                        date = events[i].Date;

                        if (selectedDate.valueOf() === date.valueOf()) {
                            event = events[i];
                        }
                        i++;
                    }
                    if (event) {
                        $("#modalEvent").modal('show');
                        $(".modal-title p").html("<h4>"+event.Title+"</h4>");
                        $(".modal-tarih p").html("<h4>Etkinlik Tarihi : "+event.Tarih+"</h4>");
                        $(".modal-body p").html('<img src="/uploads/img/events/thumb/'+event.Image+'">');
                        $(".modal-body span").html(event.Desc);
                        console.log(event.Tarih);
                        /*alert(event.Title);*/
                    }
                }


            });

        });
 </script>
@endsection