{{-- resources/views/admin/dashboard/komisyon/poslar.blade.php --}}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

    * {
        font-family: "Montserrat", serif;
    }

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

    .custom-th {
        padding: 20px !important;
        background-color: #C9E4FF !important;
        color: #333 !important;
    }

    .custom-th:first-child {
        border-top-left-radius: 10px;
    }

    .custom-th:last-child {
        border-top-right-radius: 10px;
    }

    .btn-danger-custom {
        color: #ff0000 !important;
        background-color: rgba(220, 53, 69, 0.1) !important;
    }

    .btn-success-custom {
        background-color: rgba(53, 220, 137, 0.1) !important;
        color: #35dc64 !important;
    }

    .btn-warning-custom {
        background-color: rgba(220, 184, 53, 0.1) !important;
        color: #dcb535 !important;
    }

    .btn-info-custom {
        background-color: rgba(220, 53, 214, 0.1) !important;
        color: #dc35c3 !important;
    }

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

    .svg-icon-bg {
        border-radius: 12px;
        background-color: #C9E4FF;
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .svg-icon-bg i {
        color: #1126aa;
    }

    .mini-card-title {
        color: #333;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .price {
        color: #1126aa;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .bg-danger-custom {
        color: #F83333;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 74px;
        height: 23px;
        border-radius: 2px;
        background-color: #FFF0F0;
    }

    .mini-card-bg-custom {
        border-radius: 8px;
        background-color: #FFF;
        padding: 24px
    }

    .success-item {
        font-size: 28px;
        color: #1126aa;
        font-weight: 700;
    }

    #polarChart {
        height: 400px !important;
        margin: 25px auto;
        height: 82% !important;
    }

    #dashboardHomeTable {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        height: 400px !important;
    }

    #dashboardHomeTable th,
    #dashboardHomeTable td {
        padding: 12px;
        text-align: start;
    }

    #dashboardHomeTable th {
        padding: 20px;
        background-color: #C9E4FF;
        color: #333;
    }

    #dashboardHomeTable th:first-child {
        border-top-left-radius: 10px;
    }

    #dashboardHomeTable th:last-child {
        border-top-right-radius: 10px;
    }

    @media (max-width: 768px) {
        #dashboardHomeTable {
            width: 100%;
            font-size: 14px;
        }

        #dashboardHomeTable th,
        #dashboardHomeTable td {
            padding: 8px;
        }

        #dashboardHomeTable .container {
            padding: 10px;
        }

        #dashboardHomeTable .btn-details {
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {

        #dashboardHomeTable th,
        #dashboardHomeTable td {
            display: block;
            width: 100%;
            text-align: left;
            padding: 10px 15px;
        }

        #dashboardHomeTable tr {
            margin-bottom: 20px;
        }

        #dashboardHomeTable .badge {
            display: inline-block;
            margin-top: 5px;
        }

        #dashboardHomeTable th:first-child {
            border-top-left-radius: 0px !important;
        }

        #dashboardHomeTable th:last-child {
            border-top-right-radius: 0px !important;
        }

    }

    .btn-details {
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 35px;
        width: 35px;
        margin: 0 auto;
        background-color: #C9E4FF;
        color: #0056b3;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
    }

    .btn-details:hover {
        background-color: #a3caf0;
        color: #0056b3;
        transition: 0.5s;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 35px;
        width: 35px;
        margin: 0 auto;
    }

    .btn-details i {
        font-size: 16px;
        margin: 0;
    }


    td {
        vertical-align: middle;
    }


    .btn-success-custom {
        background-color: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-weight: 500;
    }

    .btn-danger-custom {
        background-color: #dc3545;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-weight: 500;
    }

    .btn-warning-custom {
        background-color: #ffc107;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-weight: 500;
    }

    .btn-info-custom {
        background-color: #17a2b8;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-weight: 500;
    }

    .username-last {
        color: #1A3C40;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .price-last {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .height-custom>div {
        margin: 16px;
    }

    .height-custom-test {
        border-radius: 20px;
        background-color: white;
    }

    .height-custom {
        height: 400px !important;
        overflow: auto !important;
    }

    .height-custom::-webkit-scrollbar {
        width: 4px;
    }

    /* Track */
    .height-custom::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    /* Handle */
    .height-custom::-webkit-scrollbar-thumb {
        background: #0057b34a;
        border-radius: 10px;
    }

    /* Handle on hover */
    .height-custom::-webkit-scrollbar-thumb:hover {
        background: #0056b3;
    }

    .date-last {
        color: rgba(128, 128, 128, 0.49);
    }

    .text-primary-color {
        color: #1126AA;
        font-weight: 600;
    }

    .btn-yellow-custom {
        color: #333;
        background-color: #E7FC9A
    }

    .btn-yellow-custom:hover {
        color: #333;
        background-color: #d3e987;
        transition: 0.5s;
    }

    .bg-title-custom {
        background-color: #c9e4ff !important
    }

    .position-sticky {
        position: sticky;
        top: 10px;
        background-color: white;
        padding-top: 0px;
        margin-top: 0;
    }

    .username-last,
    .date-last,
    .price-last {
        font-size: 14px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #333 !important;
        font-weight: 600;
        background-color: #E7FC9A !important;
    }

    .dataTables_length,
    .dataTables_filter,
    .pagination {
        display: none !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;
        }

        .dt-button {
            display: none !important;
        }
    </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="fa-solid fa-calculator  svg-icon fs-4"></i>
                                </div>
                                <div>
                                    <h1 class="text-primary-color 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-primary-color text-opacity-75 text-decoration-none d-flex align-items-center">
                                                    Finansal Tanımlar </a>
                                            </li>
                                            <li class="text-white-primary-color breadcrumb-item  text-opacity-75 active"
                                                aria-current="page">
                                                Pos Ayarları </li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <!-- Action Button -->
                        <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                            <a href="#" onclick="openModal('addCommissionPosModal', false)" href="javascript:void(0)"
                                class="btn btn-yellow-custom d-inline-flex align-items-center gap-2">
                                <i class="fa fa-plus-circle me-2"></i> Ekle
                            </a>
                        </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="custom-th">ID</th>
                                    <th class="custom-th">POS ID</th>
                                    <th class="custom-th">POS Adı</th>
                                    <th class="custom-th">Durum</th>
                                    <th class="custom-th">POS Bankası</th>
                                    <th class="custom-th">POS Para Birimi</th>
                                    <th class="custom-th">İş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