@extends('layouts.master')
@section('title') @lang('translation.invoices') @endsection
@section('csrf')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('css')

@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1')@lang('translation.sales') @endslot
@slot('title')@lang('translation.invoicecancel') @endslot
@endcomponent

@if(session('error'))
<div class="row">
    <div class="col-lg-12">
        <div class="alert alert-danger alert-dismissible fade show">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </div>
</div>
@endif

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Cancelar Factura</h5>
            </div>
            <div class="card-body">
                <form role="form" method="post" action="{{ route('invoices.ucancel') }}">
                    @csrf
                    <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                    <input type="hidden" name="emitter_id" value="{{ $invoice->emitter->id }}">
                    <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
                    <div class="row g-3">
                        <label for="nameInput" class="form-label">Emisor</label>                        
                        <input type="text" class="form-control mt-0 bg-dark-subtle border-0" id="nameInput"  value="{{ $invoice->emitter->razon_social }}" readonly>
                        <div class="col-lg-6">
                            <div>
                                <label for="uuidInput" class="form-label">UUID Factura a Cancelar</label>
                                <input 
                                    type="text" 
                                    class="form-control" 
                                    id="uuidInput" 
                                    name="uuid"
                                    required="true"
                                    readonly
                                    value="{{ $invoice->uuid }}">
                            </div>
                        </div><!--end col-->
                        <div class="col-lg-6">
                            <div>
                                <label for="textInputDate1" class="form-label">Fecha Emisión</label>
                                <input 
                                    name="fecha_emision"
                                    type="date" 
                                    class="form-control" 
                                    id="textInputDate1"
                                    required
                                    readonly                                    
                                    value="{{ \Carbon\Carbon::parse($invoice->fecha_emision)->format('Y-m-d') }}">
                            </div>
                        </div><!--end col-->   
                        <div class="col-lg-12">
                            <div>
                                <label for="MotivoInputSelect" class="form-label">Motivo de Cancelación</label>
                                <select
                                    id="MotivoInputSelect"
                                    name="motivo" 
                                    class="form-select mb-3" 
                                    aria-label="MotivoInputSelect"
                                    required="true">
                                    <option selected="">Elige el 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 en la factura global</option>
                                </select>
                            </div>
                        </div><!--end col-->

                        <div class="col-lg-12">
                            <div>
                                <label for="UuidInputSelect" class="form-label">UUID de la Factura B</label>
                                <select
                                    id="UuidInputSelect"
                                    name="uuid_b" 
                                    class="form-select mb-3" 
                                    aria-label="UuidInputSelect"
                                    disabled>
                                    <option selected="">Elige el UUID</option>
                                </select>
                            </div>
                        </div><!--end col-->

                        <div class="col-lg-12">
                            <div class="hstack gap-2 justify-content-end">
                                <a href="{{ route('invoices') }}" class="btn btn-light">Regresar</a>
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </div><!--end col-->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        motivo = document.getElementById("MotivoInputSelect");
        motivo.addEventListener("change", function () {
            var selectedValue = this.value;            
            if (selectedValue === "01") {
                var uuidSelect = document.getElementById("UuidInputSelect");            
                uuidSelect.innerHTML = '<option selected="">Elige el UUID</option>'; // Clear previous options
                uuidSelect.disabled = false;
                @foreach ($invoices as $inv)
                    var option = document.createElement("option");
                    option.value = "{{ $inv->uuid }}";
                    option.text = "{{ $inv->uuid }}";
                    uuidSelect.appendChild(option);
                @endforeach
            } else {
                var uuidSelect = document.getElementById("UuidInputSelect");
                uuidSelect.innerHTML = '<option selected="">Elige el UUID</option>'; // Clear previous options
                uuidSelect.disabled = true;
            }
        });
    });
</script>
@endsection