@extends('lyt.app')

@section('title', 'Randevu Oluştur')

@section('content')

{{-- FLATPICKR --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/tr.js"></script>

<section class="pageBanner"
    style="background:url('https://figenkonak.com/storage/pages/breadcumbs/01JXYDAQ4KGJGFS4QTT1F0X2HK.webp') no-repeat center center / cover;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="banner_content text-center">
                    <h4><a href="{{ url('/') }}">Anasayfa</a> - Online İşlemler</h4>
                    <h2>Randevu Oluştur</h2>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
:root{
    --accent:#2563eb;
    --accent-soft:#dbeafe;
    --border:#e2e8f0;
    --muted:#64748b;
    --radius:16px;
}

.form-card{
    max-width:820px;
    margin:60px auto;
    background:#fff;
    border-radius:24px;
    padding:48px;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.field{
    position:relative;
    margin-bottom:22px;
}
.field input,
.field textarea{
    width:100%;
    padding:18px 16px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:#f9fafb;
    font-size:15px;
    outline:none;
}
.field input:focus,
.field textarea:focus{
    background:#fff;
    border-color:var(--accent);
    box-shadow:0 0 0 6px var(--accent-soft);
}
.field label{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:var(--muted);
    background:#fff;
    padding:0 6px;
    pointer-events:none;
    transition:.2s;
}
.field input:focus+label,
.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,
.field textarea:not(:placeholder-shown)+label{
    top:-8px;
    font-size:12px;
    color:var(--accent);
}

.info{
    background:#f1f5f9;
    border-left:4px solid #2563eb;
    padding:16px 18px;
    border-radius:14px;
    font-size:14px;
    color:#334155;
    margin-bottom:24px;
    font-weight:500;
}

.btn-primary{
    border:none;
    border-radius:14px;
    padding:14px 30px;
    font-weight:600;
    box-shadow:0 12px 24px rgba(37,99,235,.25);
}
</style>

<section class="commonSection">
<div class="form-card">

    <h3 class="mb-4">Randevu Talep Formu</h3>

    <div class="info">
        Randevu talepleriniz firma yetkililerimiz tarafından incelenir.
        <strong>Uygun bulunması halinde onaylanarak</strong> tarafınıza geri dönüş sağlanır.
    </div>

    {{-- İLETİŞİM --}}
    <div class="field">
        <input id="ad_soyad" placeholder=" ">
        <label>Ad Soyad</label>
    </div>

    <div class="row g-3">
        <div class="col-md-6">
            <div class="field">
                <input id="telefon" placeholder=" ">
                <label>Cep Telefonu</label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="field">
                <input id="email" placeholder=" ">
                <label>E-posta</label>
            </div>
        </div>
    </div>

    <div class="info">
        Aynı tarih ve saat aralığında birden fazla randevu oluşturulamaz.
        Saatler 15 dakikalık zaman dilimleri halinde seçilebilir.
    </div>

    {{-- TARİH / SAAT --}}
    <div class="row g-3">
        <div class="col-md-4">
            <div class="field">
                <input id="randevu_tarihi" placeholder=" ">
                <label>Tarih</label>
            </div>
        </div>
        <div class="col-md-4">
            <div class="field">
                <input id="saat_baslangic" placeholder=" ">
                <label>Başlangıç Saati</label>
            </div>
        </div>
        <div class="col-md-4">
            <div class="field">
                <input id="saat_bitis" placeholder=" ">
                <label>Bitiş Saati</label>
            </div>
        </div>
    </div>

    <div class="field">
        <textarea id="aciklama" placeholder=" "></textarea>
        <label>Ek Açıklama (Opsiyonel)</label>
    </div>

    <button id="kaydet" class="btn btn-primary w-100 mt-4">
        Randevu Talebi Gönder
    </button>

</div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {

  flatpickr("#randevu_tarihi", {
        locale: "tr",

        /* Kullanıcıya görünen */
        altInput: true,
        altFormat: "d.m.Y",   // 17.01.2026

        /* Backend’e giden */
        dateFormat: "Y-m-d",  // 2026-01-17

        minDate: "today",
        disableMobile: true
    });

    const baslangicPicker = flatpickr("#saat_baslangic", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true,
        minuteIncrement: 15,
        minTime: "09:00",
        maxTime: "18:00",
        disableMobile: true,
        onChange: function(selectedDates, dateStr){
            bitisPicker.set("minTime", dateStr);
        }
    });

    const bitisPicker = flatpickr("#saat_bitis", {
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true,
        minuteIncrement: 15,
        minTime: "09:15",
        maxTime: "18:00",
        disableMobile: true
    });

document.getElementById('kaydet').addEventListener('click', () => {

    Swal.fire({
        title: 'Randevu Talebi Gönderilsin mi?',
        text: 'Bilgileriniz firma yetkililerine iletilecektir.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Evet, Gönder',
        cancelButtonText: 'Vazgeç',
        reverseButtons: true
    }).then((result) => {

        if (!result.isConfirmed) return;

        // 🔄 YÜKLENİYOR ANİMASYONU
        Swal.fire({
            title: 'Gönderiliyor...',
            text: 'Lütfen bekleyiniz',
            allowOutsideClick: false,
            allowEscapeKey: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch('{{ route('randevuolustur.store') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                ad_soyad: ad_soyad.value,
                telefon: telefon.value,
                email: email.value,
                randevu_tarihi: randevu_tarihi.value,
                saat_baslangic: saat_baslangic.value,
                saat_bitis: saat_bitis.value,
                aciklama: aciklama.value
            })
        })
        .then(r => r.json())
        .then(res => {

            Swal.close();

            if (res.success) {

                Swal.fire({
                    icon: 'success',
                    title: 'Başarılı',
                    text: res.message,
                    confirmButtonText: 'Tamam'
                });

                // 🧹 FORM TEMİZLE
                document.querySelectorAll('.form-card input, .form-card textarea')
                    .forEach(el => el.value = '');

            } else {

                Swal.fire({
                    icon: 'warning',
                    title: 'Uyarı',
                    text: res.message
                });
            }
        })
        .catch(() => {

            Swal.close();

            Swal.fire({
                icon: 'error',
                title: 'Hata',
                text: 'Randevu talebi oluşturulamadı'
            });
        });

    });

});



});
</script>

@endsection