@extends('layouts.app')

@section('content')
<div class="card mb-6">
  <h5 class="card-header">{{ __('fields.expenses.title') }}</h5>

  <form class="card-body needs-validation" enctype="multipart/form-data" method="POST" action="{{ route('expenses.store') }}" novalidate>
    @csrf
    <div class="row g-8">

        <input type="hidden" name="type" id="type_hidden">
        <input type="hidden" name="provider_id" id="provider_id_hidden">

        {{-- Archivo (dinámico) --}}
        <div class="col-md-5">
            <label for="file" id="file-label" class="form-label">{{ __('fields.expenses.file_label') }} <span class="text-danger">*</span></label>
            <input type="file" name="file" id="file" class="form-control {{ $errors->has('file') ? 'is-invalid' : '' }}"  accept=".xml,.pdf,.jpg,.jpeg,.png">
            @error('file') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
        </div>

        {{-- Tipo de gasto --}}
      <div class="col-md-3">
        <label for="type" class="form-label">{{ __('fields.expenses.type') }} <span class="text-danger">*</span></label>
        <select name="type" id="type" class="form-select {{ $errors->has('type') ? 'is-invalid' : '' }}">
          <option value="">Selecciona una opción</option>
          <option value="factura" {{ old('type') == 'factura' ? 'selected' : '' }}>{{ __('fields.expenses.type_invoice') }}</option>
          <option value="comprobante" {{ old('type') == 'comprobante' ? 'selected' : '' }}>{{ __('fields.expenses.type_simple') }}</option>
        </select>
        @error('type') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
      </div>

    {{-- Fecha del gasto --}}
      <div class="col-md-4">
        <label for="date" class="form-label">{{ __('fields.expenses.date') }} <span class="text-danger">*</span></label>
        <input type="date" name="date" id="date" class="form-control {{ $errors->has('date') ? 'is-invalid' : '' }}" value="{{ old('date', now()->toDateString()) }}">
        @error('date') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
      </div>

    {{-- Proveedor (solo si hay factura) --}}
      <div class="col-md-6">
        <label for="provider_id" class="form-label">{{ __('fields.expenses.provider') }}</label>
        <select name="provider_id" id="provider_id" class="form-select {{ $errors->has('provider_id') ? 'is-invalid' : '' }}">
          <option value="">{{ __('fields.select_an_option') }}</option>
          @foreach ($providers as $provider)
            <option value="{{ $provider->id }}" data-rfc="{{ $provider->rfc }}">{{ $provider->name }}</option>
        @endforeach
        </select>
        @error('provider_id') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
      </div>     

    <div class="col-md-6">
            <label for="folio" class="form-label">{{ __('fields.expenses.folio') }}</label>
            <input type="text" name="folio" id="folio" class="form-control" placeholder="Ej. F0001">
    </div>
      
    {{-- Ítems del gasto --}}
    <div class="col-12">
    <label class="form-label d-block">{{ __('fields.expenses.items_label') }}</label>
    <div id="items-container">
        <div class="row g-2 mb-2 item-row">
        <div class="col-md-4">
            <input type="text" name="items[0][concept]" class="form-control" placeholder="{{ __('fields.expenses.concept') }}">
        </div>
        <div class="col-md-2">
            <input type="number" name="items[0][quantity]" class="form-control" placeholder="{{ __('fields.expenses.quantity') }}" step="1" min="1">
        </div>
        <div class="col-md-3">
            <input type="number" name="items[0][unit_price]" class="form-control" placeholder="{{ __('fields.expenses.unit_price') }}" step="0.01" min="0">
        </div>
        <div class="col-md-2">
            <input type="number" name="items[0][total]" class="form-control" placeholder="{{ __('fields.expenses.total') }}" step="0.01" min="0">
        </div>
        <div class="col-md-1 text-center">
            <button type="button" class="btn btn-outline-danger waves-effect btn-sm remove-item" disabled>&times;</button>
        </div>
        </div>
    </div>
    <div class="text-end mt-2">
        <button type="button" id="add-item" class="btn btn-outline-info waves-effect">+ {{ __('fields.expenses.add_item') }}</button>
    </div>
    </div>

     <div class="col-md-4">
        <label for="subtotal" class="form-label">{{ __('fields.expenses.subtotal') }}</label>
        <input type="number" step="0.01" name="subtotal" id="subtotal" class="form-control" placeholder="$0.00">
    </div>

    <div class="col-md-4">
        <label for="iva_16" class="form-label">{{ __('fields.expenses.iva') }}</label>
        <input type="number" step="0.01" name="iva_16" id="iva_16" class="form-control" placeholder="$0.00">
    </div>
    <div class="col-md-4">
        <label for="amount" class="form-label">{{ __('fields.expenses.amount') }}</label>
        <input type="number" step="0.01" name="amount" id="amount" class="form-control" placeholder="$0.00">
    </div>      

      {{-- Notas --}}
      <div class="col-12">
        <label for="notes" class="form-label">{{ __('fields.expenses.notes') }}</label>
        <textarea name="notes" id="notes" maxlength="1000" class="form-control @error('notes') is-invalid @enderror" rows="3" placeholder="Descripción del gasto...">{{ old('notes') }}</textarea>
        @error('notes') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
      </div>
    </div>

    <div class="pt-4 text-end">
      <button type="submit" class="btn btn-outline-success waves-effect me-2"> <i class="menu-icon icon-base ti tabler-device-floppy me-1"></i>{{ __('fields.buttons_save') }}</button>
      <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary ">
        <i class="menu-icon icon-base ti tabler-arrow-narrow-left-dashed"></i></i> {{ __('fields.buttons_volver_listado') }}
      </a>

    </div>
  </form>
</div>

@endsection

@push('scripts')
<script src="{{ asset('assets/js/expenses/add-item.js') }}"></script>
<script src="{{ asset('assets/js/expenses/parse-xml.js') }}"></script>
<script src="{{ asset('assets/js/expenses/calc-totals.js') }}"></script>
@endpush