@extends('voyager::master')

@section('page_title', 'Anular')

@section('head')
    <style>
        .form-group {
            margin-bottom: 0px !important;
        }

        .row>[class*=col-] {
            margin-bottom: 10px !important;
        }

        p {
            margin: 0px !important;
        }

        hr {
            margin: 10px !important;
        }

        .cancel-container {
            width: 60%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
        }

        h3 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .checkbox-container {
            margin-bottom: 20px;
        }

        #cancel-checkbox {
            margin-right: 10px;
        }

        .warning-text {
            font-size: 14px;
            color: #333;
            margin-bottom: 20px;
        }

        .warning-text strong {
            color: #000;
            font-weight: bold;
        }

        .comments-container {
            margin-bottom: 20px;
        }

        .comments-container label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        #comments {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            resize: none;
        }

        .button-container {
            display: flex;
            justify-content: space-between;
        }

        .btn-cancel {
            background-color: #d9534f;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-cancel:hover {
            background-color: #c9302c;
        }

        .btn-confirm {
            background-color: #f0ad4e;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn-confirm:hover {
            background-color: #ec971f;
        }
        
        .btn-confirm:disabled {
            background-color: #ddd;
            cursor: not-allowed;
        }
    </style>
@endsection

@section('page_header')
    <div class="d-flex justify-between items-center">
        <div class="d-flex header-title">
            <img src="{{ voyager_asset('images/iconos/warn.webp') }}" alt="">
            <h1 class="page-title">
                Anular nota de venta: {{$nota->numero_nota}} ({{ $nota->created_at->format('d/m/Y') }})
            </h1>
        </div>
    </div>
@stop

@section('content')
    <div class="page-content container-fluid">
        @include('voyager::alerts')
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered">
                    <div class="panel-body">
                        <div class="mt-5">
                            <div class="card">
                                <div class="card-body">
                                    <div class="cancel-container">
                                        <h3>¿Está seguro que desea anular la nota de venta #{{$nota->numero_nota}}?</h3>
                                        <!-- Inicio del formulario -->
                                        <form action="/nota-venta/{{ $nota->id }}/anular" method="POST">
                                            @csrf
                                            <div class="checkbox-container">
                                                <input type="checkbox" id="cancel-checkbox" name="confirm_cancel" value="1" required>
                                                <label for="cancel-checkbox">Sí, anular la nota de venta.</label>
                                            </div>

                                            <p class="warning-text">
                                                Al seleccionar esta opción y hacer clic en el botón "Anular", la nota de venta
                                                quedará anulada. Recuerde que este proceso <strong>no puede deshacerse.</strong>
                                            </p>

                                            <div class="comments-container">
                                                <label for="comments">Comentarios:</label>
                                                <textarea id="comments" name="obs_anulacion" rows="4" required></textarea>
                                            </div>

                                            <div class="button-container">
                                                <a href="/admin/nota-de-venta/{{$nota->id}}" class="btn-cancel">Cancelar</a>
                                                <button type="submit" class="btn-confirm" id="btn-confirm" disabled>Anular</button>
                                            </div>
                                        </form>
                                        <!-- Fin del formulario -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const cancelCheckbox = document.getElementById('cancel-checkbox');
            const confirmButton = document.getElementById('btn-confirm');

            cancelCheckbox.addEventListener('change', function () {
                confirmButton.disabled = !this.checked;
            });
        });
    </script>
@endsection