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


@section('title', panel_setting_title("Üye İşyeri"))



@push('style-libraries')
    <!-- Feather CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap-datetimepicker.min.css') }}">
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/datatables/datatables.min.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css"> --}}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- Daterangepicker CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="{{ asset("dashboard/css/dashboard.css") }}">
    @endpush

@push('script-libraries')
    <!-- 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>


    <!-- Datatable and buttons JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <!-- Daterangepicker JS ve Moment JS -->
    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endpush



@push('styles')
    <style>
        .dataTables_length label:before {
            content: "";
            margin-right: 5px;
            font-size: 12px;
        }

        .dataTables_length label:after {
            content: "";
            margin-left: 5px;
            font-size: 12px;
        }

        #example_wrapper {
            margin: 25px 10px 25px 10px;
        }

        .table-div {
            background-color: white;
            border-radius: 25px;
            box-shadow: 0px 0px 15px -7px rgba(0, 0, 0, 1);
            overflow: auto;
            width: 97%;
            margin-left: 25px;
        }

        table.dataTable td,
        table.dataTable th {
            white-space: nowrap;
            /* Uzun metinler taşmasın */
            overflow: hidden;
            /* Taşan metinleri gizle */
            text-overflow: ellipsis;
            /* Kısaltılmış metin göster */
        }


        td.details-control {
            cursor: pointer;
            text-align: center;
        }

        tr.shown td.details-control::before {
            content: "-";
            color: red;
        }

        td.details-control::before {
            content: "+";
            color: green;
        }

        .filter-container {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
@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="fas fa-users svg-icon fs-4"></i>
                                </div>
                                <div>
                                    <h1 class=" fs-3 fw-semibold mb-0 text-white-primary-color">Üye İşyeri</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">
                                                    Üye İş Yeri Merkez </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Üye İşyeri</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.addMerchant') }}"
                                class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                <i class="fas fa-plus-circle"></i>
                                <span>Yeni Üye İşyeri</span>

                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 rounded-4 shadow-sm mb-4">
                <div class="card-body p-4">
                    <form id="filterForm">
                        <div class="row g-3 align-items-end">
                            <!-- Status -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Durum</option>
                                        <option value="active">Aktif</option>
                                        <option value="passive">Pasif</option>
                                    </select>
                                    <label class="form-label">Durum</label>
                                </div>
                            </div>

                            <!-- Date Type -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Tarih Türü</option>
                                        <option value="activationDate">Aktivasyon Tarihi</option>
                                        <option value="createdDate">Oluşturulma Tarihi</option>
                                        <option value="updatedDate">Güncelleme Tarihi</option>
                                    </select>
                                    <label class="form-label">Tarih Türü</label>
                                </div>
                            </div>

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

                            <!-- Date Filter -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select " id="dateRangeSelect">
                                        <option value="">Tarih Filtresi</option>
                                        <option value="last7">Son 7 Gün</option>
                                        <option value="last30">Son 30 Gün</option>
                                        <option value="thisMonth">Bu Ay</option>
                                        <option value="lastMonth">Geçen Ay</option>
                                    </select>
                                    <label class="form-label">Tarih Filtresi</label>
                                  </div>
                            </div>

                            <!-- Customer Manager -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Müşteri Yöneticisi</option>
                                        <!-- Müşteri yöneticisi seçenekleri buraya eklenecek -->
                                    </select>
                                    <label class="form-label">Müşteri Yöneticisi</label>
                                </div>
                            </div>

                            <!-- User ID -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control " placeholder="Kullanıcı ID">
                                    <label class="form-label">Kullanıcı ID</label>
                                </div>
                            </div>

                            <!-- Member Business Name -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Üye İşyeri Adı</option>
                                        <!-- Üye işyeri seçenekleri buraya eklenecek -->
                                    </select>
                                    <label class="form-label">Üye İşyeri Adı</label>
                                </div>
                            </div>

                            <!-- Company Name -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Şirket Adı</option>
                                        <!-- Şirket adı seçenekleri buraya eklenecek -->
                                    </select>
                                    <label class="form-label">Şirket Adı</label>
                                </div>
                            </div>

                            <!-- Currency -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Para Birimi</option>
                                        <option value="TRY">TRY</option>
                                        <option value="USD">USD</option>
                                        <option value="EUR">EUR</option>
                                    </select>
                                    <label class="form-label">Para Birimi</label>
                                </div>
                            </div>

                            <!-- Integrator -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <select class="form-select ">
                                        <option value="" selected>Entegratör</option>
                                        <!-- Entegratör seçenekleri buraya eklenecek -->
                                    </select>
                                    <label class="form-label">Entegratör</label>
                                </div>
                            </div>

                            <!-- Authority Phone -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control " placeholder="Yetkili Telefon">
                                    <label class="form-label">Yetkili Telefon</label>
                                </div>
                            </div>

                            <!-- Authority Email -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control " placeholder="Yetkili E-posta">
                                    <label class="form-label">Yetkili E-posta</label>
                                </div>
                            </div>

                            <!-- Buttons -->

                            <div class="col-12 d-flex justify-content-end gap-2 align-items-end text-end">
                                <button type="button" class="btn btn-success-custom p-2 rounded-2"
                                    onclick="exportTableToExcel()">
                                    <i class="fas fa-file-export me-2"></i>Dışa Aktar
                                </button>
                                <button type="submit" class="btn btn-primary-custom">
                                    <i class="fas fa-filter"></i>
                                    <span>Filtrele</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            <div class="card border-0 rounded-4 shadow-sm overflow-hidden">
                <div class="table-responsive">
                    <table id="example" class="table align-middle mb-0 table-hover">
                        <!-- Table Header -->
                        <thead>
                            <tr style="background-color: #f8f9fa;">
                                <th class="border-0 custom-th">
                                </th>
                                <th class="border-0 custom-th">
                                    İşlemler</th>
                                <th class="border-0 custom-th">
                                    ID</th>
                                <th class="border-0 custom-th">
                                    Yönetici Adı</th>
                                <th class="border-0 custom-th">
                                    Üye İşyeri Adı</th>
                                <th class="border-0 custom-th">
                                    Firma Unvanı</th>
                                <th class="border-0 custom-th">
                                    Servis Sağlayıcı</th>
                                <th class="border-0 custom-th">
                                    İletişim Tel</th>
                                <th class="border-0 custom-th">
                                    Yönetici Tel</th>
                                <th class="border-0 custom-th">
                                    E-Posta</th>
                                <th class="border-0 custom-th">
                                    Kullanıcı E-Posta</th>
                                <th class="border-0 custom-th">
                                    Kullanıcı ID</th>
                                <th class="border-0 custom-th">
                                    Durum</th>
                                <th class="border-0 custom-th">
                                    Son Güncelleme</th>
                                <th class="border-bottom px-3 py-3"
                                    style="color: #214a93; font-size: 13px; font-weight: 600; background-color: #f8f9fa;">
                                    Mevcut Bakiye</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($merchants as $merchant)
                                @php
                                    $uyeIsYeri = $merchant->uyeIsYerleri->first();
                                    $data = $uyeIsYeri ? json_decode($uyeIsYeri->data, true) : [];
                                @endphp
                                <tr class="align-middle" style="border-bottom: 1px solid #eef0f3;">
                                    <td class="details-control px-3" style="border-right: 1px solid #eef0f3;"></td>
                                    <td class="px-3" style="border-right: 1px solid #eef0f3;">
                                        <a href="{{ route('admin.dashboard.merchantInfo', ['id' => $merchant->id]) }}"
                                            class="btn d-flex align-items-center justify-content-center p-2 rounded-3"
                                            style="background: rgba(33, 74, 147, 0.1); color: #214a93; font-size: 13px; transition: all 0.3s ease;">
                                            <i class="fas fa-info-circle me-2"></i>
                                            Ayrıntılar
                                        </a>
                                    </td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        <span class="text-secondary">#{{ $merchant->id }}</span>
                                    </td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $data['yetkili_kisi_adi'] ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $data['uye_is_yeri_adi'] ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $data['sirket_tam_adi'] ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $merchant->integrator_name ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $data['irtibat_kisisi_numarasi'] ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $data['yetkili_kisi_numarasi'] ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $data['yetkili_kisi_email'] ?? 'N/A' }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $merchant->email }}</td>
                                    <td class="px-3" style="font-size: 13px; border-right: 1px solid #eef0f3;">
                                        {{ $merchant->UserCollection()->first()->username ?? 'N/A' }}</td>
                                    <td class="px-3" style="border-right: 1px solid #eef0f3;">
                                        <span class="badge rounded-pill px-3 py-2"
                                            style="background: {{ $data['durum'] ?? 'Pasif' == 'Aktif' ? 'rgba(25, 135, 84, 0.1)' : 'rgba(220, 53, 69, 0.1)' }};
                                             color: {{ $data['durum'] ?? 'Pasif' == 'Aktif' ? '#198754' : '#dc3545' }};
                                             font-size: 12px;">
                                            {{ $data['durum'] ?? 'Pasif' }}
                                        </span>
                                    </td>
                                    <td class="px-3" style="border-right: 1px solid #eef0f3;">
                                        <div class="d-flex align-items-center">
                                            <div class="d-flex align-items-center justify-content-center rounded-circle bg-light me-2"
                                                style="width: 26px; height: 26px; background: rgba(33, 74, 147, 0.1);">
                                                <i class="fas fa-calendar" style="font-size: 12px; color: #214a93;"></i>
                                            </div>
                                            <div>
                                                <div style="font-size: 13px;">{{ $merchant->created_at->format('d M Y') }}
                                                </div>
                                                <div class="text-muted" style="font-size: 12px;">
                                                    {{ $merchant->created_at->format('H:i') }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-3" style="font-size: 13px;">
                                        <span class="fw-medium">0.00 ₺</span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('script-libraries')
    <!-- 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>
@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