@extends('admin.dashboard.layouts.app')


@section('title', panel_setting_title('AML Kuralları'))



@push('style-libraries')
    <!-- Feather CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/daterangepicker/daterangepicker.css') }}">
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/datatables/datatable.min.css') }}">
    <link rel="stylesheet" href="{{ asset("dashboard/css/dashboard.css") }}">
@endpush



@push('styles')
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="content container-fluid">
            <!-- Page Header -->
            <div class=" card rounded-3    ">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <!-- Title and Icon -->
                            <div class="d-flex align-items-center mb-2">
                                <div class="  rounded-3 p-2 me-3 svg-icon-bg">
                                    <i class="fa-solid fa-list svg-icon fs-4"></i>
                                </div>
                                <div>
                                    <h1 class=" fs-3 fw-semibold mb-0 text-white-primary-color">AML Kuralları</h1>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb mb-2">
                                            <li class="breadcrumb-item">
                                                <a href="#"
                                                    class=" text-white-primary-color text-opacity-75 text-decoration-none d-flex align-items-center">
                                                    Sistem Yönetimi </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                AML Kuralları </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <!-- Action Button -->
                        {{-- <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                                <a href="{{ route('admin.dashboard.user-management.user-create') }}"
                                    class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                    <i class="fas fa-plus-circle"></i>
                                    <span>Yeni Kullanıcı</span>
                                </a>
                            </div> --}}
                    </div>
                </div>
            </div>
            <!-- Page Header -->
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-lg-3 col-md-4">

                            <div class="form-floating">
                                <select class="form-select">
                                    <option value="">Durum</option>
                                    <option value="1">Tamamlandı</option>
                                    <option value="2">Reddedildi</option>
                                    <option value="3">Beklemede</option>
                                    <option value="4">İnceleniyor</option>
                                    <option value="5">İade edildi</option>
                                    <option value="6">Bekleyen</option>
                                    <option value="7">Bekleyen İade</option>
                                    <option value="8">Harcama İtirazı Talep Edildi</option>
                                    <option value="9">Harcama İtirazı Onaylandı</option>
                                    <option value="10">Harcama İtirazı Reddedildi</option>
                                    <option value="11">Harcama İtirazı İade Edildi</option>
                                    <option value="12">Harcama İtirazı İptal Edildi</option>
                                    <option value="13">Kısmi İade</option>
                                    <option value="14">Başarısız</option>
                                    <option value="15">İptal Edildi</option>
                                    <option value="16">Bekleyen Ön Provizyon</option>
                                    <option value="17">Bekleyen Geri Ödeme</option>
                                </select>
                                <label for="floatingSelect">Durum</label>
                            </div>

                        </div>
                        <!-- Status -->
                        <div class="col-lg-3 col-md-4">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="dateRange" placeholder="Tarih Aralığı">
                                <label for="dateRange">Tarih Aralığı</label>
                            </div>
                        </div>

                        <!-- Date Type -->
                        <div class="col-lg-3 col-md-4">
                            <div class="form-floating">
                                <select class="form-select">
                                    <option value="">İşlem Tipi</option>
                                </select>
                                <label for="floatingSelect">İşlem Tipi</label>
                            </div>
                        </div>
                        <div class="col text-end align-items-end justify-content-end d-flex">
                            <button
                                class="btn btn-primary d-flex align-items-end text-end justify-content-end  btn-primary-custom">
                                <i class="fas fa-filter me-2"></i>
                                <span>Filtreyi Kaydet</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card border-0 rounded-4 shadow-sm mb-4 border-0">
                <div class="card-body p-4 border-0">
                    <div class="rounded-4 overflow-hidden border-0">
                        <div class="table-responsive border-0">
                            <table id="example" class="table align-middle mb-0 border-0">
                                <thead>
                                    <tr class="bg-light border-0">
                                        <th class=" custom-th border-0">İşlemler</th>
                                        <th class=" custom-th border-0">İşlem ID</th>
                                        <th class=" custom-th border-0">Üye İşyeri ID</th>
                                        <th class=" custom-th border-0">GSM Numarası</th>
                                        <th class=" custom-th border-0">İşlem Tipi</th>
                                        <th class=" custom-th border-0">Tutar</th>
                                        <th class=" custom-th border-0">IBAN</th>
                                        <th class=" custom-th border-0">İsim Soyisim</th>
                                        <th class=" custom-th border-0">Oluşturma Tarihi
                                        </th>
                                        <th class=" custom-th border-0">Açıklama</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    @endsection

    @push('script-libraries')
        <script src="//cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

        <!-- Feather Icon JS -->
        <script src="{{ asset('dashboard/js/feather.min.js') }}"></script>
        <!-- Slimscroll JS -->
        <script src="{{ asset('dashboard/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
        <!-- Chart JS -->
        <script src="{{ asset('dashboard/plugins/apexchart/apexcharts.min.js') }}"></script>
        <script src="{{ asset('dashboard/plugins/apexchart/chart-data.js') }}"></script>

        <script src="{{ asset('dashboard/plugins/moment/moment.min.js') }}"></script>
        <script src="{{ asset('dashboard/plugins/daterangepicker/daterangepicker.js') }}"></script>
    @endpush

    @push('scripts')
        <script>
            var table;

            $(document).ready(function() {
                // Tarih aralığı seçici başlatma
                $('#dateRange').daterangepicker({
                    autoUpdateInput: false,
                    locale: {
                        format: 'DD.MM.YYYY',
                        separator: ' - ',
                        applyLabel: 'Seç',
                        cancelLabel: 'Temizle',
                        fromLabel: 'Başlangıç',
                        toLabel: 'Bitiş',
                        customRangeLabel: 'Özel',
                        weekLabel: 'Hf',
                        daysOfWeek: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
                        monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos',
                            'Eylül', 'Ekim', 'Kasım', 'Aralık'
                        ],
                        firstDay: 1
                    }
                });

                // Tarih aralığı seçilince özel moduna geçiş
                $('#dateRange').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(
                        picker.startDate.format('DD.MM.YYYY') +
                        ' - ' +
                        picker.endDate.format('DD.MM.YYYY')
                    );
                    $('#dateRangeSelect').val("custom"); // "Özel" seçeneğine geç
                });

                // Tarih aralığı temizlendiğinde input temizlenir
                $('#dateRange').on('cancel.daterangepicker', function() {
                    $(this).val('');
                    $('#dateRangeSelect').val('');
                });

                // Tarih aralığı seçimleri
                $('#dateRangeSelect').on('change', function() {
                    const today = moment();
                    let start, end;

                    switch (this.value) {
                        case "last7":
                            start = moment().subtract(6, 'days');
                            end = today;
                            break;
                        case "last30":
                            start = moment().subtract(29, 'days');
                            end = today;
                            break;
                        case "thisMonth":
                            start = moment().startOf('month');
                            end = today;
                            break;
                        case "lastMonth":
                            start = moment().subtract(1, 'month').startOf('month');
                            end = moment().subtract(1, 'month').endOf('month');
                            break;
                        default:
                            start = end = null;
                    }

                    if (start && end) {
                        $('#dateRange').data('daterangepicker').setStartDate(start);
                        $('#dateRange').data('daterangepicker').setEndDate(end);
                        $('#dateRange').val(
                            start.format('DD.MM.YYYY') +
                            ' - ' +
                            end.format('DD.MM.YYYY')
                        );
                    }
                });

                // DataTables başlatma
                table = new DataTable('#example', {
                    paging: true,
                    searching: false,
                    responsive: true,
                    language: {
                        url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/tr.json',
                    },
                    dom: 'Bfrtip',
                    buttons: [
                        /*{
                            extend: 'excelHtml5',
                            text: 'Dışa Aktar',
                            titleAttr: 'CSV olarak dışa aktar',
                            className: 'btn btn-success me-2',
                            bom: true // UTF-8 BOM desteği
                        }*/
                    ]
                });

                // "+" ikonuna tıklayınca child row açma/kapatma
                $('#example tbody').on('click', 'td.details-control', function() {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // Child row açıkken kapat
                        row.child.hide();
                        tr.removeClass('shown');
                    } else {
                        // Child row kapalıyken aç
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });
            });

            // Child row detay formatı
            function format(rowData) {
                return `
        <div>
            <strong>Yetkili Kişi Telefon Numarası:</strong> ${rowData[8]}<br>
            <strong>Yetkili Kişi E-Posta:</strong> ${rowData[9]}<br>
            <strong>Durum:</strong> ${rowData[12]}<br>
            <strong>Oluşturulma Tarihi:</strong> ${rowData[13]}<br>
        </div>
    `;
            }

            // "+" ve "-" ikonlarının yönetimi
            document.querySelectorAll('.accordion-toggle').forEach(function(row) {
                row.addEventListener('click', function() {
                    const icon = row.querySelector('i');
                    if (icon) {
                        icon.classList.toggle('fa-plus-circle');
                        icon.classList.toggle('fa-minus-circle');
                    }
                });
            });
        </script>
    @endpush

    @push('scripts')
    @endpush