@extends('admin.layout.app')

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

@push('styles')
  <link href="/csstemplate/libs/downloaded/bootstrap.min.css" rel="stylesheet">
  <link href="/csstemplate/libs/downloaded/dataTables.bootstrap5.min.css" rel="stylesheet">
  <style> a{text-decoration: none !important; } </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">Edit Invoice</h5>
      <a href="{{ route('admin.invoice.index') }}" class="btn btn-sm btn-secondary">
        <i class="bx bx-arrow-back"></i> Back
      </a>
    </div>
    <div class="card-body">
      <form method="POST" action="{{ route('admin.invoice.update', $invoice->id) }}">
        @csrf
        @method('PUT')


        <div class="row mb-3">
          <div class="col-md-4">
            <label for="invoice_number" class="form-label">Invoice Number</label>
            <input type="text" name="invoice_number" class="form-control"
              value="{{ old('invoice_number', $invoice->invoice_number) }}" required disabled>
          </div>
        </div> 

        <div class="row mb-3">
          <div class="col-md-3">
            <label for="invoice_type" class="form-label">Invoice Type</label>
            <select id="invoice_type" name="invoice_type" class="form-select" required>
              <option value="">Select Type</option>
              <option value="engineer" {{ $invoice->invoice_type === 'engineer' ? 'selected' : '' }}>Engineer</option>
              <option value="client" {{ $invoice->invoice_type === 'client' ? 'selected' : '' }}>Client</option>
            </select>
          </div>

          <div class="col-md-3">
            <label for="invoice_from" class="form-label">Invoice From</label>
            <select id="invoice_from" name="invoice_from" class="form-select select2" required>
              <option value="">Select</option>
              @foreach ($fromUsers as $user)
                  <option value="{{ $user->id }}" {{ $invoice->invoice_from == $user->id ? 'selected' : '' }}>
                      {{ $user->first_name }} {{ $user->last_name }}
                  </option>
              @endforeach
          </select>
          </div>

          <div class="col-md-3">
            <label for="bank_id" class="form-label">Bank</label>
            <select id="bank_id" name="bank_id" class="form-select select2" required>
              <option value="">Select</option>
              @foreach ($bankDetails as $bank)
                  <option value="{{ $bank->id }}" {{ $invoice->bank_id == $bank->id ? 'selected' : '' }}>
                      {{ $bank->account_identifier }}
                  </option>
              @endforeach
          </select>
          </div>

          <div class="col-md-3">
            <label for="invoice_to" class="form-label">Invoice To</label>
            <select id="invoice_to" name="invoice_to" class="form-select select2" required>
                <option value="">Select</option>
                @foreach ($toUsers as $user)
                    <option value="{{ $user->id }}" {{ $invoice->invoice_to == $user->id ? 'selected' : '' }}>
                        {{ $user->first_name }} {{ $user->last_name }}
                    </option>
                @endforeach
            </select>
          </div>
        </div>

        <div class="mb-3">
          <label for="tickets" class="form-label">Related Tickets</label>
          <select id="ticket_select" name="ticket_ids[]" class="form-select select2" multiple>
            @foreach ($availableTickets as $ticket)
              <option value="{{ $ticket->id }}" {{ in_array($ticket->id, $selectedTicketIds) ? 'selected' : '' }}>
                {{ $ticket->ticket_number }} - {{ $ticket->ticket_title }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="row mb-3">
          <div class="col-md-3">
            <label for="invoice_date" class="form-label">Invoice Date</label>
            <input type="date" name="invoice_date" class="form-control"
              value="{{ old('invoice_date', $invoice->invoice_date->format('Y-m-d')) }}" required>
          </div>

          <div class="col-md-3">
            <label for="due_date" class="form-label">Due Date</label>
            <input type="date" name="due_date" class="form-control"
              value="{{ old('due_date', $invoice->due_date->format('Y-m-d')) }}" required>
          </div>

          <div class="col-md-3">
            <label for="status" class="form-label">Status</label>
            <select name="status" class="form-select" required>
              @foreach(['draft', 'sent', 'paid', 'partially_paid', 'unpaid', 'cancelled'] as $status)
                <option value="{{ $status }}" {{ $invoice->status === $status ? 'selected' : '' }}>
                  {{ ucfirst($status) }}
                </option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3">
            <label for="total_amount" class="form-label">Total Amount (€)</label>
            <input type="number" step="0.01" name="total_amount" class="form-control"
              value="{{ old('total_amount', $invoice->total_amount) }}" required>
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-12">
            <label for="notes" class="form-label">Notes</label>
            <textarea name="notes" class="form-control" rows="3">{{ old('notes', $invoice->notes) }}</textarea>
          </div>
        </div>

        <div class="text-end">
          <button type="submit" class="btn btn-primary">Update Invoice</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();

    $('#invoice_type').on('change', function () {
      const type = $(this).val();
      if (!type) return;

      $.ajax({
        url: `/admin/invoice/type-data/${type}`,
        success: function (data) {
          $('#invoice_from').empty().append('<option value="">Select</option>');
          $('#invoice_to').empty().append('<option value="">Select</option>');

          data.from.forEach(user => {
            $('#invoice_from').append(`<option value="${user.id}">${user.name}</option>`);
          });

          data.to.forEach(user => {
            $('#invoice_to').append(`<option value="${user.id}">${user.name}</option>`);
          });
        }
      });
    });

    // Load bank accounts of selected user
    $(document).on('change', '#invoice_from', function () {
        let userId = $(this).val();

        $('#bank_id').empty().append('<option value="">Select Bank Account</option>');

        if (!userId) return;

        $.ajax({
          url: `/admin/invoice/bank-details/${userId}`,
          method: 'GET',
          success: function (response) {

              $('#bank_id').empty(); // clear old options

              // If no bank accounts exist
              if (response.status === 'no_bank') {
                  $('#bank_id').append('<option value="">No bank accounts found</option>');
                  return;
              }

              // Loop through the bank list
              response.banks.forEach(bank => {
                  const label = bank.is_active == 1
                      ? `${bank.account_identifier} (Active)`
                      : bank.account_identifier;

                  $('#bank_id').append(
                      `<option value="${bank.id}">${label}</option>`
                  );
              });

              $('#bank_id').trigger('change');
          }
      });

    });



    $('#invoice_to').on('change', function () {
      let clientId = $(this).val();

      $.ajax({
        url: '{{ route('admin.invoice.uninvoicedTickets') }}',
        type: 'GET',
        data: {
          invoice_to: clientId
        },
        success: function (tickets) {
          let $ticketSelect = $('#ticket_select');
          $ticketSelect.empty();

          if (tickets.length === 0) {
            $ticketSelect.append('<option>No uninvoiced tickets found</option>');
          } else {
            tickets.forEach(ticket => {
              $ticketSelect.append(`<option value="${ticket.id}">${ticket.ticket_number} - ${ticket.ticket_title}</option>`);
            });
          }

          $ticketSelect.trigger('change');
        }
      });
    });

    $('#ticket_select').on('change', function () {
      const ticketIds = $(this).val();
      const invoiceType = $('#invoice_type').val();
      const invoiceFrom = $('#invoice_from').val();

      if (!ticketIds.length || !invoiceType || !invoiceFrom) return;

      $.ajax({
        url: '{{ route('admin.invoice.calculateAmount') }}',
        method: 'POST',
        data: {
          tickets: ticketIds,
          invoice_type: invoiceType,
          invoice_from: invoiceFrom,
          _token: '{{ csrf_token() }}'
        },
        success: function (res) {
          if (res.total !== undefined) {
            $('input[name="total_amount"]').val(res.total);
          }
        }
      });
    });
  });
</script>
@endpush