@extends('user.layouts.app')

@push('styles')
<style>
  .statement-filter {
    display: flex;
    align-items: end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  .statement-filter-group {
    min-width: 180px;
  }

  .statement-filter-group.box-focus {
    margin-bottom: 0;
  }

  .statement-filter-group.box-focus .form-control {
    width: 100%;
    min-height: 48px;
    padding: 18px 14px 10px;
    border: 1px solid #d7dfd2;
    border-radius: 8px;
  }

  .statement-filter-group.box-focus label {
    color: #002b10;
  }

  .ui-datepicker {
    z-index: 9999 !important;
  }

  .statement-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
@endpush

@section('body_class', 'payment-history')

@section('content')
<section class="banner-slider">
  @foreach($bannerImages as $image)
    <div class="slider-item">
      <img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}">
    </div>
  @endforeach
</section>

<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <!-- <a href="/">Home</a> -->
        <a href="/dashboard">Dashboard</a>
      </li>
      <li>Monthly Invoice</li>
    </ul>
  </div>
</div>

<section class="affiliated-clubs">
  <div class="container">
    <div class="page-title">
      <h4 data-aos="fade-up">Monthly Invoice</h4>
    </div>
  </div>
</section>

<section class="payment-history-outer pt-0">
  <div class="container">
    <form method="GET" action="{{ route('user.monthlyInvoice') }}" class="statement-filter" id="monthlyInvoiceFilterForm">
      <div class="form-row box-focus statement-filter-group">
        <label for="from_date" class="{{ !empty($fromDate) ? 'animate-label' : '' }}">From Date</label>
        <input type="text" id="from_date" name="from_date" class="form-control" value="{{ !empty($fromDate) ? \Carbon\Carbon::parse($fromDate)->format('d-m-Y') : '' }}" placeholder="dd-mm-yyyy" autocomplete="off" inputmode="numeric" maxlength="10">
      </div>
      <div class="form-row box-focus statement-filter-group">
        <label for="to_date" class="{{ !empty($toDate) ? 'animate-label' : '' }}">To Date</label>
        <input type="text" id="to_date" name="to_date" class="form-control" value="{{ !empty($toDate) ? \Carbon\Carbon::parse($toDate)->format('d-m-Y') : '' }}" placeholder="dd-mm-yyyy" autocomplete="off" inputmode="numeric" maxlength="10">
      </div>
      <div class="statement-filter-actions">
        <button type="submit" class="btn btn-primary radius_6">Submit</button>
      </div>
    </form>

    <div class="overflow-auto">
      <table class="payment-table-list">
        <tbody>
          <tr>
            <th class="text-center">SL No.</th>
            <!-- <th class="text-center">Invoice / Statement</th> -->
            <th class="text-center">Date</th>
            <th class="text-center">Reference No.</th>
            <th class="text-center">Amount (₹)</th>
            <th class="text-center">Action</th>
          </tr>
          @if(!empty($error))
            <tr style="text-align: center;">
              <td colspan="5">{{ $error }}</td>
            </tr>
          @elseif(!empty($transactions))
            @foreach($transactions as $transaction)
              @php
                $statementMonth = !empty($transaction['TransDate']) ? \Carbon\Carbon::parse($transaction['TransDate'])->format('m') : null;
                $statementYear = !empty($transaction['TransDate']) ? \Carbon\Carbon::parse($transaction['TransDate'])->format('Y') : null;
                $statementLabel = $statementMonth && $statementYear
                  ? 'Invoice / Statement ' . \Carbon\Carbon::createFromDate((int) $statementYear, (int) $statementMonth, 1)->format('m-Y')
                  : 'Invoice / Statement';
                $invoiceDownloadUrl = $statementYear && $statementMonth
                  ? route('user.invoice.download', ['year' => $statementYear, 'month' => $statementMonth])
                  : null;
              @endphp
              <tr>
                <td>{{ $loop->iteration }}</td>
                {{--  <td class="text-center">
                  @if($invoiceDownloadUrl)
                    <!-- <a href="{{ $invoiceDownloadUrl }}" class="invoice-download-link">{{ $statementLabel }}</a>
                    <a href="{{ $invoiceDownloadUrl }}" class="invoice-download-link" title="Download Invoice / Statement" style="margin-left: 8px; display: inline-flex; align-items: center; color: #002b10;">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.6a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2.6a.5.5 0 0 1 1 0v2.6A1.5 1.5 0 0 1 14.5 14.5h-13A1.5 1.5 0 0 1 0 13v-2.6a.5.5 0 0 1 .5-.5Z"/>
                        <path d="M7.646 10.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 9.293V1.5a.5.5 0 0 0-1 0v7.793L5.354 7.146a.5.5 0 1 0-.708.708l3 3Z"/>
                      </svg>
                    </a> -->
                    <a href="{{ $invoiceDownloadUrl }}" class="invoice-download-link" title="Download Invoice / Statement">
                      {{ $statementLabel }}
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.6a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2.6a.5.5 0 0 1 1 0v2.6A1.5 1.5 0 0 1 14.5 14.5h-13A1.5 1.5 0 0 1 0 13v-2.6a.5.5 0 0 1 .5-.5Z"/>
                        <path d="M7.646 10.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 9.293V1.5a.5.5 0 0 0-1 0v7.793L5.354 7.146a.5.5 0 1 0-.708.708l3 3Z"/>
                      </svg>
                    </a>
                  @else
                    {{ $statementLabel }}
                  @endif
                </td> --}}
                <td class="text-center">{{ !empty($transaction['TransDate']) ? \Carbon\Carbon::parse($transaction['TransDate'])->format('d-m-Y') : 'NA' }}</td>
                <td class="text-center">{{ $transaction['strTransNo'] ?? 'NA' }}</td>
                <td class="text-end">{{ $transaction['dblClosingBal'] ?? '0.00' }}</td>
                <td class="text-center">
                  @if($invoiceDownloadUrl)
                    <!-- <a href="{{ $invoiceDownloadUrl }}" class="invoice-download-link">{{ $statementLabel }}</a>
                    <a href="{{ $invoiceDownloadUrl }}" class="invoice-download-link" title="Download Invoice / Statement" style="margin-left: 8px; display: inline-flex; align-items: center; color: #002b10;">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.6a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2.6a.5.5 0 0 1 1 0v2.6A1.5 1.5 0 0 1 14.5 14.5h-13A1.5 1.5 0 0 1 0 13v-2.6a.5.5 0 0 1 .5-.5Z"/>
                        <path d="M7.646 10.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 9.293V1.5a.5.5 0 0 0-1 0v7.793L5.354 7.146a.5.5 0 1 0-.708.708l3 3Z"/>
                      </svg>
                    </a> -->
                    <a href="{{ $invoiceDownloadUrl }}" class="invoice-download-link" title="Download Invoice / Statement">
                      Download
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.6a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2.6a.5.5 0 0 1 1 0v2.6A1.5 1.5 0 0 1 14.5 14.5h-13A1.5 1.5 0 0 1 0 13v-2.6a.5.5 0 0 1 .5-.5Z"/>
                        <path d="M7.646 10.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 9.293V1.5a.5.5 0 0 0-1 0v7.793L5.354 7.146a.5.5 0 1 0-.708.708l3 3Z"/>
                      </svg>
                    </a>
                  @else
                    {{ $statementLabel }}
                  @endif
                </td>
              </tr>
            @endforeach
          @else
            <tr style="text-align: center;">
              <td colspan="5">No monthly invoice data found.</td>
            </tr>
          @endif
        </tbody>
      </table>
    </div>
  </div>
</section>
@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  $(document).ready(function() {
    const todayDate = new Date();
    todayDate.setHours(0, 0, 0, 0);
    const filterForm = document.getElementById('monthlyInvoiceFilterForm');
    const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab', 'Home', 'End'];

    function syncFloatingLabel(input) {
      const label = document.querySelector("label[for='" + input.id + "']");
      if (!label) return;

      if ((input.value || '').trim() !== '' || document.activeElement === input) {
        label.classList.add('animate-label');
      } else {
        label.classList.remove('animate-label');
      }
    }

    function formatDateInput(value) {
      const digits = (value || '').replace(/\D/g, '').slice(0, 8);

      if (digits.length <= 2) return digits;
      if (digits.length <= 4) return digits.slice(0, 2) + '-' + digits.slice(2);

      return digits.slice(0, 2) + '-' + digits.slice(2, 4) + '-' + digits.slice(4, 8);
    }

    function parseDisplayDate(value) {
      if (!value) return null;

      try {
        return $.datepicker.parseDate('dd-mm-yy', value);
      } catch (error) {
        return null;
      }
    }

    function syncDateLimits() {
      const fromDate = $('#from_date').datepicker('getDate') || parseDisplayDate($('#from_date').val());
      const toDate = $('#to_date').datepicker('getDate') || parseDisplayDate($('#to_date').val());
      const fromMaxDate = toDate && toDate < todayDate ? toDate : todayDate;

      $('#from_date').datepicker('option', 'maxDate', fromMaxDate);
      $('#to_date').datepicker('option', 'minDate', fromDate || null);
      $('#to_date').datepicker('option', 'maxDate', todayDate);
    }

    function bindDateInput(selector) {
      const input = document.querySelector(selector);
      if (!input) return;

      input.value = formatDateInput(input.value);
      syncFloatingLabel(input);

      input.addEventListener('focus', function() {
        syncFloatingLabel(this);
      });

      input.addEventListener('keydown', function(event) {
        if (event.ctrlKey || event.metaKey) return;
        if (allowedControlKeys.includes(event.key)) return;
        if (!/^\d$/.test(event.key)) {
          event.preventDefault();
        }
      });

      input.addEventListener('input', function() {
        const formattedValue = formatDateInput(this.value);
        if (this.value !== formattedValue) {
          this.value = formattedValue;
        }

        const parsedDate = parseDisplayDate(this.value);
        if (parsedDate && this.value.length === 10) {
          $(this).datepicker('setDate', parsedDate);
        } else if (!this.value) {
          $(this).datepicker('setDate', null);
        }

        syncDateLimits();
        syncFloatingLabel(this);
      });

      input.addEventListener('blur', function() {
        syncFloatingLabel(this);
      });
    }

    $('#from_date').datepicker({
      maxDate: todayDate,
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      beforeShow: function(input) {
        syncDateLimits();
        setTimeout(function() {
          $(input).datepicker('widget').css('z-index', 9999);
        }, 0);
      },
      onSelect: function() {
        $("label[for='from_date']").addClass('animate-label');
        syncDateLimits();
      }
    });

    $('#to_date').datepicker({
      maxDate: todayDate,
      dateFormat: 'dd-mm-yy',
      changeMonth: true,
      changeYear: true,
      beforeShow: function(input) {
        syncDateLimits();
        setTimeout(function() {
          $(input).datepicker('widget').css('z-index', 9999);
        }, 0);
      },
      onSelect: function() {
        $("label[for='to_date']").addClass('animate-label');
        syncDateLimits();
      }
    });

    bindDateInput('#from_date');
    bindDateInput('#to_date');
    syncDateLimits();

    filterForm?.addEventListener('submit', function(event) {
      const fromInput = document.getElementById('from_date');
      const toInput = document.getElementById('to_date');
      const fromDisplayValue = fromInput?.value.trim() || '';
      const toDisplayValue = toInput?.value.trim() || '';

      if ((fromDisplayValue && !parseDisplayDate(fromDisplayValue)) || (toDisplayValue && !parseDisplayDate(toDisplayValue))) {
        event.preventDefault();
        Swal.fire({
          icon: 'warning',
          title: 'Invalid date format',
          text: 'Please enter a valid date in DD-MM-YYYY format.',
          confirmButtonColor: '#003815',
        });
        return;
      }
    });

    document.querySelectorAll('.invoice-download-link').forEach(function(link) {
      link.addEventListener('click', async function(event) {
        event.preventDefault();

        const checkUrl = new URL(this.href, window.location.origin);
        checkUrl.searchParams.set('check', '1');

        try {
          const response = await fetch(checkUrl.toString(), {
            headers: {
              'Accept': 'application/json'
            }
          });

          if (response.ok) {
            window.open(this.href, '_blank');
            return;
          }

          const data = await response.json().catch(() => ({}));
          Swal.fire({
            icon: 'warning',
            title: data.title || 'Oops! Invoice/Statement Not Found',
            text: data.message || 'We are currently uploading your invoice/statement. Please try again later or contact the club office for assistance.',
            confirmButtonColor: '#003815',
          });
        } catch (error) {
          Swal.fire({
            icon: 'warning',
            text: 'We are currently uploading your invoice/statement. Please try again later or contact the club office for assistance.',
            confirmButtonColor: '#003815',
          });
        }
      });
    });
  });
</script>
@endpush