@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 p-0" style="margin: 0 auto; width: 95%;">
      <div class="content-header row">
      </div>
      <div class="content-body">
        <!-- users list start -->
        <section class="app-user-list">
          <div class="row">
            @foreach (range(1, 3) as $index)
              <div class="col-md-4 col-sm-4">
                <div class="card bg-{{ $index == 1 ? 'success' : ($index == 2 ? 'warning' : 'danger') }} text-center">
                  <div class="card-body">
                    <h2 class="fw-bolder text-white">
                      {{ $index == 1 ? $comissionSum : ($index == 2 ? $comission . ' ₾' : $incomePersent) }}</h2>
                    <p class="card-text text-white">
                      {{ $index == 1 ? 'საკომისიო ჩარიცხული თaნხებიდან' : ($index == 2 ? 'საკომისიოების ჯამი' : 'შემოსული თანხის 1%') }}
                    </p>
                  </div>
                </div>
              </div>
            @endforeach
          </div>

          <div class="card">
            <div class="card-header d-flex justify-content-between" style="flex-wrap: nowrap;">
              <div>
                <h2 class="card-title">{{ $utilityBill->block->name }} - ({{ $monthLabel }})</h2>
              </div>
            </div>
            <form class="card-body border-bottom" method="POST" action="{{ route('utility.update', $utilityBill->id) }}"
              enctype="multipart/form-data">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h1 class="card-title text-primary mb-0">{{ $title }}</h1>
                <div class="dropdown" style="min-width: 350px;">
                  <button
                    class="btn btn-outline-primary dropdown-toggle w-100 text-start d-flex align-items-center justify-content-between"
                    type="button" id="blockDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <span><i data-feather="search" class="me-2"></i>კორპუსის ძებნა</span>
                  </button>
                  <div class="dropdown-menu w-100 p-0" aria-labelledby="blockDropdown" style="min-width: 350px;">
                    <div class="p-2 border-bottom">
                      <input type="text" class="form-control" id="block-search-input" autocomplete="off">
                    </div>
                    <div id="block-search-results" class="p-1" style="max-height: 350px; overflow-y: auto;">
                      <div class="text-center p-3 text-muted">
                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                        იტვირთება...
                      </div>
                    </div>
                  </div>
                </div>
                <div class="ms-3">
                  <strong>კორპუსის ბალანსი:</strong> {{ $utilityBill->block->balance }}
                </div>
                @can('utility.update')
                  <button type="submit" class="btn btn-success"><i data-feather="save"></i> შენახვა</button>
                @endcan
              </div>
              @csrf
              @php
                $endOfRange = 2;

                if ($utilityBill->added_third_table) {
                    $endOfRange = 3;
                }

              @endphp
              @foreach (range(1, $endOfRange) as $tableIndex)
                <h4 class="mt-2">ცხრილი {{ $tableIndex }}</h4>
                <div class="card-datatable table-responsive p-1">
                  <table class="dt-column-search table" id="usersTable">
                    <thead class="table-light">
                      <tr>
                        @foreach (range(($tableIndex - 1) * 10 + 1, $tableIndex * 10) as $columnIndex)
                          <th>
                            <input class="form-check-input" type="checkbox" id="remember"
                              name="unpaid_{{ $columnIndex }}" value="{{ $columnIndex }}"
                              @if (in_array($columnIndex, $utilityBill->unpaid)) checked @endif />
                          </th>
                        @endforeach
                      </tr>
                      <tr>
                        @foreach (range(($tableIndex - 1) * 10 + 1, $tableIndex * 10) as $columnIndex)
                          <th><input class="form-control" style="width: 120px;" type="text" placeholder="სახელი"
                              name="bill_{{ $columnIndex }}" value="{{ $utilityBill->{'bill_' . $columnIndex} }}"></th>
                        @endforeach
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        @foreach (range(($tableIndex - 1) * 10 + 1, $tableIndex * 10) as $columnIndex)
                          <td><input class="form-control" style="width: 120px;" type="text" placeholder="თანხა"
                              name="bill_{{ $columnIndex }}_result"
                              value="{{ $utilityBill->{'bill_' . $columnIndex . '_result'} }}"></td>
                        @endforeach
                      </tr>
                      <tr>
                        @foreach (range(($tableIndex - 1) * 10 + 1, $tableIndex * 10) as $columnIndex)
                          <td><input class="form-control" style="width: 120px;" type="text" placeholder="საკომისიო"
                              name="bill_{{ $columnIndex }}_comm"
                              value="{{ $utilityBill->{'bill_' . $columnIndex . '_comm'} }}"></td>
                        @endforeach
                      </tr>
                      <tr>
                        @foreach (range(($tableIndex - 1) * 10 + 1, $tableIndex * 10) as $columnIndex)
                          <td><input class="form-control" style="width: 120px;" type="text" placeholder="კომენტარი"
                              name="bill_{{ $columnIndex }}_comment"
                              value="{{ $utilityBill->{'bill_' . $columnIndex . '_comment'} }}"></td>
                        @endforeach
                      </tr>
                      <tr>
                        @foreach (range(($tableIndex - 1) * 10 + 1, $tableIndex * 10) as $columnIndex)
                          @if (empty($utilityBill->{'bill_' . $columnIndex . '_file'}))
                            <td><input style="width: 120px;" type="file" name="bill_{{ $columnIndex }}_file"
                                value="{{ $utilityBill->{'bill_' . $columnIndex . '_file'} }}"></td>
                          @else
                            <td>
                              @php
                                $lastPartOfPath = substr(
                                    $utilityBill->{'bill_' . $columnIndex . '_file'},
                                    strrpos($utilityBill->{'bill_' . $columnIndex . '_file'}, '/') + 1,
                                );
                              @endphp
                              <p class="bg-light" id="filePreview-{{ $columnIndex }}" data-index="{{ $columnIndex }}"
                                style="width: 120px; position: relative;">
                                <input hidden type="text" name="bill_{{ $columnIndex }}_file"
                                  value="{{ $utilityBill->{'bill_' . $columnIndex . '_file'} }}">
                                <i data-feather="file" style="color: orange;" width="40" height="40"></i>
                                {{ $lastPartOfPath }}
                                <span id="fileDelete-{{ $columnIndex }}" data-index="{{ $columnIndex }}">
                                  <i
                                    data-feather="x"style="width: 20px; height: 20px;color: red; display: inline-block; position: absolute; right: 2; bottom: 2; cursor: pointer"></i>
                                </span>
                            </td>
                          @endif
                        @endforeach
                      </tr>
                    </tbody>
                  </table>
                </div>
              @endforeach
            </form>
          </div>
          <!-- list and filter end -->
        </section>
        <!-- users list ends -->

      </div>
    </div>
  </div>
  <!-- END: Content-->
@endsection

@push('scripts')
  <script>
    $(document).ready(function() {
      $('[id^=fileDelete]').click(function() {
        var index = $(this).data('index');
        var selector = '#filePreview-' + index;
        $('<input type="file" name="bill_' + index + '_file" style="max-width: 200px;">').insertBefore(selector);
        $(selector).remove();
      });

      // Block search dropdown with all blocks
      var allBlocks = [];
      var $input = $('#block-search-input');
      var $results = $('#block-search-results');
      var $dropdown = $('#blockDropdown');

      // Load all blocks when dropdown is opened
      $dropdown.on('show.bs.dropdown', function() {
        if (allBlocks.length === 0) {
          loadAllBlocks();
        }
      });

      function loadAllBlocks() {
        $.ajax({
          url: "{{ route('blocks.search') }}",
          data: {
            q: ''
          },
          dataType: 'json',
          success: function(data) {
            allBlocks = data;
            displayBlocks(allBlocks);
          },
          error: function() {
            $results.html('<div class="p-2 text-danger">შეცდომა კორპუსების ჩატვირთვისას</div>');
          }
        });
      }

      // Search and filter blocks
      $input.on('input', function() {
        var term = $(this).val().toLowerCase();

        if (term === '') {
          displayBlocks(allBlocks);
        } else {
          var filtered = allBlocks.filter(function(block) {
            return block.text.toLowerCase().includes(term);
          });
          displayBlocks(filtered);
        }
      });

      function displayBlocks(blocks) {
        $results.empty();
        if (blocks.length === 0) {
          $results.append('<div class="p-3 text-center text-muted">კორპუსი ვერ მოიძებნა</div>');
        } else {
          blocks.forEach(function(block) {
            $results.append(
              '<a href="{{ url('utility') }}/' + block.id +
              '" class="d-block px-3 py-2 text-dark text-decoration-none block-search-item rounded">' +
              block.text + '</a>'
            );
          });
        }
      }

      // Prevent dropdown from closing when clicking inside
      $('.dropdown-menu').on('click', function(e) {
        e.stopPropagation();
      });

      // Hover effects
      $(document).on('mouseenter', '.block-search-item', function() {
        $(this).css({
          'background-color': '#e7f3ff',
          'transition': 'all 0.15s ease'
        });
      });

      $(document).on('mouseleave', '.block-search-item', function() {
        $(this).css('background-color', '');
      });
    });
  </script>
@endpush