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

@section('title', panel_setting_title("Kullanıcı Raporu"))

@push('style-libraries')
    <!-- Feather CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/datatables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset("dashboard/css/dashboard.css") }}">
@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">
                                                    Raporlar </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Kullanıcı Raporu</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 -->


            {{-- filter --}}
            <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">

                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="date" class="form-control " id="date"
                                        placeholder="Tarih">
                                    <label class="form-label">Tarih </label>
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="user-company-name"
                                        placeholder="Üye İşyeri Adı">
                                    <label class="form-label">Üye İşyeri Adı </label>
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="site-url"
                                        placeholder="Site URL'si">
                                    <label class="form-label">Site URL'si </label>
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="vergi-url"
                                        placeholder="Vergi URL'si">
                                    <label class="form-label">Vergi URL'si </label>
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="yet-person-namel"
                                        placeholder="Yetkili Kişi Adı">
                                    <label class="form-label">Yetkili Kişi Adı </label>
                                </div>
                            </div>

                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="yet-person-phone"
                                        placeholder="Yetkili Kişi Telefon">
                                    <label class="form-label">Yetkili Kişi Telefon </label>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="yet-person-mail"
                                        placeholder="Yetkili Kişi E-posta">
                                    <label class="form-label">Yetkili Kişi E-posta </label>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="p-code"
                                        placeholder="Posta Kodu">
                                    <label class="form-label">Posta Kodu </label>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <input type="text" class="form-control " id="mcc"
                                        placeholder="MCC">
                                    <label class="form-label">MCC </label>
                                </div>
                            </div>
                            <div class="col-lg-2">
                                <div class="form-floating">
                                    <select class="form-select " id="musteri-sw">
                                        <option value="">Müşteri Yöneticisi</option>
                                        <option value="1">-----</option>
                                    </select>
                                    <label class="form-label">Müşteri Yöneticisi</label>
                                </div>
                            </div>

                            <div class="col-lg-12mt-5">
                                <div
                                    class="d-flex justify-content-lg-end justify-content-start  gap-3 flex-lg-nowrap flex-wrap">
                                    <!-- Buttons -->
                                    <div class="">
                                        <button class="text-nowrap btn btn-danger-custom  w-100 me-2 rounded-2"><i
                                                class="fa-solid fa-broom me-2"></i>Filtreleri Temizle</button>
                                    </div>
                                    <div class="">
                                        <button class="text-nowrap btn btn-primary-custom w-100"><i
                                                class="fa-solid fa-search me-2"></i>Ara</button>
                                    </div>
                                    <div class="">
                                        <button class="text-nowrap btn btn-info-custom w-100 rounded-2"><i
                                                class="fa-solid fa-grip me-2"></i>Sütunları Gizle</button>
                                    </div>
                                    <div class="">
                                        <button class="text-nowrap btn btn-success-custom w-100 rounded-2"><i
                                                class="fa-solid fa-upload me-2"></i>Dışarı Aktar</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            {{-- filter --}}


            <!-- Üye İş Yeri Tablosu -->

            <div class="card border-0 rounded-4 overflow-hidden p-3">
                <div class="table-responsive">
                    <table class="table align-middle mb-0" id="merchantReportTable">
                        <thead>
                            <tr class="bg-light border-0">
                                <th class="custom-th">
                                    Üye İş Yeri Adı</th>
                                <th class="custom-th">
                                    ID</th>
                                <th class="custom-th">
                                    Şehir</th>
                                <th class="custom-th">
                                    Site URL'si</th>
                                <th class="custom-th">
                                    Vergi Numarası</th>
                                <th class="custom-th">
                                    Yetkili Kişi Adı</th>
                                <th class="custom-th">
                                    Yetkili Kişi Telefon</th>
                                <th class="custom-th">
                                    Yetkili Kişi E-Posta</th>
                                <th class="custom-th">
                                    Müşteri Yöneticisi</th>
                                <th class="custom-th">
                                    Posta Kodu</th>
                                <th class="custom-th">
                                    MCC</th>
                                <th class="custom-th">
                                    Aktivasyon Tarihi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                                <td style="font-size: 13px;">---</td>
                            </tr>
                            <!-- Daha Fazla Veri Eklenebilir -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- /Üye İş Yeri Tablosu -->

    @endsection

    @push('script-libraries')
        <!-- Datatable JS -->
        <script src="{{ asset('dashboard/plugins/datatables/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>
    @endpush

    @push('scripts')
        <script>
            $(document).ready(function() {
                // Eğer DataTable başlatılmamışsa başlatın
                if (!$.fn.DataTable.isDataTable('#merchantReportTable')) {
                    // DataTable'ı başlat
                    $('#merchantReportTable').DataTable({
                        "destroy": true, // Mevcut DataTable'ı yeniden başlatırken eski tabloyu yok et
                        "pageLength": 10,
                        "lengthChange": true,
                        "searching": true,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "responsive": true,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.11.3/i18n/Turkish.json"
                        }
                    });
                }
            });
        </script>
    @endpush