@php
  use App\Enums\PaymentMethod;
  use App\Enums\PaymentStatus;
@endphp

<div>
  <x-dashboard.box class="mb-6">
    <div class="flex space-x-3 justify-between">
      <div class="mb-3 w-[35%]">
        <x-dashboard.form.input id="keywords" wire:model.debounce.800ms="order_filters.keywords" placeholder="{{ __('Type To Search Order') }}"/>
      </div>
      <div class="">
        <a href="{{ route('dashboard.orders.create') }}" target="_blank" class="btn btn-primary shadow-md mr-2">{{ __('New Order') }}</a>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="table table-sm table-hover">
        <thead class="bg-primary text-white">
        <tr>
          <th class="whitespace-nowrap">{{ __('Order ID') }}</th>
          <th class="whitespace-nowrap">{{ __('Customer') }}</th>
          <th class="whitespace-nowrap">{{ __('Email') }}</th>
          <th class="whitespace-nowrap text-right">{{ __('Sub Total') }}</th>
          <th class="whitespace-nowrap text-right">{{ __('Discount') }}</th>
          <th class="whitespace-nowrap text-right">{{ __('Grand Total') }}</th>
          <th class="whitespace-nowrap">{{ __('Action') }}</th>
        </tr>
        </thead>
        <tbody>

        @php($invoice_orders_id = array_column($invoice_items, 'order_id'))

        @forelse ($orders as $order)
          <tr>
            <td class="whitespace-nowrap">{{ $order->id }}</td>
            <td class="whitespace-nowrap">{{ $order->customer->name }}</td>
            <td class="whitespace-nowrap">{{ $order->customer->email }}</td>
            <td class="whitespace-nowrap text-right">{{ $order->formatted_sub_total }}</td>
            <td class="whitespace-nowrap text-right">{{ $order->formatted_discount }}</td>
            <td class="whitespace-nowrap text-right">{{ $order->formatted_grand_total }}</td>
            <td class="whitespace-nowrap w-24">
              @if (in_array($order->id, $invoice_orders_id))
                <button class="flex items-center text-danger" wire:click="removeOrderFromInvoice({{ $order->id }})">
                  <svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                  </svg>
                  {{ __('Remove From Invoice') }}
                </button>
              @else
                <button class="flex items-center text-success" wire:click="addOrderToInvoice({{ $order->id }})">
                  <svg class="mr-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                    <path d="M3 15h6"></path>
                    <path d="M6 12v6"></path>
                  </svg>
                  {{ __('Add To Invoice') }}
                </button>
              @endif
            </td>
          </tr>
        @empty
          <tr>
            <td class="whitespace-nowrap w-full text-center" colspan="100%">No Record Found</td>
          </tr>
        @endforelse
        </tbody>
      </table>
    </div>

    <div class="my-3">
      {{ $orders->links() }}
    </div>

  </x-dashboard.box>

  <x-dashboard.box>
    <form action="{{ $is_update ? route('dashboard.invoices.update', $invoice?->id) : route('dashboard.invoices.store') }}" method="POST">
      @csrf
      @if ($is_update)
        @method('PUT')
      @endif

      <div>
        <div class="grid grid-cols-12 gap-3 mt-2 mb-4">
          <div class="col-span-12 md:col-span-6 lg:col-span-3">
            <x-dashboard.form.input-label for="name">{{ __('Name') }}</x-dashboard.form.input-label>
            <x-dashboard.form.input id="name" name="name" value="{{ $customer?->name }}" placeholder="{{ __('Name') }}" readonly/>
          </div>

          <div class="col-span-12 md:col-span-6 lg:col-span-3">
            <x-dashboard.form.input-label for="email">{{ __('E-mail') }}</x-dashboard.form.input-label>
            <x-dashboard.form.input id="email" name="email" value="{{ $customer?->email }}" placeholder="{{ __('E-mail') }}" readonly/>
          </div>

          <div class="hidden">
            @foreach($inputs['payment_methods'] as $input_payment_method)
              <input type="hidden" name="payment_methods[]" value="{{ $input_payment_method }}">
            @endforeach
          </div>

          <div class="col-span-12 md:col-span-12 lg:col-span-3" wire:ignore>
            <x-dashboard.form.input-label for="payment_methods">{{ __('Supported Payment Methods') }}</x-dashboard.form.input-label>
            <x-dashboard.form.input-select id="payment_methods" wire:model.lazy="inputs.payment_methods" name="payment_methods[]" title="Select Payment Method" multiple>
              @foreach ($payment_methods as $payment_method)
                <option value="{{ $payment_method }}" @selected(in_array($payment_method, $inputs['payment_methods']))>{{ PaymentMethod::tryFrom($payment_method)->name }}</option>
              @endforeach
            </x-dashboard.form.input-select>
            <x-dashboard.form.input-error for="payment_methods"/>
          </div>

          <div class="col-span-12 md:col-span-12 lg:col-span-3" wire:ignore>
            <x-dashboard.form.input-label for="payment_status">{{ __('Payment Status') }}</x-dashboard.form.input-label>
            <x-dashboard.form.input-select id="payment_status" wire:model.lazy="inputs.payment_status" name="payment_status" title="Select Payment Status">
              @foreach ($payment_statuses as $payment_status)
                <option value="{{ $payment_status }}" {{ $payment_status != $inputs['payment_status'] ?: 'selected' }}>{{ PaymentStatus::tryFrom($payment_status)->name() }}</option>
              @endforeach
            </x-dashboard.form.input-select>
            <x-dashboard.form.input-error for="payment_status"/>
          </div>

          <div class="col-span-12 md:col-span-6">
            <x-dashboard.form.input-label for="billing_address">{{ __('Billing Address') }} <small>(Use <code>&lt;br&gt;</code> for line break)</small></x-dashboard.form.input-label>
            <x-dashboard.form.textarea id="billing_address" name="billing_address" rows="2" wire:model.lazy="inputs.billing_address" placeholder="{{ __('Type Billing Address') }}"></x-dashboard.form.textarea>
            <x-dashboard.form.input-error for="billing_address"/>
          </div>

          <div class="col-span-12 md:col-span-6">
            <x-dashboard.form.input-label for="description">{{ __('Description') }}</x-dashboard.form.input-label>
            <x-dashboard.form.textarea id="description" name="description" rows="2" wire:model.lazy="inputs.description" placeholder="{{ __('Enter Description') }}"></x-dashboard.form.textarea>
            <x-dashboard.form.input-error for="description"/>
          </div>
        </div>

        <input type="hidden" name="user_id" value="{{ old('user_id', $customer?->id) }}">

        <div class="overflow-x-auto">
          <table class="table table-sm table-hover">
            <thead>
            <tr>
              <th class="whitespace-nowrap">{{ __('Order ID') }}</th>
              <th class="whitespace-nowrap">{{ __('Billing On') }}</th>
              <th class="whitespace-nowrap">{{ __('Live Link') }}</th>
              <th class="whitespace-nowrap text-right w-40">{{ __('Total') }}</th>
              <th class="whitespace-nowrap w-20">{{ __('Actions') }}</th>
            </tr>
            </thead>
            <tbody>
            @forelse ($invoice_items as $index => $invoice_item)
              <tr>
                <td class="whitespace-nowrap">
                  <x-dashboard.form.input hidden name="orders_id[{{ $invoice_item['order_id'] }}]" wire:model.lazy="invoice_items.{{ $index }}.order_id"/>
                  {{ $invoice_item['order_id'] }}
                </td>
                <td class="whitespace-nowrap">
                  {{ $invoice_item['billing_on'] }}
                </td>
                <td class="whitespace-nowrap">
                  <x-dashboard.form.button type="button" class="btn-primary btn-sm">{{ __('Live Links') }}</x-dashboard.form.button>
                </td>
                <td class="whitespace-nowrap text-right">
                  <x-dashboard.form.input hidden name="orders_total[{{ $invoice_item['order_id'] }}]" wire:model.lazy="invoice_items.{{ $index }}.order_total"/>
                  {{ format_amount($invoice_item['order_total']) }}
                </td>
                <td class="whitespace-nowrap text-center">
                  <x-dashboard.form.button wire:click="removeOrderFromInvoice({{ $invoice_item['order_id'] }})" type="button" class="btn-sm p-1  w-auto btn-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <line x1="18" y1="6" x2="6" y2="18"></line>
                      <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                  </x-dashboard.form.button>
                </td>
              </tr>
            @empty
              <tr>
                <td class="whitespace-nowrap text-center" colspan="100%">Empty</td>
              </tr>
            @endforelse

            <tr>
              <td colspan="3" style="text-align: right; font-weight: bold">{{ __('Sub Total') }}&nbsp;:</td>
              <td>
                <label>
                  <input wire:model.lazy="inputs.sub_total" name="sub_total" type="number" class="form-control form-control-sm text-right" readonly>
                </label>
              </td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3" style="text-align: right; font-weight: bold">{{ __('Discount') }}&nbsp;:</td>
              <td>
                <label>
                  <input wire:model.debounce.500="inputs.discount" name="discount" type="number" class="form-control form-control-sm text-right">
                </label>
              </td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3" style="text-align: right; font-weight: bold">{{ __('Grand Total') }}&nbsp;:</td>
              <td>
                <label>
                  <input wire:model.lazy="inputs.grand_total" name="grand_total" type="number" class="form-control form-control-sm text-right" readonly>
                </label>
              </td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3" style="text-align: right; font-weight: bold">
                <x-dashboard.form.input-label for="send_mail">{{ __('Send Mail') }}</x-dashboard.form.input-label>:
              </td>
              <td>
                <x-dashboard.form.input-switch id="send_mail" name="send_mail" wire:model.lazy="inputs.send_mail" default="0" />
              </td>
              <td></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="text-right mt-5">
        <x-dashboard.form.button-link class="btn-outline-secondary mr-2" href="{{ route('dashboard.invoices.index') }}">{{ __('Cancel') }}</x-dashboard.form.button-link>
        <x-dashboard.form.button class="btn-primary">
          @if ($is_update)
            {{ __('Update') }}
          @else
            {{ __('Save') }}
          @endif
        </x-dashboard.form.button>
      </div>

    </form>
  </x-dashboard.box>
</div>