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

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

@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="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.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="fas fa-file svg-icon fs-4"></i>
                                </div>
                                <div>
                                    <h1 class=" fs-3 fw-semibold mb-0 text-white-primary-color">Üye İşyeri Başvuru</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 Merkezi </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Üye İşyeri Başvuru</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.merchantAddRequestCreate') }}"
                                class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                <i class="fas fa-plus-circle"></i>
                                <span>Yeni Başvuru Ekle</span>

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


            <!-- Başvuru Filtre ve Butonlar -->
            <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 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>

                            <!-- 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>

                            <!-- Application ID -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" placeholder="Başvuru ID">
                                    <label class="form-label ">Başvuru 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>

                            <!-- 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>

                            <!-- 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>

                            <!-- Website -->
                            <div class="col-lg-3 col-md-4">
                                <div class="form-floating">
                                    <input type="text" class="form-control" placeholder="Web Sitesi">
                                    <label class="form-label ">Web Sitesi</label>
                                </div>
                            </div>

                            <!-- Buttons -->
                            <div class="col-12 d-flex justify-content-end gap-2">
                                <button type="submit" class="btn btn-primary-custom">
                                    <i class="fas fa-search me-2"></i>Ara
                                </button>
                                <button type="button" class="btn btn-success-custom rounded-2 py-2">
                                    <i class="fas fa-file-export me-2"></i>Dışa Aktar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Başvuru Tablosu -->
            <div class="card border-0 rounded-4 overflow-hidden p-3">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                            <tr class="bg-light border-0">
                                <th class="custom-th">
                                    Üye İş Yeri Adı</th>
                                <th class="custom-th">
                                    Website</th>
                                <th class="custom-th">
                                    Yetkili Kişi Adı</th>
                                <th class="custom-th">
                                    Yetkili Kişi E-Posta</th>
                                <th class="custom-th">
                                    Yetkili Kişi Telefon</th>
                                <th class="custom-th">İşlemler</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($apps as $item)
                                <tr class="align-middle border-bottom">
                                    <td class="px-4" style="font-size: 13px;">{{ $item->merchant_name }}</td>
                                    <td style="font-size: 13px;">{{ $item->website }}</td>
                                    <td style="font-size: 13px;">{{ $item->auth_person_name }}</td>
                                    <td style="font-size: 13px;">{{ $item->auth_person_email }}</td>
                                    <td style="font-size: 13px;">{{ $item->auth_person_phone }}</td>
                                    <td class="text-end px-4">
                                        <a href="{{ route('admin.dashboard.merchantAddRequestDetail', ['id' => $item->id]) }}"
                                            class="btn rounded-circle d-flex align-itmes-center justify-content-center"
                                            style="background: rgba(33, 74, 147, 0.1); width: 30px; height: 30px;"
                                            data-bs-toggle="tooltip" title="Detaylar">
                                            <i class="fas fa-edit" style="color: #214a93; font-size: 16px;"></i>
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted" style="font-size: 13px;">Veri
                                        bulunamadı</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="mt-4 d-flex justify-content-end">
                {{ $apps->links() }}
            </div>
        </div>
    </div>
@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>
    <!-- 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>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            if (!$.fn.DataTable.isDataTable('#applicationsTable')) {
                $('#applicationsTable').DataTable({
                    "pageLength": 10,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "dom": 'Bfrtip',
                    "info": true,
                    "autoWidth": false,
                    "responsive": true,
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/1.11.3/i18n/Turkish.json"
                    },
                    "buttons": [{
                        extend: 'excelHtml5',
                        text: 'Dışa Aktar',
                        titleAttr: 'CSV olarak dışa aktar',
                        className: 'btn btn-success',
                        bom: true
                    }]
                });
            }
        });
    </script>
@endpush