@extends('dashboard.layout.layout')

@section('content')
  <!-- BEGIN: Content-->
  <div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row">
      </div>
      <div class="content-body">
        <!-- users list start -->
        <section class="app-user-list">
          <!-- list and filter start -->
          <div class="card">
            <div class="card-header">
              <h4 class="card-title mb-3">{{ $title }}</h4>
              @can('reports.store')
                <button type="button" class="btn btn-success waves-effect mb-3" data-bs-toggle="modal"
                  data-bs-target="#addTransaction">
                  <i data-feather='plus'></i> ტრანზაქციის დამატება
                </button>
              @endcan
            </div>
            <div class="container">
              <form method="GET" action="{{ route('reports.show', 1) }}" class="row ps-2 pe-2">
                <div class="from-group col-md-3 mb-2">
                  <input type="text" name="account_number" value="{{ request('account_number') }}"
                    placeholder="აბონენტის ნომერი" class="form-control">
                </div>
                <div class="from-group col-md-3 mb-2">
                  <select name='user_status' class="form-control">
                    <option value="">აბონენტის სტატუსი</option>
                    <option value="on" {{ request('user_status') == 'active' ? 'selected' : '' }}>ჩართული</option>
                    <option value="off" {{ request('user_status') == 'blocked' ? 'selected' : '' }}>გამორთული</option>
                  </select>
                </div>
                <div class="from-group col-md-3 mb-2">
                  <select name="provider_id" class="form-select select2" data-placeholder="პროვაიდერი">
                    <option value="">პროვაიდერი</option>
                    @foreach ($providers as $provider)
                      <option value="{{ $provider->id }}" {{ request('provider_id') == $provider->id ? 'selected' : '' }}>
                        {{ $provider->name }}
                      </option>
                    @endforeach
                  </select>
                </div>
                <div class="from-group col-md-3 mb-2">
                  <select name="service_id" class="form-select select2" data-placeholder="სერვისი">
                    <option value="">სერვისი</option>
                    @foreach ($services as $service)
                      <option value="{{ $service->id }}" {{ request('service_id') == $service->id ? 'selected' : '' }}>
                        {{ $service->name }}
                      </option>
                    @endforeach
                  </select>
                </div>
                <div class="from-group col-md-3 mb-2">
                  <select name="block_id" class="form-select select2" data-placeholder="კორპუსი">
                    <option value="">კორპუსი</option>
                    @foreach ($blocks as $block)
                      <option value="{{ $block->id }}" {{ request('block_id') == $block->id ? 'selected' : '' }}>
                        {{ $block->name }}
                      </option>
                    @endforeach
                  </select>
                </div>
                <div class="from-group col-md-3 mb-2">
                  <input type="text" name="date_from" class="bg-white form-control flatpickr-basic flatpickr-input"
                    value="{{ request('date_from') }}" placeholder="თარიღი დან" />
                </div>
                <div class="from-group col-md-3 mb-2">
                  <input type="text" name="date_to" class="bg-white form-control flatpickr-basic flatpickr-input"
                    value="{{ request('date_to') }}" placeholder="თარიღი მდე" />
                </div>
                <div class="from-group col-md-3 mb-2">
                  <button class="btn btn-success w-100" type="submit">
                    <i data-feather='search'></i> გაფილტვრა
                  </button>
                </div>
              </form>
            </div>
            <div class="card-body border-bottom">
              <div class="alert alert-info p-1 mb-2">
                ერთი გადახდა შეიძლება დაიყოს რამდენიმე ტიპად (მაგ. ტელეფონი + ძირითადი), ამიტომ ერთი და იგივე ტრანზაქციის ID
                შესაძლოა რამდენიმე სტრიქონად გამოჩნდეს.
              </div>
              <div class="card-datatable table-responsive p-1">
                <table class="dt-column-search table" id="reportsTable">
                  <thead class="table-light">
                    <tr>
                      <th>სახელი, გვარი</th>
                      <th>აბონენტის ნომერი</th>
                      <th>კორპუსი</th>
                      <th>თანხა</th>
                      <th>ბანკი</th>
                      <th>სტატუსი</th>
                      <th>სერვისი</th>
                      <th>ტრანაქციის ID</th>
                      <th>ტრანზაქციის ტიპი</th>
                      <th>კომენტარი</th>
                      <th>თარიღი</th>
                      <th>დრო</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
          <!-- list and filter end -->
        </section>
        <!-- users list ends -->
      </div>
    </div>
  </div>
  <!-- END: Content-->

  @can('reports.store')
    <!-- Add Transaction Modal -->
    <div class="modal fade text-start modal-success" id="addTransaction" tabindex="-1" aria-labelledby="addTransaction"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="POST" action="{{ route('reports.store') }}">
          @csrf
          <div class="modal-header">
            <h5 class="modal-title">ტრანსაქციის დამატება</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row justify-content-between">
              <div class="form-group col-6">
                <label for="account_number">აბონენტის ნომერი</label>
                <input type="text" name="account_number" class="form-control" id="account_number"
                  placeholder="აბონენტის ნომერი" required>
              </div>
              <div class="form-group col-6">
                <label for="amount">თანხა</label>
                <input type="text" name="amount" class="form-control" id="amount" placeholder="თანხა" required>
              </div>
              <div class="form-group col-12 mt-3">
                <label for="datetime">თარიღი (ამ ფორმატით: {{ \Carbon\Carbon::now() }})</label>
                <input type="text" name="datetime" class="form-control" id="datetime"
                  placeholder="{{ \Carbon\Carbon::now() }}">
              </div>
              <div class="form-group col-12 mt-3">
                <label for="comment">კომენტარი</label>
                <input type="text" name="comment" class="form-control" id="comment" placeholder="კომენტარი">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success">დამატება</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Edit Comment Modal -->
    <div class="modal fade text-start modal-success" id="editComment" tabindex="-1" aria-labelledby="editComment"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" id="commentSubmit">
          <div class="modal-header">
            <h5 class="modal-title">კომენტარის რედაქტირება</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row justify-content-between">
              <input type="hidden" name="_token" id="CSRFtoken" value="{{ csrf_token() }}" />
              <input id="transactionId" value="" hidden />
              <div class="form-group col-12">
                <label for="commentInput">კომენტარი</label>
                <textarea name="commentInput" rows="5" class="form-control" id="commentInput" placeholder="კომენტარი"></textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" id="saveComment" class="btn btn-success">შენახვა</button>
          </div>
        </div>
      </div>
    </div>
  @endcan
@endsection

@push('scripts')
  <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
  <script src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script>

  <script>
    // Edit comment functionality
    function editComment(value) {
      $('#commentSubmit').attr('action', '/reports/' + value);
      $.get("/reports/" + value + "/edit", function(data) {
        $('#commentInput').val(data.comment);
        $('#transactionId').val(value);
      });
    }

    // Save comment functionality
    $('#saveComment').click(function(e) {
      e.preventDefault();
      let commentInput = $('#commentInput').val();
      let id = $('#transactionId').val();

      $.ajax({
        url: '/reports/' + id,
        type: 'PUT',
        data: {
          "_token": "{{ csrf_token() }}",
          comment: commentInput
        },
        success: function(res) {
          if (res.success === 1) {
            $('#editComment').modal('hide');

            new Notify({
              title: 'Success',
              text: 'კომენტარი განახლდა',
              status: 'success',
              autoclose: true,
              effect: 'slide',
              type: 2,
              autotimeout: 3500
            });
            $('#reportsTable').DataTable().ajax.reload();
          }
        }
      });
    });

    // Initialize DataTable with grouping
    $(function() {
      let lastTime = null;
      let colorIndex = 0;
      const groupColors = [
        'rgba(200, 230, 201, 0.3)', // Light green
        'rgba(179, 229, 252, 0.3)', // Light blue
        'rgba(255, 224, 178, 0.3)', // Light orange
        'rgba(225, 190, 231, 0.3)', // Light purple
        'rgba(255, 205, 210, 0.3)' // Light red
      ];

      var table = $('#reportsTable').DataTable({
        dom: 'Blfrtip',
        lengthMenu: [
          [25, 50, 75, 100, -1],
          ['25 ჩანაწერი', '50 ჩანაწერი', '75 ჩანაწერი', '100 ჩანაწერი', 'ყველას ჩვენება']
        ],
        buttons: [],
        processing: true,
        searching: false,
        language: {
          url: '/app-assets/data/locales/ka.json'
        },
        serverSide: true,
        ajax: "{{ route('reports.index') }}",
        columns: [{
            data: 'name',
            name: 'name'
          },
          {
            data: 'account',
            name: 'account'
          },
          {
            data: 'block',
            name: 'block'
          },
          {
            data: 'amount',
            name: 'amount'
          },
          {
            data: 'provider',
            name: 'provider'
          },
          {
            data: 'status',
            name: 'status'
          },
          {
            data: 'service',
            name: 'service'
          },
          {
            data: 'tnx_id',
            name: 'tnx_id'
          },
          {
            data: 'tnx_type',
            name: 'tnx_type'
          },
          {
            data: 'comment',
            name: 'comment',
            class: 'text-center'
          },
          {
            data: 'paid_at',
            name: 'paid_at'
          },
          {
            data: 'time',
            name: 'time'
          }
        ],
        order: [
          [11, 'asc'],
          [10, 'asc']
        ], // Sort by time, then date
        rowCallback: function(row, data, index) {
          if (lastTime !== data.time) {
            lastTime = data.time;
            colorIndex = (colorIndex + 1) % groupColors.length;
          }
          $(row).css('background-color', groupColors[colorIndex]);
        },
        drawCallback: function(settings) {
          // Reset grouping variables
          lastTime = null;
          colorIndex = 0;

          // Replace feather icons
          feather.replace();

          // Initialize tooltips
          var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
          var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
          });
        }
      });

      $('.select2').each(function() {
        $(this).select2({
          dropdownParent: $('body')
        });
      });

      // Initialize flatpickr for date inputs
      $('.flatpickr-basic').flatpickr({
        dateFormat: "Y-m-d"
      });
    });
  </script>
@endpush