@extends('layouts.default')
@section('content')
    <style>
        .step-wizard {
            display: none;
        }
        .step-wizard.active {
            display: block;
        }
        .step-progress {
            position: relative;
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        .step-progress-item {
            position: relative;
            width: 20%;
            text-align: center;
        }
        .step-progress-item:after {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #dee2e6;
        }
        .step-progress-item:last-child:after {
            display: none;
        }
        .step-progress-item.active .step-progress-circle {
            background: #08112a;
            color: white;
        }
        .step-progress-circle {
            width: 40px;
            height: 40px;
            background: #fff;
            border: 2px solid #dee2e6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 5px;
            position: relative;
            z-index: 1;
        }
        .loading-text {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .spinner-border {
            width: 1rem;
            height: 1rem;
            border-width: 0.15em;
        }

        #submitButton:disabled {
            cursor: not-allowed;
            opacity: 0.75;
        }
    </style>
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h3 class="text-center mb-4">KYC Doğrulama</h3>

                    <!-- Progress Steps -->
                    <div class="step-progress mb-5">
                        <div class="step-progress-item active">
                            <div class="step-progress-circle">1</div>
                            <div class="step-progress-text">Kimlik</div>
                        </div>
                        <div class="step-progress-item">
                            <div class="step-progress-circle">2</div>
                            <div class="step-progress-text">Adres</div>
                        </div>
                        <div class="step-progress-item">
                            <div class="step-progress-circle">3</div>
                            <div class="step-progress-text">İş/Gelir</div>
                        </div>
                        <div class="step-progress-item">
                            <div class="step-progress-circle">4</div>
                            <div class="step-progress-text">Belgeler</div>
                        </div>
                        <div class="step-progress-item">
                            <div class="step-progress-circle">5</div>
                            <div class="step-progress-text">Onay</div>
                        </div>
                    </div>

                    <form id="kycForm" action="{{ route('kyc.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Step 1: Kimlik Bilgileri -->
                        <div class="step-wizard active" id="step1">
                            <h4 class="mb-4">Kimlik Bilgileri</h4>

                            <div class="mb-3">
                                <label class="form-label">Kimlik Türü</label>
                                <select name="id_type" class="form-select" required>
                                    <option value="">Seçiniz</option>
                                    <option value="national_id">TC Kimlik Kartı</option>
                                    <option value="passport">Pasaport</option>
                                    <option value="driving_license">Sürücü Belgesi</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Kimlik Numarası</label>
                                <input type="text" name="id_number" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Son Geçerlilik Tarihi</label>
                                <input type="date" name="id_expiry_date" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Kimlik Ön Yüzü</label>
                                <input type="file" name="id_front_image" class="form-control" accept="image/*" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Kimlik Arka Yüzü</label>
                                <input type="file" name="id_back_image" class="form-control" accept="image/*" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Kimlik ile Selfie</label>
                                <input type="file" name="selfie_with_id" class="form-control" accept="image/*" required>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-primary" onclick="nextStep(1)">İleri</button>
                            </div>
                        </div>

                        <!-- Step 2: Adres Bilgileri -->
                        <div class="step-wizard" id="step2">
                            <h4 class="mb-4">Adres Bilgileri</h4>

                            <div class="mb-3">
                                <label class="form-label">İl</label>
                                <select name="city" id="city" class="form-select" required>
                                    <option value="">Seçiniz</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">İlçe</label>
                                <select name="state" id="state" class="form-select" required>
                                    <option value="">Önce il seçiniz</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Mahalle</label>
                                <select name="district" id="district" class="form-select" required>
                                    <option value="">Önce ilçe seçiniz</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Açık Adres</label>
                                <textarea name="street_address" class="form-control" rows="3" required></textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Posta Kodu</label>
                                <input type="text" name="postal_code" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">İkametgah Belgesi</label>
                                <input type="file" name="proof_of_address_doc" class="form-control" required>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" onclick="prevStep(2)">Geri</button>
                                <button type="button" class="btn btn-primary" onclick="nextStep(2)">İleri</button>
                            </div>
                        </div>

                        <!-- Step 3: İş/Gelir Bilgileri -->
                        <div class="step-wizard" id="step3">
                            <h4 class="mb-4">İş ve Gelir Bilgileri</h4>

                            <div class="mb-3">
                                <label class="form-label">Meslek</label>
                                <input type="text" name="occupation" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">İşveren Adı</label>
                                <input type="text" name="employer_name" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Yıllık Gelir</label>
                                <input type="number" name="annual_income" class="form-control" step="0.01">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Gelir Kaynağı</label>
                                <select name="source_of_funds" class="form-select" required>
                                    <option value="">Seçiniz</option>
                                    <option value="salary">Maaş</option>
                                    <option value="business">İşletme Geliri</option>
                                    <option value="investment">Yatırım Geliri</option>
                                    <option value="inheritance">Miras</option>
                                    <option value="other">Diğer</option>
                                </select>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" onclick="prevStep(3)">Geri</button>
                                <button type="button" class="btn btn-primary" onclick="nextStep(3)">İleri</button>
                            </div>
                        </div>

                        <!-- Step 4: İlave Belgeler -->
                        <div class="step-wizard" id="step4">
                            <h4 class="mb-4">İlave Belgeler</h4>

                            <div class="mb-3">
                                <label class="form-label">Gelir Belgesi</label>
                                <input type="file" name="additional_documents[]" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Vergi Levhası</label>
                                <input type="file" name="additional_documents[]" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Diğer Belgeler</label>
                                <input type="file" name="additional_documents[]" class="form-control" multiple>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" onclick="prevStep(4)">Geri</button>
                                <button type="button" class="btn btn-primary" onclick="nextStep(4)">İleri</button>
                            </div>
                        </div>

                        <!-- Step 5: Onay -->
                        <div class="step-wizard" id="step5">
                            <h4 class="mb-4">Onay</h4>

                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="is_politically_exposed" id="pepCheck">
                                    <label class="form-check-label" for="pepCheck">
                                        Siyasi olarak tanınan bir kişi değilim veya böyle bir kişi ile yakın ilişkim bulunmamaktadır.
                                    </label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" required id="termsCheck">
                                    <label class="form-check-label" for="termsCheck">
                                        Verdiğim bilgilerin doğruluğunu onaylıyorum ve KYC sürecinin bir parçası olarak kontrolünü kabul ediyorum.
                                    </label>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between">
                                <button type="button" class="btn btn-secondary" onclick="prevStep(5)">Geri</button>
                                <button type="submit" class="btn btn-success" id="submitButton">
                                    <span class="normal-text">Başvuruyu Tamamla</span>
                                    <span class="loading-text d-none">
                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                        Lütfen bekleyiniz...
                                    </span>
                                </button>

                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    // İl-İlçe-Mahalle verileri
    const locationData = {
        "istanbul": {
            name: "İstanbul",
            districts: {
                "kadikoy": {
                    name: "Kadıköy",
                    neighborhoods: ["Caferağa", "Fenerbahçe", "Göztepe", "Kozyatağı", "Suadiye", "Bostancı", "Caddebostan", "Erenköy", "Sahrayıcedit", "Zühtüpaşa"]
                },
                "besiktas": {
                    name: "Beşiktaş",
                    neighborhoods: ["Levent", "Etiler", "Arnavutköy", "Bebek", "Ortaköy", "Ulus", "Gayrettepe", "Türkali", "Sinanpaşa", "Abbasağa"]
                }
            }
        },
        "ankara": {
            name: "Ankara",
            districts: {
                "cankaya": {
                    name: "Çankaya",
                    neighborhoods: ["Kızılay", "Bahçelievler", "Çukurambar", "Dikmen", "Öveçler", "Aşağı Ayrancı", "Yukarı Ayrancı", "Çayyolu", "Oran", "Yıldız"]
                },
                "yenimahalle": {
                    name: "Yenimahalle",
                    neighborhoods: ["Batıkent", "Demetevler", "Karşıyaka", "Ostim", "Şentepe", "Anadolu", "Güventepe", "İvedik", "Kaletepe", "Varlık"]
                }
            }
        },
        "izmir": {
            name: "İzmir",
            districts: {
                "karsiyaka": {
                    name: "Karşıyaka",
                    neighborhoods: ["Bostanlı", "Mavişehir", "Alaybey", "Bahariye", "Tersane", "Tuna", "Yalı", "Zübeyde Hanım", "Goncalar", "Dedebaşı"]
                },
                "bornova": {
                    name: "Bornova",
                    neighborhoods: ["Evka", "Erzene", "Kazımdirik", "Manavkuyu", "Yeşilova", "Özkanlar", "Doğanlar", "Çamdibi", "Işıkkent", "Altındağ"]
                }
            }
        }
    };

    // Form progress yönetimi
    function updateProgress(step) {
        document.querySelectorAll('.step-progress-item').forEach((item, index) => {
            if (index < step) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }

    function nextStep(currentStep) {
        // Form validasyonu
        const currentStepElement = document.getElementById(`step${currentStep}`);
        const inputs = currentStepElement.querySelectorAll('input[required], select[required], textarea[required]');
        let isValid = true;

        inputs.forEach(input => {
            if (!input.value) {
                isValid = false;
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        });

        if (!isValid) {
            alert('Lütfen tüm zorunlu alanları doldurunuz.');
            return;
        }

        document.getElementById(`step${currentStep}`).classList.remove('active');
        document.getElementById(`step${currentStep + 1}`).classList.add('active');
        updateProgress(currentStep + 1);
    }

    function prevStep(currentStep) {
        document.getElementById(`step${currentStep}`).classList.remove('active');
        document.getElementById(`step${currentStep - 1}`).classList.add('active');
        updateProgress(currentStep - 1);
    }

    // İl-İlçe-Mahalle seçimi yönetimi
    document.addEventListener('DOMContentLoaded', function() {
        const citySelect = document.getElementById('city');
        const stateSelect = document.getElementById('state');
        const districtSelect = document.getElementById('district');

        // İlleri yükleme
        for (const cityKey in locationData) {
            const option = document.createElement('option');
            option.value = cityKey;
            option.textContent = locationData[cityKey].name;
            citySelect.appendChild(option);
        }

        // İl seçildiğinde
        citySelect.addEventListener('change', function() {
            stateSelect.innerHTML = '<option value="">İlçe Seçiniz</option>';
            districtSelect.innerHTML = '<option value="">Mahalle Seçiniz</option>';

            if (this.value) {
                const districts = locationData[this.value].districts;
                for (const districtKey in districts) {
                    const option = document.createElement('option');
                    option.value = districtKey;
                    option.textContent = districts[districtKey].name;
                    stateSelect.appendChild(option);
                }
            }
        });

        // İlçe seçildiğinde
        stateSelect.addEventListener('change', function() {
            districtSelect.innerHTML = '<option value="">Mahalle Seçiniz</option>';

            if (this.value) {
                const neighborhoods = locationData[citySelect.value].districts[this.value].neighborhoods;
                neighborhoods.forEach(neighborhood => {
                    const option = document.createElement('option');
                    option.value = neighborhood;
                    option.textContent = neighborhood;
                    districtSelect.appendChild(option);
                });
            }
        });
    });

    // Dosya yükleme önizleme
    document.querySelectorAll('input[type="file"]').forEach(input => {
        input.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                const maxSize = 5 * 1024 * 1024; // 5MB
                if (this.files[0].size > maxSize) {
                    alert('Dosya boyutu 5MB\'dan küçük olmalıdır.');
                    this.value = '';
                    return;
                }

                // Dosya türü kontrolü
                const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
                if (!allowedTypes.includes(this.files[0].type)) {
                    alert('Sadece JPEG, PNG ve PDF dosyaları yüklenebilir.');
                    this.value = '';
                    return;
                }
            }
        });
    });

    // Form submit
    $('#kycForm').on('submit', function(e) {
        e.preventDefault();

        const $form = $(this);
        const $submitBtn = $('#submitButton');
        const $normalText = $submitBtn.find('.normal-text');
        const $loadingText = $submitBtn.find('.loading-text');

        // Form submit başlamadan önce
        $submitBtn.prop('disabled', true);
        $normalText.addClass('d-none');
        $loadingText.removeClass('d-none');

        let formData = new FormData(this);

        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if(response.redirect) {
                    window.location.href = response.redirect;
                }
            },
            error: function(xhr) {
                console.error('KYC Error:', xhr.responseJSON);
                alert(xhr.responseJSON.message || 'Bir hata oluştu');

                // Hata durumunda butonu eski haline getir
                $submitBtn.prop('disabled', false);
                $normalText.removeClass('d-none');
                $loadingText.addClass('d-none');
            }
        });
    });
</script>
@endpush