@extends('layouts.app', ['module' => 'Ödeme Ayarları', 'moduleTitle' => 'Ödeme Ayarları'])
@section('bodyClass', 'dashboard-main')
@section('content')
<div class="card basic-data-table">
    <div class="card-header">
        <h5 class="card-title mb-0">Ödeme Ayarları</h5>
    </div>
    <div class="card-body">
        <form class="form" id="settingsform" method="post" action="{{ url('/iban/update') }}">


            @csrf
            <div id="bank-transfer-modal" class="modal fade show" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Banka Hesap Bilgileri</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="alert alert-info text-center" style="margin: 0 0 20px 0;border: 2px solid #004d8f !important;border-radius: 4px !important;padding: 5px;color: #004d8f;">
                                Lütfen Havale/EFT/FAST açıklamasına yalnızca fatura numarası giriniz.
                            </div>

                            <div class="row">
                                <div class="col-md-7">
                                    <table class="table">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Banka</th>
                                                <th>IBAN</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                            $tanim = \App\Models\Iban::all(); // Eloquent sorgusu
                                            $alicis = \App\Models\Iban::first();
                                            @endphp
                                            @foreach($tanim as $bilgi)
                                            <tr>
                                                <td>
                                                    <label>{{$bilgi->bankname}}</label>
                                                    <i title="Otomatik Kontrol" data-toggle="tooltip" style="background: #009b65;padding: 5px;border-radius: 100%;text-align: center;display: inline-block;"></i>
                                                </td>
                                                <td>{{$bilgi->iban}}</td>
                                            </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                    <p>
                                        <strong class="bg-info text-light" style="width: 100%;float: left;padding: 10px;">Alici: {{$alicis->alici}}</strong>
                                    </p>
                                </div>

                            

                            </div>
                        </div>
                        <!--            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
            </div>
            -->
                    </div>
                </div>
            </div>
            <button type="button" id="openModalBtn" style="position: absolute; right: 160px;" id="showButton" class="btn btn-primary"><iconify-icon icon="iconamoon:eye-light">
                </iconify-icon></button>
            <style>
                #bank-transfer-modal {
                    display: none;
                }

                #showButton {
                    position: absolute;
                    right: 160px;


                }
            </style>
            <script>
                document.getElementById('openModalBtn').addEventListener('click', function() {
                    document.getElementById('bank-transfer-modal').style.display = 'block';
                });

                document.querySelector('.btn-close').addEventListener('click', function() {
                    document.getElementById('bank-transfer-modal').style.display = 'none';
                });
            </script>

            <div class="form-actions">
                <!-- Button Type "button" kullanarak -->
                <button type="submit" class="btn btn-outline-success" id="saveButton" onclick="kaydett()">
                    <i class="ft-check"></i> Kaydet
                </button>



            </div>
            <h3>IBAN Bilgileri</h3>


            <div class="row gy-3">
                <div class="col-md-6">
                    <label class="form-label">Banka İsim</label>
                    <input type="text" class="form-control" placeholder="Banka Isim" name="bankname" value="" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">IBAN</label>
                    <input type="text" class="form-control" placeholder="TR" name="iban" id="ibanInput" value="" required>
                    <small id="ibanError" style="color: red; display: none;">Geçersiz IBAN formatı!</small>
                </div>

                <style>
                    #saveButton {
                        position: absolute;
                        right: 80px;
                        top: 210px;

                    }
                </style>
                <script>
                    document.getElementById('ibanInput').addEventListener('input', function() {
                        const iban = this.value.toUpperCase().replace(/\s+/g, '');
                        const ibanRegex = /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/;

                        // Uzunluk kontrolü (Türkiye için 26 karakter)
                        if (!ibanRegex.test(iban) || iban.length !== 26) {
                            document.getElementById('ibanError').style.display = 'block';
                        } else {
                            document.getElementById('ibanError').style.display = 'none';
                        }
                    });
                </script>
        </form>

    </div>


</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script type="text/javascript">
    function kaydett() {
        event.preventDefault(); // Formun otomatik submit olmasını engelle

        console.log("Fonksiyon çalıştı"); // Fonksiyonun çalıştığını kontrol etmek için
        var bankname = $('input[name="bankname"]').val();
        var iban = $('input[name="iban"]').val();

        if (bankname.trim() === "" || iban.trim() === "") {
            toastr.warning("Lütfen tüm alanları doldurun.");
            return; // Boşsa işlem yapma
        }
        $.ajax({
            method: 'POST',
            dataType: 'json',
            data: $('#settingsform').serialize(),

            url: "{{ url('/iban/update') }}",

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token]').attr('content')
            },

            success: function(result) {
                if (result.status === true) {
                    toastr.success("Ödeme bilgileri başarıyla kaydedildi.");

                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);
                } else {
                    toastr.warning(result.error);
                }
            },
            error: function() {
                toastr.error("Bağlantı Hatası! Tekrar Deneyin.");
            }
        });
    }
</script>

@endsection