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


@section('title', panel_setting_title('Yönetici Paneli'))



@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="{{ 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-users svg-icon fs-4"></i>
                                </div>
                                <div>
                                    <h1 class=" fs-3 fw-semibold mb-0 text-white-primary-color">Servisler</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">
                                                    Servis Sağlayıcılar </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Servisler</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.addBank') }}"
                                class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                <i class="fas fa-plus-circle"></i>
                                <span> Banka Ekle</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page Header -->


            <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">Banka Logo</th>
                                <th class="custom-th">Banka ismi</th>
                                <th class="custom-th">Banka Adresi</th>
                                <th class="custom-th">Banka EFT Kodu</th>
                                <th class="custom-th">Banka Telefon</th>
                                <th class="custom-th">Banka Fax</th>
                                <th class="custom-th">Banka Web Sitesi</th>
                                <th class="custom-th">Banka Swift</th>
                                <th class="custom-th">Durum</th>
                                <th class="custom-th">Güncelle</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($banks as $bank)
                                <tr>
                                    <td style="font-size: 13px;"><img
                                            src="{{ \Illuminate\Support\Facades\Storage::url($bank->path) }}"
                                            width="80" /></td>
                                    <td style="font-size: 13px;">{{ $bank->name }}</td>
                                    <td style="font-size: 13px; ">{{ $bank->address }}</td>
                                    <td style="font-size: 13px;">{{ $bank->eft }}</td>
                                    <td style="font-size: 13px;">{{ $bank->telephone }}</td>
                                    <td style="font-size: 13px;">{{ $bank->fax }}</td>
                                    <td style="font-size: 13px;">{{ $bank->web }}</td>
                                    <td style="font-size: 13px;">{{ $bank->swift }}</td>
                                    <td style="font-size: 13px;">{{ $bank->status == 0 ? 'Aktif' : 'Pasif' }}</td>
                                    <td style="font-size: 13px;"><a
                                            href="{{ route('admin.dashboard.updateBank', ['id' => $bank->id]) }}"
                                            class="btn btn-primary-custom">Güncelle</a></td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>

                </div>
                <div class="mt-4 d-flex justify-content-end">
                    {{ $banks->links() }}
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        var table = new DataTable('#example', {
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/tr.json',
            },
        });
    </script>
    <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;
        }
    </style>
@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')
@endpush