@extends('layouts.admin')
@section('content')
    <div class="row">
        <h1> Registro de Recetas</h1>
    </div>
    <hr>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Complete los Datos</h3>
                </div>

                <div class="card-body">
                    <!-- -->
                    <form action="{{url('/admin/recetas/create')}}" method="POST">
                        @csrf
                        <!-- Primera fila: Fecha y Número de Receta -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fecha">Fecha</label> <b>*</b>
                                    <input type="date" value="{{ old('fecha', date('Y-m-d')) }}" name="fecha" id="fecha" class="form-control" required>
                                    @error('fecha')
                                    <small style="color: red">{{$message}}</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="numero_receta">Número Receta</label> <b>*</b>
                                    <div class="input-group">
                                        <input type="text" value="{{ old('numero_receta', $numero_receta ?? '') }}" name="numero_receta" id="numero_receta" class="form-control font-weight-bold" readonly>
                                        <div class="input-group-append">
                                            <span class="input-group-text bg-success text-white" title="Numeración Automática"><i class="bi bi-magic"></i></span>
                                        </div>
                                    </div>
                                    @error('numero_receta')
                                    <small style="color: red">{{$message}}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Segunda fila: Paciente y Médico que Receta -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="paciente_id">Paciente</label> <b>*</b>
                                    <select name="paciente_id" id="paciente_id" class="form-control" required>
                                        <option value="">-- Seleccionar Paciente --</option>
                                        @foreach($pacientes as $paciente)
                                            <option value="{{$paciente->id}}" {{ old('paciente_id') == $paciente->id ? 'selected' : '' }}>
                                                {{$paciente->apellidos." ".$paciente->nombres}} - CI: {{$paciente->cedula}}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('paciente_id')
                                    <small style="color: red">{{$message}}</small>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="doctor_id">Médico que Receta</label> <b>*</b>
                                    <select name="doctor_id" id="doctor_id" class="form-control" required>
                                        <option value="">-- Seleccionar Médico Tratante --</option>
                                        @foreach($doctores as $doc)
                                            <option value="{{ $doc->id }}" {{ (old('doctor_id', $doctor_actual->id ?? '') == $doc->id) ? 'selected' : '' }}>
                                                Dr(a). {{ $doc->nombres }} {{ $doc->apellidos }} - {{ $doc->especialidad }} (Lic: {{ $doc->licencia_medica }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('doctor_id')
                                    <small style="color: red">{{$message}}</small>
                                    @enderror
                                </div>
                            </div>
                        </div>


                        <!--  TERCERA fila -->

                        <div class="row">
                            <div class="col-md-12">
                                <!--lado derecho -->
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="">Cedula</label> <b>*</b>
                                            <input type="text"  name="cedula" class="form-control">
                                            @error('cedula')
                                            <small style="color: red">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="">Edad</label> <b>*</b>
                                            <input type="text"  name="edad" class="form-control">
                                            @error('edad')
                                            <small style="color: red">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-2">

                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="">Cedula</label> <b>*</b>
                                            <input type="text"  name="cedula1" class="form-control">
                                            @error('cedula')
                                            <small style="color: red">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-2">

                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label for="">Edad</label> <b>*</b>
                                            <input type="text"  name="edad1" class="form-control">
                                            @error('edad')
                                            <small style="color: red">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>

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

                        <!--  CuArta fila -->
                        <div class="row">
                            <div class="col-md-12">
                                <!--lado derecho -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Alergias</label> <b>*</b>
                                            <input type="text"  name="alergias" class="form-control">
                                            @error('alergias')
                                            <small style="color: red">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Signos de Alarma</label> <b>*</b>
                                            <input type="text"  name="signos_alarma" class="form-control">
                                            @error('signos_alarma')
                                            <small style="color: red">{{$message}}</small>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!--  quinta fila -->

                        <div class="row">
                            <div class="col-md-12">
                                <!--lado derecho -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Diagnostico</label>
                                            <select name="diagnostico" id="diagnostico" class="form-control" style="font-size: 8pt">
                                                <option value="">Seleccione</option>
                                                @foreach($ciescla as $ciecla)
                                                    <option value="{{$ciecla->nombre}}">{{$ciecla->nombre}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <!--  SEXTA fila -->
                        <div class="row">
                            <div class="col-md-12">
                                <!--lado derecho -->
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Prescripcion</label> <b>*</b>
                                            <textarea type="text"  name="prescripcion"  id="editor1" class="form-control"></textarea>
                                            <script type="importmap">
                                                {
                                                "imports":{
                                                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.1/ckeditor5.js",
                                                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.1/"
                                                    }
                                                }
                                            </script>

                                            <script type="module">
                                                import {
                                                    ClassicEditor,
                                                    Essentials,
                                                    Bold,
                                                    Italic,
                                                    Font,
                                                    Paragraph
                                                } from 'ckeditor5';

                                                ClassicEditor
                                                    .create( document.querySelector( '#editor1' ), {
                                                        plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
                                                        toolbar: {
                                                            items:
                                                                [
                                                                    'undo', 'redo', '|', 'bold', 'italic', '|',
                                                                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                                                                ]
                                                        }
                                                    } )
                                                    .then( /* ... */ )
                                                    .catch( /* ... */ );

                                            </script>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Indicaciones</label> <b>*</b>
                                            <textarea type="text"  name="tratamiento"  id="editor" class="form-control"></textarea>
                                            <script type="importmap">
                                                {
                                                "imports":{
                                                    "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.1/ckeditor5.js",
                                                    "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.1/"
                                                    }
                                                }
                                            </script>

                                            <script type="module">
                                                import {
                                                    ClassicEditor,
                                                    Essentials,
                                                    Bold,
                                                    Italic,
                                                    Font,
                                                    Paragraph
                                                } from 'ckeditor5';

                                                ClassicEditor
                                                    .create( document.querySelector( '#editor' ), {
                                                        plugins: [ Essentials, Bold, Italic, Font, Paragraph ],
                                                        toolbar: {
                                                            items:
                                                                [
                                                                    'undo', 'redo', '|', 'bold', 'italic', '|',
                                                                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
                                                                ]
                                                        }
                                                    } )
                                                    .then( /* ... */ )
                                                    .catch( /* ... */ );

                                            </script>

                                        </div>
                                    </div>

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




                        <!-- -->

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group d-flex flex-wrap align-items-center">
                                    <button type="submit" name="accion" value="guardar_imprimir" class="btn btn-success font-weight-bold mr-2 shadow-sm" style="font-size: 1.05rem;">
                                        <i class="bi bi-printer-fill mr-1"></i> Guardar y Registrar (Imprimir A5 Horizontal)
                                    </button>
                                    <button type="submit" name="accion" value="guardar" class="btn btn-primary font-weight-bold mr-2 shadow-sm">
                                        <i class="bi bi-check-circle mr-1"></i> Guardar Registro
                                    </button>
                                    <a href="{{url('admin/recetas')}}" class="btn btn-secondary">
                                        <i class="bi bi-x-circle mr-1"></i> Cancelar
                                    </a>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection