@extends('layouts.default')

@push('css')
  <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
@endpush

@push('scripts')
  <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
  <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

  <script>
    $(document).ready(function() {
      // DataTable başlat
      const table = $('#transactionsTable').DataTable({
        data: {!! json_encode($transactions) !!},
        responsive: true,
        searching: true,
        columns: [
          {
            data: 'date',
            type: 'date'
          },
          {
            data: 'operation_type',
            render: function(data) {
              return `<span class="badge bg-${data.class}">${data.label}</span>`;
            }
          },
          {
            data: 'amount',
            render: function(data) {
              return `<span class="fw-bold">${data.formatted}</span>`;
            }
          },
          {
            data: 'transaction_status',
            render: function(data) {
              return `<span class="badge bg-${data.class}">${data.label}</span>`;
            }
          },
          {
            data: null,
            className: 'text-center',
            render: function(data, type, row) {
              return `
                                <button
                                    class="btn btn-sm btn-primary view-transaction"
                                    data-bs-toggle="modal"
                                    data-bs-target="#transaction-detail">
                                    <i class="fas fa-eye me-1"></i> Detay
                                </button>`;
            }
          }
        ],
        language: {
          lengthMenu: "_MENU_ kayıt göster",
          zeroRecords: "Kayıt bulunamadı",
          info: "_TOTAL_ kayıttan _START_ - _END_ arası gösteriliyor",
          infoEmpty: "Kayıt bulunamadı",
          infoFiltered: "(_MAX_ kayıt içerisinden filtrelendi)",
          paginate: {
            first: "İlk",
            last: "Son",
            next: "Sonraki",
            previous: "Önceki"
          }
        },
        order: [[0, 'desc']],
        searchCols: [
          null,
          { search: '' },
          null,
          { search: '' },
          null
        ]
      });

      $.fn.dataTable.ext.search.push(
              function(settings, data, dataIndex) {
                const filterStartDate = startDate ? startDate.startOf('day') : null;
                const filterEndDate = endDate ? endDate.endOf('day') : null;

                if (!filterStartDate || !filterEndDate) return true;

                const rowData = table.row(dataIndex).data();
                const dateStr = rowData.date;
                const date = moment(dateStr, 'DD.MM.YYYY HH:mm');

                return date.isBetween(filterStartDate, filterEndDate, 'day', '[]');
              }
      );

      // Default olarak son 1 haftalık tarih aralığını ayarlayalım
      // Default tarih aralığı
      let startDate = moment().subtract(7, 'days');
      let endDate = moment();

      // DateRangePicker başlat
      $('#reportrange').daterangepicker({
        startDate: startDate,
        endDate: endDate,
        ranges: {
          'Bugün': [moment(), moment()],
          'Dün': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Son 7 Gün': [moment().subtract(6, 'days'), moment()],
          'Son 30 Gün': [moment().subtract(29, 'days'), moment()],
          'Bu Ay': [moment().startOf('month'), moment().endOf('month')],
          'Geçen Ay': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale: {
          format: 'DD/MM/YYYY',
          applyLabel: 'Uygula',
          cancelLabel: 'İptal',
          customRangeLabel: 'Özel Aralık',
          daysOfWeek: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
          monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık']
        }
      }, function(start, end) {
        startDate = start;
        endDate = end;
        table.draw();
      });

      // Radio buton filtreleri
      $('#allFilters input[type="radio"]').on('change', function() {
        const filterType = $(this).attr('id');

        // Custom filtreleme fonksiyonu
        $.fn.dataTable.ext.search = []; // Önceki filtreleri temizle

        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
          const rowData = table.row(dataIndex).data();

          // Tarih filtresi kontrolü
          const dateStr = rowData.date;
          const date = moment(dateStr, 'DD.MM.YYYY HH:mm');
          const dateMatches = date.isBetween(startDate, endDate, 'day', '[]');

          // İşlem tipi kontrolü
          let typeMatches = true;
          switch(filterType) {
            case 'paymentsSend':
              typeMatches = rowData.operation_type.label === 'Giden';
              break;
            case 'paymentsReceived':
              typeMatches = rowData.operation_type.label === 'Gelen';
              break;
            case 'failed':
              typeMatches = rowData.transaction_status.label === 'İşlem Başarısız';
              break;
            case 'complated':
              typeMatches = rowData.transaction_status.label === 'İşlem Başarılı';
              break;
            case 'allTransactions':
            default:
              typeMatches = true;
          }

          return dateMatches && typeMatches;
        });

        table.draw();
      });

      // Sayfa yüklendiğinde default filtreyi uygula
      table.draw();



      // Modal detay işlemlerini yönetecek fonksiyon
      $('#transactionsTable').on('click', '.view-transaction', function(e) {
        e.preventDefault();

        const transaction = table.row($(this).closest('tr')).data();

        if (transaction) {
          const modalContent = `
            <div class="row g-0">
                <div class="col-sm-5 d-flex justify-content-center bg-primary rounded-start py-4">
                    <div class="my-auto text-center">
                        <div class="text-17 text-white my-3"><i class="fas fa-building"></i></div>
                        <h3 class="text-4 text-white fw-400 my-3">${transaction.operation_type?.label || '-'}</h3>
                        <div class="text-8 fw-500 text-white my-4">${transaction.amount?.formatted || '0,00₺'}</div>
                        <p class="text-white">${transaction.date || '-'}</p>
                    </div>
                </div>
                <div class="col-sm-7">
                    <h5 class="text-5 fw-400 m-3">İşlem Detayı
                        <button type="button" class="btn-close text-2 float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                    </h5>
                    <hr>
                    <div class="px-3">
                        <ul class="list-unstyled">
                            <li class="mb-2">İşlem Tutarı <span class="float-end text-3">${transaction.amount?.formatted || '0,00₺'}</span></li>
                            <li class="mb-2">Komisyon <span class="float-end text-3">${transaction.fee || '0,00₺'}</span></li>
                        </ul>
                        <hr class="mb-2">
                        <p class="d-flex align-items-center fw-500 mb-0">Toplam Tutar <span class="text-3 ms-auto">${transaction.total || transaction.amount?.formatted || '0,00₺'}</span></p>
                        <hr class="mb-4 mt-2">
                        <ul class="list-unstyled">
                            <li class="fw-500">Gönderen</li>
                            <li class="text-muted">${transaction.wallets?.from?.name || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">Alıcı</li>
                            <li class="text-muted">${transaction.wallets?.to?.name || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">İşlem ID:</li>
                            <li class="text-muted text-break">${transaction.operation_unique_id || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">Açıklama:</li>
                            <li class="text-muted">${transaction.description || '-'}</li>
                        </ul>
                        <ul class="list-unstyled">
                            <li class="fw-500">Durum:</li>
                            <li class="text-muted">
                                ${transaction.operation_status?.label || '-'}
                                <span class="text-${transaction.operation_status?.class} text-3 ms-1">
                                    <i class="fas ${getStatusIcon(transaction.operation_status?.class)}"></i>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        `;

          $('#transaction-detail .modal-body').html(modalContent);
          $('#transaction-detail').modal('show');
        } else {
          console.error('İşlem detayları bulunamadı');
          $('#transaction-detail .modal-body').html('<div class="p-3">İşlem detayları yüklenirken bir hata oluştu.</div>');
        }
      });

// Durum ikonlarını belirlemek için yardımcı fonksiyon
      function getStatusIcon(status) {
        const icons = {
          'warning': 'fa-ellipsis-h',
          'success': 'fa-check-circle',
          'danger': 'fa-times-circle',
          'primary': 'fa-info-circle'
        };
        return icons[status] || 'fa-question-circle';
      }
    });
  </script>
@endpush

@section('content')
  <div class="container">
    <div class="row">
      <x-sidebar />

      <!-- Middle Panel -->
      <div class="col-lg-9">
        <h2 class="fw-400 mb-3">{{__('İşlemler')}}</h2>

        <!-- Filter -->
        <div class="row">
          <div class="col mb-2">
            <form id="filterTransactions" method="post">
              <div class="row g-3 mb-3">
                <div class="col-sm-6 col-md-5">
                  <div class="position-relative">
                    <input id="reportrange" type="text" name='datetimes' class="form-control" placeholder="Tarih Aralığı">
                    <span class="icon-inside"><i class="fas fa-calendar-alt"></i></span>
                  </div>
                </div>

                <div class="col-auto d-flex align-items-center me-auto form-group" data-bs-toggle="collapse">
                  <a class="btn-link" data-bs-toggle="collapse" href="#allFilters" aria-expanded="false" aria-controls="allFilters">
                    {{__('Filtreler')}}<i class="fas fa-sliders-h text-3 ms-1"></i>
                  </a>
                </div>

                <div class="col-12 collapse" id="allFilters">
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="allTransactions" name="allFilters" checked>
                    <label class="form-check-label" for="allTransactions">{{__('Tüm İşlemler')}}</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="paymentsSend" name="allFilters">
                    <label class="form-check-label" for="paymentsSend">{{__('Giden İşlemler')}}</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="paymentsReceived" name="allFilters">
                    <label class="form-check-label" for="paymentsReceived">{{__('Gelen İşlemler')}}</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="complated" name="allFilters">
                    <label class="form-check-label" for="complated">{{__('Başarılı')}}</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" id="failed" name="allFilters">
                    <label class="form-check-label" for="failed">{{__('Başarısız')}}</label>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>

        <!-- All Transactions -->
        <div class="table-responsive">
          <table id="transactionsTable" class="table table-striped table-bordered" width="100%">
            <thead>
            <tr>
              <th>Tarih</th>
              <th>İşlem Tipi</th>
              <th>Tutar</th>
              <th>Transfer Durumu</th>
              <th>İşlemler</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>

        <!-- Transaction Detail Modal -->
        <div id="transaction-detail" class="modal fade" tabindex="-1" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-body p-0"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- Middle End -->
    </div>
  </div>
@endsection