@extends('frontend.'.$temaadi.'.app')
@push("head")
    <title>Abonelik - {{ config('ayarlar.baslik') }}</title>
    <meta name="description" content="{{ config('ayarlar.baslik') }} - Ünlü ve Tarihi Kişilerin Kısaca Biyografisi ve Hayatları, Biyografileri görmek ve detaylı okumak için sitemizi ziyaret edin." />
    <meta name="keywords" content="biyografiler, ünlü biyografileri, kişilerin kısaca hayatları, yaşam öyküleri" />
@endpush
@section("content")
    <section class="single-post-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ol class="breadcrumb">
                        <li>
                            <a href="{{ url('/') }}">
                                <i class="fa fa-home"></i>
                                Ana Sayfa
                            </a>
                        </li>
                        <li>Abonelik</li>
                    </ol>
                </div>
                <div class="col-lg-6 pr-0">
                    <div class="ts-grid-box">
                        <div class="clearfix entry-cat-header">
                            <h1 class="ts-title float-left">Abone Girişi</h1>
                        </div>
                    </div>
                    <div class="ts-grid-box content-wrapper single-post">
                        <div class="alert alert-success alert-dismissible" role="alert" id="responseSuccessMessage" style="display: none;">
                            <strong>Başarılı!</strong> <span id="messageS"></span>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="alert alert-danger alert-dismissible" role="alert" id="responseErrorMessage" style="display: none;">
                            <strong>Hata!</strong> <span id="messageE"></span>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form id="form-login">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="email">E-Posta Adresi</label>
                                <input type="email" class="form-control" required name="email" id="email">
                            </div>
                            <div class="form-group">
                                <label for="pass">Şifre</label>
                                <input type="password" class="form-control" required name="password" id="pass">
                            </div>

                            <button type="submit" class="btn btn-primary">Giriş Yap</button>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="ts-grid-box">
                        <div class="clearfix entry-cat-header">
                            <h2 class="ts-title float-left">Yeni Abonelik</h2>
                        </div>
                    </div>
                    <div class="ts-grid-box content-wrapper single-post">
                        <p class="text-center message-reponse-user" style="font-size:12px;margin-bottom:7px;display:none;"></p>
                        <form id="register-member">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label>Abonelik Türü</label>
                                <br/>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="abonelik" id="bireysel" value="1" checked>
                                    <label style="font-size: 16px" class="form-check-label text-dark" for="bireysel">Bireysel</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="abonelik" id="kurumsal" value="2">
                                    <label style="font-size: 16px" class="form-check-label text-dark" for="kurumsal">Kurumsal</label>
                                </div>
                            </div>
                            <div id="company">
                                <div class="form-group">
                                    <label for="firm">Firma Adı</label>
                                    <input type="text" class="form-control" name="firm" id="firm" placeholder="Firma adınızı yazınız.">
                                </div>
                                <div class="form-group">
                                    <label for="vergidaire">Vergi Dairesi</label>
                                    <input type="text" class="form-control" name="vergidaire" id="vergidaire" placeholder="Vergi dairesini yazınız.">
                                </div>
                                <div class="form-group">
                                    <label for="vergino">Vergi No</label>
                                    <input type="text" class="form-control" name="vergino" id="vergino" placeholder="Vergi numaranızı yazınız.">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name">Ad Soyad</label>
                                <input type="text" class="form-control" required name="name" id="name" placeholder="Adınızı Soyadınızı yazınız.">
                            </div>
                            <div class="form-group">
                                <label for="phone">Telefon</label>
                                <input type="text" class="form-control" required name="phone" id="phone" placeholder="Cep veya Sabit telefon numarası yazınız.">
                            </div>
                            <div class="form-group">
                                <label for="mail">E-Posta</label>
                                <input type="email" class="form-control" required name="email" id="mail" placeholder="E-Posta adresinizi yazınız.">
                            </div>
                            <div class="form-group">
                                <label for="password">Şifre</label>
                                <input type="password" class="form-control" required name="password" id="password" placeholder="Şifrenizi yazınız.">
                            </div>
                            <div class="form-group">
                                <label for="adres">Adres</label>
                                <textarea class="form-control msg-box" name="adres" id="adres" rows="4"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="period">Abonelik Türü</label>
                                <select name="period" id="period" class="form-control">
                                        <option selected disabled>Abonelik Seçiniz</option>
                                    @if($eDergiPaketler)
                                        @foreach($eDergiPaketler as $eDergi)
                                            <option value="{{$eDergi->id}}">{{$eDergi->isim}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="agree">
                                <label class="form-check-label" for="exampleCheck1">Okuduğum koşulları kabul ediyorum ve xxx Dergisi abonesi olmak istiyorum.</label>
                            </div>
                            <button type="submit" class="btn btn-primary">Gönder</button>
                        </form>

                        <div class="mt-15">
                            <p> <strong>BANKA HESAP BİLGİLERİ</strong><br>
                                Hesap Adı<br>
                                Banka Adı<br>
                                Şube: xxxx <br>
                                Hesap No: xxxxx<br>
                                IBAN: TRXX xxxx xxxx xxxx xxxx xxxx xx</p>
                        </div>

                        <div class="mt-15">
                            <p> <strong>ABONELİK KOŞULLARI</strong><br>
                                » xxx Dergisi bir yıl içinde 12 sayı olmak üzere ayda bir yayınlanır.<br>
                                » Abonelik bedeli nakit olarak veya yukarıda belirtilen hesap numarasına ödenir.<br>
                                » Dergi abonelik ücreti yıllık (12 sayı) bedeli KDV ve kargo ücreti dahil XX TL'dir.<br>
                                » Abonelik ücretlerine KDV dahildir.
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <input type="hidden" id="url" value="{{url('/')}}">
    <input type="hidden" id="redirect" value="@if(isset($redirect_url)){{$redirect_url}}@else{{'0'}}@endif">
@endsection
@push("customJs")
    <script>
        $(document).ready(function () {
            $("#register-member").submit(function(){
                if ($("#agree").is(':checked')) {
                    var data = $(this).serialize();
                    var url = $('#url').val() + '/abonelik-yeni-uye';
                    var message = $('.message-reponse-user');
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: data,
                        dataType: 'json',
                        success: function(result){
                            message.empty();
                            if(result.status == 'success') {
                                message.removeClass('text-danger');
                                message.addClass('text-success');
                                message.append(result.message)
                            }
                            message.show();
                            $("#register-member")[0].reset();
                        },
                        error: function (request, status, error) {
                            var responseData = JSON.parse(request.responseText);
                            var content = '';
                            message.removeClass('text-success');
                            message.empty();
                            message.addClass('text-danger');

                            $.each(responseData,function (item, value) {
                                let dat = Object.values(value);
                                content += dat[0] + ' ';
                            });

                            message.append(content);
                            message.show();
                        }
                    });
                    return false;
                }else{
                    alert('Lütfen Abonelik Koşulları\'nı ve Gizlilik Politikası\'nı kabul ediniz.');
                    return false;
                }
            });
            $("#form-login").submit(function(){
                var data = $(this).serialize();
                var url = $('#url').val() + "/abonelik-giris";
                $.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function(result){
                        let redirect = $('#redirect').val();
                        let messageS  = $('#messageS');
                        let messageE  = $('#messageE');
                        let responseSuccessMessage = $('#responseSuccessMessage');
                        let responseErrorMessage   = $('#responseErrorMessage');

                        if(result.status == "success") {
                            if(result.status == 'success') {
                                responseSuccessMessage.show();
                                responseErrorMessage.hide();

                                messageS.empty().append(result.message)
                            }

                            setTimeout(function(){
                                if(redirect !== '0'){
                                    window.location = redirect;
                                } else{
                                    window.location = $('#url').val() + "/abone-profil";
                                }
                            },1000);
                        }else{
                            responseErrorMessage.show();
                            responseSuccessMessage.hide();

                            messageE.empty().append(result.message);
                        }
                    },
                    error: function (request, status, error) {
                        let responseData = JSON.parse(request.responseText);
                        let content = '';
                        let messageE = $('#messageE');
                        let responseSuccessMessage = $('#responseSuccessMessage');
                        let responseErrorMessage = $('#responseErrorMessage');

                        $.each(responseData,function (item, value) {
                            content += value[0]+' ';
                        });

                        messageE.empty().append(content);
                        responseErrorMessage.show();
                        responseSuccessMessage.hide();
                    }
                });
                return false;
            });
        });
        $("#company").css('display','none');
        $('input[name="abonelik"]').click(function() {
            if ($('input[name="abonelik"]:checked').val() != '1') {
                $("#company").css('display','block');
            }else{
                $("#company").css('display','none');
            }
        });
    </script>
@endpush
@push("customCss")

@endpush