@extends('layouts.kaiadmin.master')

@section('title', 'Crear Contrato')

@section('content_header')
    <br>
@stop

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title">Crear Contrato de Servicio Nuevo</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('servicio-nuevo.store', ['codigoEncriptado' => $codigoEncriptado]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <!-- Campo oculto para enviar el codigoEncriptado -->
                        <input type="hidden" name="codigoEncriptado" value="{{ $codigoEncriptado }}">
                        
                        <!-- Campos del formulario -->
                        <div class="form-group">
                            <label for="fecha">Seleccionar Fecha</label>
                            <input type="date" class="form-control" id="fecha" name="fecha" required>
                        </div>
                        <div class="form-group">
                            <label for="numero_contrato">Número de Contrato</label>
                            <input type="text" class="form-control" id="numero_contrato" name="numero_contrato" pattern="[0-9-]*" required title="Solo se permiten números y guiones">
                        </div>
                        <div class="form-group">
                            <label for="archivo">Subir archivo PDF</label>
                            <input type="file" class="form-control-file" id="archivo" name="archivo" accept=".pdf" required>
                            <small class="form-text text-muted">Por favor, sube un archivo en formato PDF.</small>
                        </div>
                        <div class="form-group text-center">
                            <button type="submit" class="btn btn-success btn-lg">Guardar</button>
                            <a href="{{ route('servicio-nuevo', ['codigoEncriptado' => $codigoEncriptado]) }}" class="btn btn-secondary btn-lg">Cancelar</a>
                        </div>
                    </form>
                </div>
                
                
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
    <style>
        /* Estilos personalizados */
        .card {
            border-radius: 10px;
        }
        .btn-lg {
            padding: 10px 20px;
            font-size: 1.1rem;
        }
        .form-control-file {
            border-radius: 5px;
        }
    </style>
@stop

@section('js')
    <script>
        document.getElementById('archivo').addEventListener('change', function(event) {
            const fileName = event.target.files[0] ? event.target.files[0].name : '';
            document.getElementById('file-name').textContent = fileName;
            document.getElementById('file-preview').style.display = 'block';
        });

        document.getElementById('remove-file').addEventListener('click', function() {
            document.getElementById('archivo').value = ''; // Limpiar el input de archivo
            document.getElementById('file-name').textContent = '';
            document.getElementById('file-preview').style.display = 'none';
        });
    </script>
@stop