@extends('admin.layout.app')

@section('title', 'Invoice Payment')

@push('styles')
<link href="/csstemplate/libs/downloaded/select2.min.css" rel="stylesheet" />
<style>
  .tickets-table th, .tickets-table td {
    vertical-align: middle;
    text-align: center;
  }
  .tickets-table thead {
    background-color: #f8f9fa;
  }
  .tickets-table tfoot { 
    font-weight: bold;
    background-color: #eef6ff;
  }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">New Invoice Payment</h5>
      <a href="{{ route('admin.invoicepayment.index') }}" class="btn btn-sm btn-secondary">
        <i class="bx bx-arrow-back"></i> Back
      </a>
    </div>
    <div class="card-body">
      @if ($errors->any())
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <form method="POST" action="{{ route('admin.invoicepayment.store') }}">
        @csrf
        {{-- <!-- Invoice Selection -->
        <div class="mb-3">
          <label for="invoice_id" class="form-label">Select Invoice</label>
          <select id="invoice_id" name="invoice_id" class="form-select select2" required>
            <option value="">Select Invoice</option>
            @foreach($invoices as $invoice)
              <option value="{{ $invoice->id }}">
                #{{ $invoice->invoice_number }} - {{ $invoice->client->company ?? '' }} - 
                {{ number_format($invoice->computed_total, 2) }} €
              </option>
            @endforeach
          </select>
        </div> --}}
        <div class="row mb-3">
          <!-- Ticket Selection -->
          <div class="col-md-6">
            <label for="ticket_id" class="form-label">Select Ticket (optional)</label>
            <select id="ticket_id" name="ticket_id" class="form-select select2">
              <option value="">-- All Tickets --</option>
              @foreach($unpaidTickets as $ticket)
                <option value="{{ $ticket->id }}">
                 {{ $ticket->intervention_date->format('Y-m-d') }} - {{ $ticket->ticket_number ?? $ticket->id }} - {{ $ticket->ticket_title }}
                </option>
              @endforeach
            </select>
          </div>

          <!-- Invoice Selection -->
          <div class="col-md-6">
            <label for="invoice_id" class="form-label">Select Invoice</label>
            <select id="invoice_id" name="invoice_id" class="form-select select2" required>
              <option value="">Select Invoice</option>
              @foreach($invoices as $invoice)
                <option value="{{ $invoice->id }}">
                  #{{ $invoice->invoice_number }} - {{ $invoice->client->company ?? '' }} -
                  {{ number_format($invoice->computed_total, 2) }} €
                </option>
              @endforeach
            </select>
          </div>

        <!-- Tickets Section -->
        <div class="mb-3" id="tickets_container" style="display:none;">
          <label class="form-label">Tickets</label>
          <div class="table-responsive">
            <table class="table table-bordered tickets-table">
              <thead>
                <tr>
                  <th><input type="checkbox" id="select_all_tickets"></th>
                  <th>Ticket #</th>
                  <th>Date</th>
                  <th>Title</th>
                  <th>Travel (€)</th>
                  <th>Parking (€)</th>
                  <th>Consumables (€)</th>
                  <th>Work (€)</th>
                  <th>Total (€)</th>
                </tr>
              </thead>
              <tbody id="tickets_list"></tbody>
              <tfoot>
                <tr>
                  <td colspan="8" class="text-end">Selected Total (€)</td>
                  <td>
                    <input type="text" id="amount" name="amount"
                           class="form-control text-center fw-bold" readonly required>
                  </td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-md-3">
            <label for="payment_date" class="form-label">Payment Date</label>
            <input type="date" name="payment_date" id="payment_date"
                    class="form-control" value="{{ old('payment_date') }}" required>
            @error('payment_date') <small class="text-danger">{{ $message }}</small> @enderror
          </div>
          <div class="col-md-3">
            <label for="payment_method" class="form-label">Payment Method</label>
            <select name="payment_method" id="payment_method" class="form-select" required>
                <option value="">Select Method</option>
                <option value="bank_transfer">Bank Transfer</option>
                <option value="cash">Cash</option>
                <option value="check">Check</option>
                <option value="credit_card">Credit Card</option>
            </select>
            @error('payment_method') <small class="text-danger">{{ $message }}</small> @enderror
          </div>

          <div class="col-md-3">
            <label for="payment_status" class="form-label">Payment Status</label>
            <select name="payment_status" id="payment_status" class="form-select" required>
                <option value="">Select Status</option>
                <option value="completed">Completed</option>
                <option value="stuck">Stuck</option>
                <option value="pending">Pending</option>
                <option value="failed">Failed</option>
            </select>
            @error('payment_status') <small class="text-danger">{{ $message }}</small> @enderror
          </div>
          <div class="col-md-3">
            <label for="received_by" class="form-label">Received By</label>
            <select name="received_by" id="received_by" class="form-select" required>
                <option value="">Select User</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                @endforeach
            </select>
            @error('received_by') <small class="text-danger">{{ $message }}</small> @enderror
          </div>
        </div>
        <div class="text-end">
          <button type="submit" class="btn btn-primary">Save Payment</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="/csstemplate/libs/downloaded/select2.min.js"></script>
<script>
 $(document).ready(function() {
//  document.addEventListener("DOMContentLoaded", function () {
  $('.select2').select2();

  $('#ticket_id').on('change', function() {
    const ticketId = $(this).val();
    const $invoiceSelect = $('#invoice_id');
    $invoiceSelect.empty().append('<option value="">Select Invoice</option>');

    if (!ticketId) {
      // restore original invoice list if no ticket selected
      @foreach($invoices as $invoice)
        $invoiceSelect.append(`
          <option value="{{ $invoice->id }}">
            #{{ $invoice->invoice_number }} - {{ $invoice->client->company ?? '' }} - {{ number_format($invoice->computed_total, 2) }} €
          </option>
        `);
      @endforeach
      return;
    }

    let url = "{{ route('admin.invoicepayment.getInvoicesByTicket', ':ticket') }}";
    url = url.replace(':ticket', ticketId);

    $.ajax({
      url: url,
      type: 'GET',
      success: function(invoices) {
        invoices.forEach(invoice => {
          $invoiceSelect.append(`
            <option value="${invoice.id}">
              #${invoice.invoice_number} - ${(invoice.to_user?.company || '')} - ${Number(invoice.computed_total).toFixed(2)} €
            </option>
          `);
        });
      }
    });
  });


  // Load tickets
  $('#invoice_id').on('change', function() {
    const invoiceId = $(this).val();
    if (!invoiceId) {
      $('#tickets_container').hide();
      $('#tickets_list').empty();
      $('#amount').val('');
      return;
    }

    var url = "{{ route('admin.invoicepayment.getInvoiceTickets', ':invoice') }}";
    url = url.replace(':invoice', invoiceId);

    $.ajax({
      url: url,
      type: 'GET',
      success: function(tickets) {
        $('#tickets_container').show();
        const $ticketsList = $('#tickets_list');
        $ticketsList.empty();

        tickets.forEach(ticket => {
          const travel = parseFloat(ticket.travel_cost) || 0;
          const parking = parseFloat(ticket.parking_cost) || 0;
          const consumables = parseFloat(ticket.company_consumables) || 0;
          const work = parseFloat(ticket.work_cost) || 0;
          const total = travel + parking + consumables + work;

          const row = `
            <tr>
              <td><input type="checkbox" class="ticket-checkbox form-check-input"
                         data-amount="${total}" name="ticket_ids[]" value="${ticket.id}"></td>
              <td>${ticket.ticket_number ?? ticket.id}</td>
              <td>${ticket.intervention_date ?? ''}</td>
              <td>${ticket.ticket_title}</td>
              <td>${travel.toFixed(2)}</td>
              <td>${parking.toFixed(2)}</td>
              <td>${consumables.toFixed(2)}</td>
              <td>${work.toFixed(2)}</td>
              <td>${total.toFixed(2)}</td>
            </tr>
          `;
          $ticketsList.append(row);
        });

        updateTotalAmount();
      }
    });
  });

  // Select / Unselect all tickets
  $(document).on('change', '#select_all_tickets', function() {
    $('.ticket-checkbox').prop('checked', $(this).is(':checked'));
    updateTotalAmount();
  });

  // Update total when individual ticket checkbox is changed
  $(document).on('change', '.ticket-checkbox', updateTotalAmount);

  function updateTotalAmount() {
    let total = 0;
    $('.ticket-checkbox:checked').each(function() {
      total += parseFloat($(this).data('amount'));
    });
    $('#amount').val(total.toFixed(2));
  }
});
</script> 
@endpush