@extends('layouts.app')
@section('content')
    <div class="card">
        <form action="{{ route('pago.destroy', $complemento->id) }}" method="POST" id="form-factura">
            <div class="card-header d-flex justify-content-between">
                <div class="header-title">
                    <h4 class="card-title">Cancelar Complemento de Pago Folio: {{ $complemento->folio }}</h4>
                </div>
            </div>
            <div class="card-body">
                @csrf
                @method('DELETE')
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <div class="form-in-group">
                                <label for="motivo">Motivo de Cancelación</label>
                            </div>
                            <select name="motivo" id="motivo" onChange="validarMotivo()" class="form-control" required>
                                <option>--Seleccione un motivo--</option>
                                <option value="01">Comprobante emitido con
                                    errores con relación</option>
                                <option value="02">Comprobante emitido con
                                    errores sin relación</option>
                                <option value="03">No se llevó a cabo la
                                    operación</option>
                                <option value="04">Operación nominativa
                                    relacionada con una factura global</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="sustitucion">Sustitución</label>
                            <select name="sustitucion" id="sustitucion" disabled class="form-control">
                                <option>--Seleccione una factura--</option>
                                @foreach ($complementos as $item)
                                    <option value="{{ $item->id }}">{{ $item->folio }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="text-center">
                    <button type="submit" class="btn btn-success" id="btnSubmit">
                        <span class="" role="status" aria-hidden="true" id="spinner"></span>
                        Guardar Factura
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('javascript')
    <script>
        function validarMotivo() {
            var motivo = document.getElementById('motivo');
            var sustitucion = document.getElementById('sustitucion');
            if (motivo.value == "01") {
                sustitucion.setAttribute('required', true);
                sustitucion.removeAttribute('disabled');
            } else {
                sustitucion.setAttribute('required', false);
                sustitucion.setAttribute('disabled', true);
            }
        }
    </script>
    <script>
        $('#form-factura').on('submit', function(e) {
            e.preventDefault();
            var parameters = new FormData(this);
            submit_with_ajax_delay("{{ route('pago.destroy', $complemento->id) }}", 'POST', parameters,
                function(data) {
                    Swal.fire({
                        title: 'Alerta',
                        text: data.message,
                        icon: 'success',
                        timer: 1000,
                        onClose: () => {
                            location.href = "{{ route('pago.index') }}";
                        }
                    });
                });
        });
    </script>
@endpush