@extends('layouts.dashboard')

@section('css')
    <link href="{{ asset('css/receptores/create.css') }}" rel="stylesheet">
@endsection


@section('content')


    <div class="app-page-title d-xs-none">
        <div class="page-title-wrapper">
            <div class="col-sm-12">
                <div class="page-header float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('cancelacion.index') }}">Cancelados</a></li>
                            <li class="active breadcrumb-item" aria-current="page">Cancelación de factura</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="animated fadeIn" style="font-size: 14px;">
        <!-- Widgets  -->


        <div class="row d-flex justify-content-center">
            <div class="col-lg-3 col-md-6">
                <div class="card">
                    <div class="card-tab" id="card-registro" style="background-color:rgba(0,0,0,.04)"
                        onclick="receptores.Registro(this)">
                        <a style="cursor: pointer;">
                            <div class="stat-widget-five">
                                <div class="stat-icon dib flat-color-1">
                                    <i class="pe-7s-news-paper"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="text-left dib">
                                        <div class="stat-text"><span>Cancelación</span></div>
                                        <div class="stat-heading">Facturas</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

    <div class="col-lg-12">
        @if ($errors->any())
        <div class="alert alert-danger alert-dismissable col-md-8 offset-md-2">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>
                        <strong>{{ $error }}</strong>
                    </li>
                @endforeach
            </ul>
        </div>

    @endif
        <form action="{{route('cancelacion.update',$uuid)}}" method="POST">
            @csrf
            @method('PUT')
                <div class="card">
                    <div class="card-header">Datos de factura</div>
                    <div class="card-body card-block">
                        <div class="row form-group">
                            <div class="col col-md-3"><label for="txt_banco" class=" form-control-label">Folio fiscal del
                                    comprobante
                                </label></div>
                            <div class="col-12 col-md-9"><input type="text" id="txt_banco" name="uuid"
                                    placeholder="Nombre del banco" class="form-control" value="{{ $uuid }}"
                                    readonly>
                            </div>
                        </div>


                        <div class="row form-group">
                            <div class="col col-md-3"><label for="txt_desc_banco" class=" form-control-label">Motivo de
                                    cancelación</label></div>
                            <div class="col-12 col-md-9">
                                <select name="motivo" id="motivo_slt" class="form-control">
                                    <option value="01">1 - Comprobante emitido con errores con relación.</option>
                                    <option value="02">2 - Comprobante emitido con errores sin relación.</option>
                                    <option value="03">3 - No se llevó a cabo la operación.</option>
                                    <option value="04">4 - Operación nominativa relacionada en una factura global.</option>

                                </select>
                            </div>
                        </div>

                        <div class="row form-group 01 box">
                            <div class="col col-md-3"><label for="relacion" class=" form-control-label">Folio relacionado
                                </label></div>
                            <div class="col-12 col-md-9">
                                <input class="form-control input-mask-trigger" name="relacion" data-inputmask="'mask': '[********-****-****-****-************]'" im-insert="true" placeholder="[********-****-****-****-************]">
                                <input type="hidden" name="externo" value=""{{ $externo }}>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-auto mx-auto d-flex justify-content-center mb-2 pb-3">
                    <div class="col-lg-2 col-sm-4 d-flex justify-content-center">
                        <button id="payment-button" type="submit" class="btn btn-lg btn-primary btn-block">
                            <span> Cancelar Comprobante</span>
                        </button>

                    </div>
                    <div class="col-lg-2 col-sm-4 d-flex justify-content-center">
                        <button id="cancel-button" type="button" class="btn btn-lg btn-info btn-block" style="background-color: white;color: #969696;border-color: #969696;" onclick="window.location='{{url('/cfdi')}}'">
                            <span>Regresar</span>
                        </button>
                    </div>
                </div>
            </form>
            </div>


        </div>
    </div>
    <script>
        // jQuery functions to hide and show the div
        $(document).ready(function() {

            $("select").change(function() {
                        var optionValue = $("#motivo_slt").val();
                        if (optionValue=='01') {
                            $(".box").not("." + optionValue).hide();
                            $("." + optionValue).show();
                        } else {
                            $(".box").hide();
                        }
            }).change();
        });
    </script>
@endsection