@extends('layouts.app')

@section('content')
<div class="row invoice-preview">

  <!-- Expense Details -->
  <div class="col-xl-9 col-md-8 col-12 mb-md-0 mb-6 position-relative">
    <div class="card invoice-preview-card p-sm-12 p-6">
      <div class="card-body invoice-preview-header rounded">
        <div class="d-flex justify-content-between flex-xl-row flex-md-column flex-sm-row flex-column align-items-xl-center align-items-md-start align-items-sm-center align-items-start">
          <div class="mb-xl-0 mb-6 text-heading">
            <h5 class="mb-2">{{ __('fields.expenses.show_gastos') }}{{ $expense->folio }}</h5>
            <p class="mb-1"><strong>{{ __('fields.expenses.type') }}:</strong> {{ ucfirst($expense->type) }}</p>
            <p class="mb-1"><strong>{{ __('fields.expenses.date') }}:</strong> {{ \Carbon\Carbon::parse($expense->date)->format('d/m/Y') }}</p>
            <p class="mb-1"><strong>{{ __('fields.expenses.estado') }}:</strong> {{ ucfirst($expense->status) }}</p>
            @if ($expense->provider)
              <p class="mb-0"><strong>{{ __('fields.expenses.proveedor') }}:</strong> {{ $expense->provider->name }}</p>
            @else
              <p class="mb-0"><strong>{{ __('fields.expenses.proveedor') }}:</strong>{{ __('fields.expenses.no_especificado') }}</p>
            @endif
          </div>
          <div>
            <p class="mb-2"><strong>{{ __('fields.expenses.metodo_pago') }}:</strong> {{ $expense->payment_method }}</p>
            <p class="mb-2"><strong>{{ __('fields.expenses.tiene_factura') }}:</strong> {{ $expense->has_invoice ? 'Sí' : 'No' }}</p>
            @if ($expense->path_document)
              <p class="mb-0">
                <strong>{{ __('fields.expenses.documento') }}:</strong> 
                <a href="{{ asset('storage/' . $expense->path_document) }}" target="_blank" class="text-primary">{{ __('fields.expenses.ver_archivo') }}</a>
              </p>
            @endif
            @if ($expense->payment_date)
              <p class="mb-0"><strong>{{ __('fields.expenses.fecha_pago') }}:</strong> {{ \Carbon\Carbon::parse($expense->payment_date)->format('d/m/Y') }}</p>
            @endif
          </div>
        </div>
      </div>

      <div class="card-body px-0">
        <div class="row">
          <div class="col-xl-6 col-md-12 col-12 mb-6">
            <h6>{{ __('fields.expenses.totales') }}:</h6>
            <table>
              <tr>
                <td class="pe-4">{{ __('fields.expenses.subtotal') }}:</td>
                <td class="fw-medium">${{ number_format($expense->subtotal, 2) }}</td>
              </tr>
              <tr>
                <td class="pe-4">{{ __('fields.expenses.iva') }}:</td>
                <td class="fw-medium">${{ number_format($expense->iva_16, 2) }}</td>
              </tr>
              <tr>
                <td class="pe-4">{{ __('fields.expenses.amount') }}:</td>
                <td class="fw-bold text-success">${{ number_format($expense->total, 2) }}</td>
              </tr>
              <tr>
                <td class="pe-4">{{ __('fields.expenses.importe_letra') }}:</td>
                <td>{{ $expense->amount_in_words }}</td>
              </tr>
            </table>
          </div>

          <div class="col-xl-6 col-md-12 col-12">
            <h6>{{ __('fields.expenses.notes') }}:</h6>
              <p>{{ $expense->notes ?? __('fields.expenses.sin_notas_adicionales') }}</p>
          </div>
        </div>
      </div>

      <div class="card-body text-muted small">
        <p class="mb-0">{{ __('fields.expenses.creado_el') }} {{ \Carbon\Carbon::parse($expense->created_at)->format('d/m/Y H:i') }}</p>
        <p class="mb-0">{{ __('fields.expenses.ultima_actualizacion') }} {{ \Carbon\Carbon::parse($expense->updated_at)->format('d/m/Y H:i') }}</p>
      </div>
    </div>
  </div>

  <div class="col-xl-3 col-md-4 col-12 invoice-actions">
      <div class="card">
        <div class="card-body">

          @if (!in_array($expense->status, ['pagado', 'cancelado']))
            <button
              type="button"
              class="btn btn-outline-success d-grid w-100 mb-4"
              data-bs-toggle="modal"
              data-bs-target="#completePaymentModal">
              <span class="d-flex align-items-center justify-content-center text-nowrap">
                <i class="icon-base ti tabler-cash-register icon-xs me-2"></i>{{ __('fields.expenses.button_pagar') }}
              </span>
            </button>
          @endif

          @if (!in_array($expense->status, ['pagado', 'cancelado']))
            <div class="d-flex">
              <button
                id="cancel-expense-btn"
                class="btn btn-outline-danger d-grid w-100 mb-4">
                {{ __('fields.expenses.button_cancelar') }}
              </button>
            </div>
          @endif

          @if ($expense->status === 'pagado')
          <div class="d-flex">
            <a href="{{ route('expenses.receipt', $expense) }}" class="btn btn-outline-youtube waves-effect w-100 mb-4" target="_blank">
             <i class="menu-icon icon-base ti tabler-file-type-pdf"></i> {{ __('fields.expenses.button_descargar') }}
            </a>
            </div>
          @endif
          <div class="d-flex">
             <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary w-100 ">
              <i class="menu-icon icon-base ti tabler-arrow-narrow-left-dashed"></i></i> {{ __('fields.buttons_volver_listado') }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- Modal: Completar Pago de Gasto -->
<div class="modal fade" id="completePaymentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-simple">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

        <div class="text-center mb-4">
          <h4 class="mb-2">{{ __('fields.expenses.titutlo_h4') }}</h4>
        </div>

        <form action="{{ route('expenses.complete_payment', $expense) }}" method="POST">
          @csrf
          @method('PATCH')

          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">{{ __('fields.expenses.a_nombre_de') }}</label>
              <input type="text" name="receiver_name" class="form-control" value="{{ old('receiver_name', $expense->receiver_name) }}" required>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">{{ __('fields.expenses.whatsapp') }}</label>
              <input type="text" name="receiver_whatsapp" class="form-control" value="{{ old('receiver_whatsapp', $expense->receiver_whatsapp) }}">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">{{ __('fields.expenses.correo_electronico') }}</label>
              <input type="email" name="receiver_email" class="form-control" value="{{ old('receiver_email', $expense->receiver_email) }}">
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">💳 {{ __('fields.expenses.metodo_pago') }}</label>
              <select name="payment_method" class="form-select" required>
                <option value="Efectivo" @selected($expense->payment_method === 'Efectivo')>{{ __('fields.expenses.efectivo') }}</option>
                <option value="Transferencia" @selected($expense->payment_method === 'Transferencia')>{{ __('fields.expenses.transferencia') }}</option>
                <option value="Tarjeta" @selected($expense->payment_method === 'Tarjeta')>{{ __('fields.expenses.tarjeta') }}</option>
                <option value="Otro" @selected($expense->payment_method === 'Otro')>{{ __('fields.expenses.otro') }}</option>
              </select>
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">💳 {{ __('fields.expenses.numero_tarjeta') }}</label>
              <input type="text" name="card_number" class="form-control" value="{{ old('card_number', $expense->card_number) }}">
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">🏦 {{ __('fields.expenses.numero_cuenta') }}</label>
              <input type="text" name="account_number" class="form-control" value="{{ old('account_number', $expense->account_number) }}">
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">🔢 {{ __('fields.expenses.cable') }}</label>
              <input type="text" name="clabe" class="form-control" value="{{ old('clabe', $expense->clabe) }}">
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">🏛️ {{ __('fields.expenses.banco') }}</label>
              <input type="text" name="bank" class="form-control" value="{{ old('bank', $expense->bank) }}">
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">📝 {{ __('fields.expenses.estatus') }}</label>
              <select name="status" class="form-select" required>
                <option value="pendiente" @selected($expense->status === 'pendiente')>{{ __('fields.expenses.btn_pendiente') }}</option>
                <option value="pagado" @selected($expense->status === 'pagado')>{{ __('fields.expenses.btn_pagado') }}</option>
                <option value="cancelado" @selected($expense->status === 'cancelado')>{{ __('fields.expenses.btn_cancelado') }}</option>
              </select>
            </div>

            <div class="col-md-6 mb-3">
              <label class="form-label">📅 {{ __('fields.expenses.fecha_pago') }}</label>
              <input type="date" name="payment_date" class="form-control"
                    value="{{ old('payment_date', $expense->payment_date ? \Carbon\Carbon::parse($expense->payment_date)->format('Y-m-d') : '') }}">
            </div>

            <div class="col-md-12 d-flex justify-content-end mt-4">
              <button type="submit" class="btn btn-outline-success me-2">{{ __('fields.buttons_confirmar') }}</button>
              <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">{{ __('fields.buttons_cancelar') }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
  const expenseId = {{ $expense->id }};
</script>
<script src="{{ asset('assets/js/expenses/show.js') }}"></script>
@endpush

@endsection