@extends('frontend.app')
@section('cssFiles')
    <style>
        .contact-section {
            margin-top: 80px;
        }

        .required-note {
            font-size: 13px;
            color: #666;
            text-align: center;
        }
        /* ----- SSS ----- */
        .faq {
            background: #ececeb;
            border-radius: 20px;
            padding: 28px 20px 32px;
            margin-bottom: 110px;
        }

        .faq-heading {
            text-align: center;
            font-weight: 800;
            font-size: 36px;
            color: #20172b;
            margin: 8px 0 22px;
        }

        .faq-item {
            border: 1px solid #e3e9dd;
            border-radius: 16px;
            background: rgb(245, 245, 245);
            margin: 16px 0;
            overflow: hidden;
        }

        .faq-item summary {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 22px;
            cursor: pointer;
        }

        .faq-item summary::-webkit-details-marker {
            display: none;
        }

        .faq-index {
            color: #5a616a;
            font-weight: 700;
        }

        .faq-q {
            flex: 1;
            color: #0f1318;
            font-weight: 700;
        }

        .faq-icon {
            font-size: 22px;
            color: #02314f;
            transition: color 0.2s ease, transform 0.25s ease;
        }

        .faq-item[open] .faq-icon {
            transform: rotate(90deg);
        }

        .faq-content {
            overflow: hidden;
            height: 0;
            transition: height .28s ease, padding .28s ease, border-top-color .28s ease;
        }

        .faq-inner{
            padding: 18px 22px 36px 62px;
        }
        /* ----- Footer ----- */
        .footer-section .footer-widgets-wrapper.style2 {
            padding: 80px 0 82px 0;
        }
        /* ----- Footer ----- */
        .footer-section .footer-widgets-wrapper.style2 {
            padding: 80px 0 82px 0;
        }
    </style>
@endsection
@section('content')
    <div class="breadcumb">
        <div class="container">
            <div class="breadcumb-wrapper">
                <div class="page-heading">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">İletişim</h1>
                    <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                        <li><a href="{{url('/')}}">Anasayfa</a></li>
                        <li><i class="fas fa-chevron-right"></i></li>
                        <li>İletişim</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="contact-section section-padding pt-0">
        <div class="contact-wrapper style1">
            <div class="container">
                <div class="row gx-30 ">
                    <div class="col-xl-5">
                        <div class="contact-left-items wow fadeInLeft">
                            <div class="title-section style3">
                                <div class="title-content style1">
                                    <h3><span>İletişime</span> Geçin</h3>
                                    <p>
                                        İletişim formunu doldurarak bize ulaşabilir, en kısa sürede tarafımızdan geri dönüş alabilirsiniz.
                                    </p>
                                </div>
                            </div>
                            <div class="contact-info-items">
                                <div class="icon">
                                    <img src="/frontend/assets/images/icon/contectIcon1_1.png" alt="icon">
                                </div>
                                <div class="content">
                                    <p>Adres</p>
                                    <span>Bilişim Vadisi Teknopark</span>
                                </div>
                            </div>
                            <div class="contact-info-items">
                                <div class="icon">
                                    <img src="/frontend/assets/images/icon/contectIcon1_2.png" alt="icon">
                                </div>
                                <div class="content">
                                    <p>E-Posta</p>
                                    <a href="#">info@4cteknoloji.com</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-7">
                        <div class="contact-right-items">
                            <div class="contact-content style2 wow fadeInRight" data-wow-delay=".7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInRight;">
                                <form id="contact-form" method="POST" class="contact-form-items">
                                    <div class="row">
                                        <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                                            <div class="form-clt">
                                                <input type="text" name="company" id="company" placeholder="*Firma Adını Yazınız." required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                                            <div class="form-clt">
                                                <input type="text" name="fullname" id="fullname" placeholder="*Firma Yetkilisini Yazınız" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
                                            <div class="form-clt paper-plane">
                                                <input type="text" name="email" id="email" placeholder="E-Posta adresinizi yazınız" autocomplete="email">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 wow fadeInUp" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
                                            <div class="form-clt phone">
                                                <input type="text" name="phone" id="email2" placeholder="*0(5__)_______" title="Lütfen 05 ile başlayan 11 haneli GSM numarası giriniz (ör: 0(5__)_______)." required pattern="05?\d{9}$">
                                            </div>
                                        </div>
                                        <div class="col-lg-12 wow fadeInUp" data-wow-delay=".7s" style="visibility: visible; animation-delay: 0.7s; animation-name: fadeInUp;">
                                            <div class="form-clt envelope">
                                                <textarea name="message" id="message" placeholder="*Mesajınızı Yazınız." required></textarea>
                                            </div>
                                        </div>
                                        <div class="btn-wrapper">
                                            <p class="required-note">Zorunlu alanlar yıldız (*) işareti ile belirtilmiştir.</p>
                                            <button type="submit" class="gt-btn style1 gt-btn-icon-1">Gönder</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('frontend.inc.faq')
@endsection
@section('js')
    <script>
        $(function(){
            const $form  = $('#contact-form');
            const $alert = $('#contactAlert');
            const $btn   = $form.find('button[type="submit"]');

            $form.on('submit', function(e){
                e.preventDefault();

                const emailVal = $.trim($('#email').val());
                const phoneVal = $.trim($('#email2').val());
                if (emailVal && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) {
                    $alert.removeClass('text-success').addClass('text-danger').text('Lütfen geçerli bir e-posta girin.');
                    return;
                }

                $alert.removeClass('text-danger text-success').text('Gönderiliyor…');
                $btn.prop('disabled', true).addClass('disabled');

                $.ajax({
                    url: '/forms/contact-page',
                    method: 'POST',
                    data: $form.serialize(),
                    dataType: 'text',
                    timeout: 20000
                })
                    .done(function(resp){
                        $alert.addClass('text-success').text('Teşekkürler! Mesajınız alındı.');
                        $form.trigger('reset');
                    })
                    .fail(function(xhr){
                        let msg = 'Gönderim sırasında bir hata oluştu.';
                        if (xhr.status === 0) msg = 'Bağlantı kurulamadı (CORS veya ağ hatası).';
                        $alert.addClass('text-danger').text(msg);
                    })
                    .always(function(){
                        $btn.prop('disabled', false).removeClass('disabled');
                    });
            });
        });
    </script>
@endsection