@extends('frontend.layouts.master')
@section('title','Ankara Çocuk ve Ergen Psikiyatristi | Doç. Dr. Dilşad Yıldız MİNİKSAR')


@section('content')
<section id="details-title-wrapper" style="background-image: url('{{ asset('FrontEnd/files/cp-contact-1.jpg') }}');">
    <div class="container">
        <div class="row">
            <h2 class="blog-title-detail">BLOG</h2>
            <div class="breadcrumb">
                <ul class="breadcrumb-link">
                    <li><i class="fas fa-home"></i></li>
                    <li><a href="{{route('frontend.home')}}">Anasayfa</a></li>
                    <li><i class="fas fa-angle-right"></i></li>
                    <li>{{ $blog->title }}</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<section id="blog-detail-content" class="inside-bg">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-12">
                <div class="sidebar-left">
                    <div class="sidebar-content">
                        <div class="media">
                            @if($blog->headerFile)
                                <img src="{{ asset('FrontEnd/files/' . $blog->headerFile->address) }}" alt="{{ $blog->title }}">
                            @endif
                            <ul class="details-tools">
                                @foreach ($socials as $social)
                                    <li att="{{ $social->platform }}">
                                        <a href="{{ $social->url }}" target="_blank">
                                            @if (strtolower($social->platform) === 'twitter' && strtolower($social->icon) === 'svg')
                                                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                                                    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
                                                </svg>
                                            @else
                                                <i class="{{ $social->icon }}"></i>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="content">
                            <div class="details-meta">
                                <span>
                                    <a class="text-size plus" href="#">A+</a>
                                    <a class="text-size normal" href="#">A</a>
                                    <a class="text-size minus" href="#">A-</a>
                                </span>
                                <span>
                                    <i class="far fa-calendar-alt"></i>
                                    {{ $blog->created_at ? $blog->created_at->translatedFormat('d F Y') : 'Tarih Bilgisi Yok' }}
                                </span>
                                <span>
                                    <i class="far fa-eye"></i> {{ $blog->hit ?? 0 }} Görüntülenme
                                </span>
                                <span>
                                    <a href="#" class="vote-btn" data-id="{{ $blog->id }}" data-type="up" data-model="blog">
                                        <i class="far fa-thumbs-up"></i>
                                    </a>
                                    <span class="vote-count" id="vote-up-{{ $blog->id }}">{{ $blog->vote_up ?? 0 }}</span>
                                </span>
                                <span>
                                    <a href="#" class="vote-btn" data-id="{{ $blog->id }}" data-type="down" data-model="blog">
                                        <i class="far fa-thumbs-down"></i>
                                    </a>
                                    <span class="vote-count" id="vote-down-{{ $blog->id }}">{{ $blog->vote_down ?? 0 }}</span>
                                </span>
                            </div>
                            <h2>{{ $blog->title }}</h2>
                            <p class="content-text">
                                {!! $blog->content !!}
                            </p>
                            <ul class="details-share">
                                <li>Sosyal Medya:</li>
                                @foreach ($socials as $social)
                                    <li>
                                        <a href="{{ $social->url }}" target="_blank">
                                            @if (strtolower($social->platform) === 'twitter' && strtolower($social->icon) === 'svg')
                                                {{-- Twitter için SVG ikonu --}}
                                                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
                                                    <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
                                                </svg>
                                            @else
                                                <i class="{{ $social->icon }}"></i>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="comments-section">
                        <form class="cp-form-comment" id="blogCommentForm" method="POST" autocomplete="off">
                            <div class="cp-form-comments">
                                <div class="section-details-title left-modifier">
                                    <span>Görüşlerinizi Paylaşın</span>
                                </div>
                                <div class="cp-form mb-2 mt-3">
                                    <fieldset>
                                        <section>
                                            <div class="row gy-3">
                                                <div class="col-sm-6 col-12">
                                                    <label class="input">
                                                        <input type="text" name="f_firstname" maxlength="100" placeholder="Adınızı yazın">
                                                        <b class="tooltip tooltip-top-right">Lütfen adınızı tam olarak yazınız.!</b>
                                                    </label>
                                                </div>
                                                <div class="col-sm-6 col-12">
                                                    <label class="input">
                                                        <input type="text" name="f_lastname" maxlength="100" placeholder="Soyadınızı yazın">
                                                        <b class="tooltip tooltip-top-right">Lütfen soyadınızı tam olarak yazınız.!</b>
                                                    </label>
                                                </div>
                                            </div>
                                        </section>
                                        <section>
                                            <label class="input">
                                                <input type="email" name="f_email" maxlength="200" placeholder="E-posta adresinizi yazın">
                                                <b class="tooltip tooltip-top-right">Lütfen geçerli bir e-posta adresi girin. Örn: cp@epostaservisi.com</b>
                                            </label>
                                        </section>
                                        <section>
                                            <label class="textarea">
                                                <textarea rows="4" name="f_message" placeholder="Deneyiminizi bizimle paylaşmak ister misiniz?"></textarea>
                                                <b class="tooltip tooltip-top-right">Yorumunuzu tam olarak yazınız.!</b>
                                            </label>
                                        </section>
                                        <section class="col-6">
                                            <label class="input">
                                                <input type="text" name="captcha_answer" maxlength="2"
                                                       oninput="this.value = this.value.replace(/[^0-9]/g,'');"
                                                       placeholder="{{ $a }} + {{ $b }} = ?"
                                                       autocomplete="off"
                                                       required>
                                                <b class="tooltip tooltip-top-right">Sadece sayıları girin. Cevabı eksiksiz ve doğru yazın.</b>
                                            </label>
                                        </section>
                                    </fieldset>
                                    <footer>
                                        <input type="hidden" name="service" value="{{ $blog->id ?? 0 }}">
                                        <input type="hidden" name="type" value="blog">
                                        <input type="hidden" name="parent_id" id="parent_id" value="">
                                        <input type="hidden" name="nickname" id="nickname" value="">
                                        <a href="#" class="cp-btn cp-btn-primary" id="blogCommentBtn">Gönder <i class="far fa-arrow-right"></i></a>
                                    </footer>
                                </div>
                            </div>
                        </form>
                        <!-- YORUMLAR LİSTESİ -->
                        <div class="comments">
                            <div class="section-details-title left-modifier">
                                <span>Yorumlar</span>
                            </div>
                            @foreach($comments as $comment)
                                <div class="comment">
                                    <div class="avatar">
                                        <img src="{{ asset('FrontEnd/files/comment-profile.png') }}" alt="Kullanıcı Avatarı">
                                    </div>
                                    <div class="content">
                                        <div class="header">
                                            <span class="author">{{ $comment->nickname ?? $comment->first_name . ' ' . $comment->last_name }}</span>
                                            <span class="date">{{ $comment->created_at->translatedFormat('d F Y, H:i') }}</span>
                                        </div>
                                        <p>{{ $comment->comment }}</p>
                                        <a href="javascript:;" class="reply-btn" data-haber="{{ $blog->id }}" data-yorum="{{ $comment->id }}" data-bs-toggle="modal" data-bs-target="#commentReplyModal">+ <span>Cevapla</span></a>
                                        @foreach($comment->replies as $reply)
                                            <div class="comment-reply">
                                                <div class="avatar">
                                                    <img src="{{ asset('FrontEnd/files/comment-profile.png') }}" alt="Kullanıcı Avatarı">
                                                </div>
                                                <div class="content">
                                                    <div class="header">
                                                        <span class="author">{{ $reply->nickname ?? $reply->first_name . ' ' . $reply->last_name }}</span>

                                                        <span class="date">{{ $reply->created_at->translatedFormat('d F Y, H:i') }}</span>
                                                    </div>
                                                    <p>{{ $reply->reply }}</p>
                                                    <a href="javascript:;" {{--class="reply-btn"--}} data-haber="{{ $comment->id }}" data-yorum="{{ $reply->id }}" data-bs-toggle="modal" data-bs-target="#commentReplyModal">{{--+ <span>Cevapla</span>--}}</a>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-12 mt-5 mt-lg-0">
                <div class="sidebar-right mb-4 mb-lg-0">
                    <div class="sidebar-section">
                        <h3>DİĞER <span>HİZMETLER</span></h3>
                        <div class="sidebar-list-group">
                            <ul>
                                @if(isset($otherBlogs) && $otherBlogs->count() > 0)
                                    @foreach($otherBlogs as $item)
                                        <li>
                                            <a href="{{ route('frontend.blog.show', ['slug' => $item->slug."-".$item->id]) }}">
                                                {{ Str::limit($item->title, 35, '...') }}
                                            </a>
                                            <span>({{ $item->hit ?? 0 }})</span>
                                        </li>
                                    @endforeach
                                @else
                                    <li>Henüz başka blog bulunmamaktadır.</li>
                                @endif
                            </ul>
                            <a href="#" class="more-link">Daha Fazlası <i class="far fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="sidebar-section">
                        <h3>ÖNE <span>ÇIKANLAR</span></h3>
                        <div class="sidebar-featured-group">
                            <div class="row gy-4">
                                @foreach($popularBlogs as $item)
                                    <div class="col-md-6 col-lg-12">
                                        <article>
                                            <img src="{{ $item->headerFile ? asset('FrontEnd/files/' . $item->headerFile->address) : asset('FrontEnd/files/default.jpg') }}"
                                                 alt="{{ $item->title }}" class="img-fluid rounded mb-2">
                                            <span>
                                                <i class="fal fa-calendar-alt"></i>
                                                {{ \Carbon\Carbon::parse($item->created_at)->setTimezone('Europe/Istanbul')->translatedFormat('d F Y') }}
                                            </span>
                                            <h6>
                                                <a href="{{ route('frontend.blog.show', ['slug' => ($item->slug ?? '') . '-' . $item->id]) }}">
                                                    {{ Str::limit($item->title, 60, '...') }}
                                                </a>
                                            </h6>
                                        </article>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="sidebar-section">
                        <h3>DOSYA <span>EKLENTİSİ</span></h3>
                        <div class="sidebar-file-group">
                            @if(isset($blog->files) && $blog->files->count() > 0)
                                @foreach($blog->files as $file)
                                    <div class="download-link">
                                        <a href="{{ route('frontend.files.download', $file->id) }}" target="_blank">
                                            {{ $file->name }} ({{ strtoupper($file->type) }})
                                            <i class="far fa-file-{{ $file->type === 'pdf' ? 'pdf' : ($file->type === 'xls' || $file->type === 'xlsx' ? 'excel' : 'alt') }}"></i>
                                        </a>
                                    </div>
                                @endforeach
                            @else
                                <div>Henüz dosya eklenmedi.</div>
                            @endif
                        </div>
                    </div>
                    <div class="sidebar-section">
                        <h3>ETİKET <span>BULUTU</span></h3>
                        <div class="sidebar-tag-group">
                            <ul class="tag-list">
                                @if(!empty($tags))
                                    @foreach($tags as $tag)
                                        <li><a href="#">{{ ucfirst(trim($tag)) }}</a></li>
                                    @endforeach
                                @else
                                    <li>Henüz etiket bulunmamaktadır.</li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Yorum Cevap Modal -->
<div class="modal fade" id="commentReplyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Yorumu Cevapla</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body reply-modal">
                <form class="cp-form-comment" id="replyForm" method="POST" autocomplete="off">
                    <div class="cp-form-comments">
                        <div class="cp-form mb-2 mt-3">
                            <fieldset>
                                <section>
                                    <div class="row gy-3">
                                        <div class="col-sm-6 col-12">
                                            <label class="input">
                                                <input type="text" name="f_firstname" maxlength="100" placeholder="Adınızı yazın">
                                            </label>
                                        </div>
                                        <div class="col-sm-6 col-12">
                                            <label class="input">
                                                <input type="text" name="f_lastname" maxlength="100" placeholder="Soyadınızı yazın">
                                            </label>
                                        </div>
                                    </div>
                                </section>
                                <section>
                                    <label class="input">
                                        <input type="email" name="f_email" maxlength="200" placeholder="E-posta adresinizi yazın">
                                    </label>
                                </section>
                                <section>
                                    <label class="textarea">
                                        <textarea rows="4" name="f_message" placeholder="Deneyiminizi bizimle paylaşmak ister misiniz?"></textarea>
                                    </label>
                                </section>
                                <section class="col-6">
                                    <label class="input">
                                        <input type="text" name="captcha_answer" maxlength="2"
                                               oninput="this.value = this.value.replace(/[^0-9]/g,'');"
                                               placeholder="{{ $a }} + {{ $b }} = ?"
                                               autocomplete="off" required>
                                    </label>
                                </section>
                            </fieldset>
                            <footer>
                                <input type="hidden" name="service" value="{{ $blog->id ?? 0 }}">
                                <input type="hidden" name="type" value="blog">
                                <input type="hidden" name="parent_id" id="reply_parent_id" value="0">
                                <input type="hidden" name="nickname" id="reply_nickname" value="">
                                <a href="#" class="cp-btn cp-btn-primary" id="replySend">Gönder <i class="far fa-arrow-right"></i></a>
                            </footer>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Yorum Cevap Modal -->
@endsection


@push('scripts')
<script>
    $(document).ready(function(){
        $('.vote-btn').on('click', function(e){
            e.preventDefault();

            var blogId = $(this).data('id');
            var type = $(this).data('type');

            $.ajax({
                url: '/blog/vote/' + blogId + '/' + type, // Blog vote route
                method: 'GET',
                success: function(res){
                    // SweetAlert konumu ve icon ayarlandı
                    Swal.fire({
                        position: 'top-end',
                        icon: res.status === 'success' ? 'success' : (res.status === 'error' ? 'error' : 'warning'),
                        title: res.message,
                        showConfirmButton: false,
                        timer: 1500
                    });

                    // Sayacın güncellenmesi
                    if(res.status === 'success'){
                        if(type === 'up'){
                            $('#vote-up-' + blogId).text(parseInt($('#vote-up-' + blogId).text()) + 1);
                            if($('#vote-down-' + blogId).text() > 0)
                                $('#vote-down-' + blogId).text(parseInt($('#vote-down-' + blogId).text()) - 1);
                        } else {
                            $('#vote-down-' + blogId).text(parseInt($('#vote-down-' + blogId).text()) + 1);
                            if($('#vote-up-' + blogId).text() > 0)
                                $('#vote-up-' + blogId).text(parseInt($('#vote-up-' + blogId).text()) - 1);
                        }
                    }
                },
                error: function(){
                    Swal.fire({
                        position: 'top-end',
                        icon: 'error',
                        title: 'Bir hata oluştu!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                }
            });
        });
    });
</script>

<script>
    $(function () {
        $('#blogCommentBtn').on('click', function(e) {
            e.preventDefault();
            var $form = $('#blogCommentForm');

            var formData = {
                f_firstname: $form.find('input[name=f_firstname]').val(),
                f_lastname:  $form.find('input[name=f_lastname]').val(),
                f_email:     $form.find('input[name=f_email]').val(),
                f_message:   $form.find('textarea[name=f_message]').val(),
                captcha_answer: $form.find('input[name=captcha_answer]').val(),
                service:     $form.find('input[name=service]').val(),
                type:        $form.find('input[name=type]').val(),
                parent_id:   $form.find('input[name=parent_id]').val(),
                nickname:    $form.find('input[name=nickname]').val(),
                _token: '{{ csrf_token() }}'
            };

            $.ajax({
                url: "{{ route('frontend.comments.store') }}",
                method: "POST",
                data: formData,
                success: function(res) {
                    Swal.fire({
                        position: "top-end",
                        icon: res.icon,
                        title: res.title,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        // Formu sadece başarılıysa temizle
                        if(res.status === 'success'){
                            $form[0].reset();
                            $('#parent_id').val(0);
                            $('#nickname').val('');
                        }
                    });
                },
                error: function(xhr) {
                    let msg = "Bir hata oluştu!";
                    if(xhr.responseJSON && xhr.responseJSON.title){
                        msg = xhr.responseJSON.title;
                    }
                    Swal.fire({
                        position: "top-end",
                        icon: "error",
                        title: msg,
                        showConfirmButton: false,
                        timer: 2000
                    });
                    console.error(xhr.responseText);
                }
            });
        });
    });

    //----------------------- Yorum Cevap


    // Cevapla butonuna tıklayınca parent_id setle
    document.querySelectorAll('.reply-btn').forEach(function(btn){
        btn.addEventListener('click', function(){
            let yorumId = this.getAttribute('data-yorum');
            document.getElementById('reply_parent_id').value = yorumId;
            document.getElementById('reply_nickname').value = this.getAttribute('data-nickname') || '';
        });
    });

    // AJAX ile form gönderme
    $('#replySend').on('click', function(e){
        e.preventDefault();

        var formData = {
            f_firstname: $('#replyForm input[name=f_firstname]').val(),
            f_lastname:  $('#replyForm input[name=f_lastname]').val(),
            f_email:     $('#replyForm input[name=f_email]').val(),
            f_message:   $('#replyForm textarea[name=f_message]').val(),
            captcha_answer: $('#replyForm input[name=captcha_answer]').val(),
            service:     $('#replyForm input[name=service]').val(),
            type:        $('#replyForm input[name=type]').val(),
            parent_id:   $('#reply_parent_id').val(), // ✅ Düzeltilmiş
            nickname:    $('#reply_nickname').val(),  // nickname gönderimi
            _token: '{{ csrf_token() }}'
        };

        $.ajax({
            url: "{{ route('frontend.comments.store') }}",
            method: "POST",
            data: formData,
            success: function(res){
                Swal.fire({
                    position: "top-end",
                    icon: res.icon,
                    title: res.title,
                    showConfirmButton: false,
                    timer: 1500
                });

                if(res.status === 'success'){
                    $('#replyForm')[0].reset();
                    $('#commentReplyModal').modal('hide');
                    setTimeout(() => location.reload(), 1500);
                }
            },
            error: function(xhr){
                Swal.fire({
                    position: "top-end",
                    icon: "error",
                    title: "Bir hata oluştu!",
                    showConfirmButton: false,
                    timer: 2000
                });
                console.error(xhr.responseText);
            }
        });
    });


</script>
@endpush