{{-- resources/views/admin/dashboard/komisyon/poslar.blade.php --}}
<style>
    .bg-primary-custom {
        color: #0052ea !important;
        background-color: rgba(33, 74, 147, 0.1) !important;
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bg-danger-custom {
        color: #b51515 !important;
        background-color: rgb(167 43 55 / 10%) !important;
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important
    }

    .btn-primary-custom {
        background: linear-gradient(to right, #cde3fe, #cde3fe) !important;
        ;
         color: #3a3a3a !important;;
        ;
        border: none !important;
        ;
    }

    .btn-danger-custom {
        background-color: rgb(167 43 55 / 10%) !important;
        ;
        color: #dc3545 !important;
        ;
    }

    .dataTables_length {
        display: none !important;
    }

    .dataTables_paginate {
        display: none !important;
    }

    .dataTables_filter {
        display: none !important;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .btn-outline-primary-custom {
        border: 1px solid rgb(33, 75, 147) !important;
        color: rgb(33, 75, 147) !important;
    }

    .text-primary-custom {
        color: rgb(33, 75, 147) !important;
    }

    .custom-border-bottom {
        border-bottom: 0.8px solid rgb(33, 75, 147) !important;
    }

    .dt-buttons {
        display: flex !important;
        justify-content: end !important;
        float: none !important;
        width: 100% !important;
    }
</style>
@extends('admin.dashboard.layouts.app')

@section('title', panel_setting_title('Terminal Kontrolü'))

@push('style-libraries')
    <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.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap-datetimepicker.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}" />
@endpush

@push('styles')
    <style>
        .sidebar {
            overflow-y: auto !important;
            max-height: 100vh;
            /* Ekran boyutuna göre yükseklik */
        }

        #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;
        }

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

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

        .dt-button {
            background-color: #0d6efd !important;
             color: #3a3a3a !important;;
            border: 1px solid #0d6efd !important;
            border-radius: 4px;
            padding: .375rem .75rem;
        }

        .dataTables_length {
            display: none !important;
        }

        .dataTables_paginate {
            display: none !important;
        }

        .dataTables_filter {
            display: none !important;
        }
    </style>
@endpush

@section('content')
    <div class="page-wrapper">
        <div class="content container-fluid">
            <!-- Page Header -->
            <div class="card border-0 rounded-4 shadow-sm mb-4"
                style="background: linear-gradient(to right, #1427aa, #6e9fc4)">
                <div class="card-body p-4">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div>
                            <div class="d-flex align-items-center mb-2">
                                <div class="bg-white bg-opacity-10 rounded-3 p-2 me-3">
                                    <i class="fa-solid fa-calculator text-white fs-4"></i>
                                </div>
                                <div>
                                    <h1 class="text-white fs-3 fw-semibold mb-0">Pos Ayarları</h1>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb mb-2">
                                            <li class="breadcrumb-item">
                                                <a href="#"
                                                    class="text-white text-opacity-75 text-decoration-none d-flex align-items-center">
                                                    Finansal Tanımlar </a>
                                            </li>
                                            <li class="breadcrumb-item text-white text-opacity-75 active"
                                                aria-current="page">Pos Ayarları</li>
                                        </ol>
                                    </nav>

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

                        <div class="d-flex align-items-center gap-2">
                            {{-- button --}}

                            <div class="text-lg-end ">
                                <a class="text-nowrap btn btn-outline-light rounded-3 px-4 py-2 d-inline-flex align-items-center gap-2"
                                    onclick="openModal('addCommissionPosModal', false)" href="javascript:void(0)">
                                    <i class="fa fa-plus-circle me-2"></i> Ekle
                                </a>
                            </div>
                            {{-- button --}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->


            <div class="card border-0 rounded-4 overflow-auto p-3">

                <div class="col-sm-12">
                    <!-- Tabloyu saran div -->
                    <div class=" col-md-12 p-0 m-0">
                        <table class="table align-middle mb-0" id="example">
                            <thead>
                                <tr class="bg-light border-0">
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">ID</th>
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">POS ID</th>
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">POS Adı</th>
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">Durum</th>
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">POS Bankası</th>
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">POS Para Birimi</th>
                                    <th class="border-0 px-4 py-3"
                                        style="color: #214a93; font-size: 13px; font-weight: 600;">İşlemler</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($pos as $item)
                                    @php
                                        // Örnek olarak veritabanından gelen JSON formatı (pos->data)
                                        $row = json_decode($item->data);
                                        $bank = $banks->where('id', $row->bank_id)->first();
                                        $currency = $currencies->where('id', $row->currency_id)->first();
                                    @endphp
                                    <tr>
                                        <td style="font-size: 13px;">{{ $item->id }}</td>
                                        <td style="font-size: 13px;">{{ $row->virtual_pos_id ?? '-' }}</td>
                                        <td style="font-size: 13px;">{{ $row->name ?? '-' }}</td>
                                        <td style="font-size: 13px;">{{ $row->status ? 'Aktif' : 'Pasif' }}</td>
                                        <td style="font-size: 13px;">{{ $bank ? $bank->name : '-' }}</td>
                                        <td style="font-size: 13px;">{{ $currency ? $currency->name : '-' }}</td>
                                        <td style="font-size: 13px;" class="d-flex align-items-center gap-2">
                                            <a href="javascript:void(0)"
                                                class="btn bg-primary-custom editPos rounded-circle"
                                                data-id="{{ $item->id }}" data-modal="editCommissionPosModal">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </a>
                                            <a href='{{ route('admin.dashboard.komisyon.pos-yonetimi.delete', ['id' => $item->id]) }}'
                                                class="btn bg-danger-custom rounded-circle" style="margin-left:5px"
                                                onclick="return confirm('Silmek istediğinize emin misiniz?')">
                                                <i class="fa-solid fa-trash"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center">Kayıt bulunamadı.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div><!-- .table-div -->
                </div>
            </div>

        </div>
    </div>

    <!-- Örnek Modal (add-commission-pos) -->
    @include('admin.components.modals.add-commission-pos', [
        'currencies' => $currencies,
        'cardFamilies' => $cardFamilies,
        'banks' => $banks,
    ])

    @include('admin.components.modals.edit-commission-pos', [
        'currencies' => $currencies,
        'cardFamilies' => $cardFamilies,
        'banks' => $banks,
    ])
    <!-- Arka plan tıklama alanı (Modalı kapatmak için) -->
    <div class="modalbg"
        style="display:none;
                                z-index:9999;
                                top:0;left:0;
                                position:fixed;
                                width:100%;
                                height:100%;
                                background:rgba(0, 0, 0, 0.356)">
    </div>
@endsection

@push('script-libraries')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

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

    <!-- DataTables Buttons Extension -->
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <!-- Excel için JSZip gerekli -->
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <!-- Excel Button -->
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

    <!-- Modal aç/kapat fonksiyonları -->
    <script src="{{ asset('dashboard/js/modal.js?v=2') }}"></script>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {

            var table = $('#example').DataTable({
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/tr.json'
                },
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: 'Dışa Aktar',
                    titleAttr: 'Excel Çıktısı',
                    className: 'btn btn-primary-custom  mb-3 rounded ',
                    exportOptions: {
                        columns: ':not(:last-child)'
                    }
                }]
            });


            $(".editPos").click(function() {
                var el = $(this);

                $.ajax({
                    url: "../commission/pos-yonetimi/" + el.data('id'),
                    data: {},
                    method: 'GET',
                    success: function(data) {
                        $("#" + el.data('modal') + " #pos_id").val(el.data('id'));
                        $.each(data, function(index, item) {
                            var $element = $("#" + el.data('modal') + " #" + index);
                            if ($element.length) {
                                if ($element.attr('type') === "checkbox") {
                                    if (item == 1 || item == "1") {
                                        $element.prop('checked', true);
                                    } else {
                                        $element.prop('checked', false);
                                    }
                                } else {
                                    $element.val(item);
                                }
                            }
                        });
                        openModal(el.data('modal'));
                    }
                });
            });

        });
    </script>
@endpush