@extends('layouts.yellow')
@section('content') 
<style>
    :root {
        --azul-primario: #2A4E6D;
        --azul-secundario: #3B6EA5;
        --azul-destacado: #4A90E2;
        --azul-suave: #E3F2FD;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);
        --amarillo-primario: #FFD54F;
        --amarillo-secundario: #FFECB3;
        --naranja-destacado: #FF9800;
        --verde-exito: #4CAF50;
        --rojo-error: #F44336;
        --gris-claro: #F5F7FA;
        --gris-medio: #E1E5E9;
        --gris-oscuro: #6C757D;
        --borde-principal: #D0D7DE;
        --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.05);
        --sombra-media: 0 6px 16px rgba(0, 0, 0, 0.08);
        --sombra-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
        --transicion: all 0.3s ease;
        --fuente-principal: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --rojo-primario: #c30d0d;
        --amarillo-gradiente: linear-gradient(90deg, rgba(255,200,0,0.39) 0%, rgba(255,141,113,0.19) 100%);
    }

    /* Estilos generales de la página */
    .control-history-page {
        font-family: var(--fuente-principal);
        color: #333;
        line-height: 1.5;
        padding: 20px 0;
    }

    /* Estilos para las pestañas principales - Homologado con historias */
    .nav-tabs {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 25px;
    }

    .nav-tabs .nav-item {
        margin-bottom: -1px;
    }

    .nav-tabs .nav-link {
        color: var(--rojo-primario);
        padding: 12px 20px;
        border: 1px solid transparent;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        transition: var(--transicion);
        font-weight: 500;
    }

    .nav-tabs .nav-link:hover {
        color: var(--rojo-primario);
        text-decoration: none;
        border-color: transparent;
    }

    .nav-tabs .nav-link.active {
        color: #000;
        background-color: var(--amarillo-primario);
        background: var(--amarillo-gradiente);
        border-color: #dee2e6 #dee2e6 #fff;
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
    }

    /* Contenido de las pestañas */
    .tab-content {
        min-height: 500px;
        margin-top: 25px;
    }

    /* Estilos para las pestañas secundarias (exámenes físicos) */
    #tabPhysicalExam {
        border-bottom: 1px solid var(--gris-medio);
        margin-bottom: 25px;
        display: flex;
        flex-wrap: wrap;
    }

    #tabPhysicalExam .nav-link {
        color: var(--rojo-primario);
        padding: 10px 20px;
        border: none;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        margin-right: 5px;
        transition: var(--transicion);
    }

    #tabPhysicalExam .nav-link:hover {
        color: var(--rojo-primario);
    }

    #tabPhysicalExam .nav-link.active {
        color: #000;
        background-color: var(--amarillo-primario);
        background: var(--amarillo-gradiente);
        border-color: #dee2e6 #dee2e6 #fff;
    }

    /* Tarjetas de exámenes físicos */
    .exam-card {
        border-radius: 10px;
        box-shadow: var(--sombra-suave);
        transition: var(--transicion);
        border: 1px solid var(--gris-medio);
        margin-bottom: 20px;
    }

    .exam-card:hover {
        box-shadow: var(--sombra-hover);
    }

    .exam-card .card-title {
        color: var(--azul-primario);
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .exam-card .badge {
        background-color: var(--azul-suave) !important;
        color: var(--azul-primario) !important;
        font-size: 0.85rem;
        padding: 5px 10px;
        border-radius: 50px;
        margin-bottom: 15px;
    }

    /* Botones de navegación */
    .action-buttons {
        padding: 20px 0;
        display: flex;
        justify-content: center;
    }

    .btn-control {
        background-color: var(--verde-exito);
        color: white;
        padding: 12px 30px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        transition: var(--transicion);
        min-width: 150px;
    }

    .btn-control:hover {
        background-color: #3d8c40;
        box-shadow: var(--sombra-suave);
    }

    .btn-control:active {
        transform: translateY(1px);
    }

    /* Adaptaciones responsivas */
    @media (max-width: 768px) {
        .nav-tabs .nav-link {
            padding: 10px 15px;
            font-size: 0.9rem;
        }
    }
</style> 

<div class="control-history-page">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <ul class="nav nav-tabs" id="myTabControlHistory" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="form-history-tab" data-toggle="tab" href="#form-history" role="tab" aria-controls="form-history" aria-selected="true">
                            {{__('detail-history.history')}}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="test-tab" data-toggle="tab" href="#test" role="tab" aria-controls="test" aria-selected="false">
                            {{__("backgrounds.Physical_Test")}}
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="file-tab" data-toggle="tab" href="#file" role="tab" aria-controls="file" aria-selected="false">
                            {{__("backgrounds.Files")}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="tab-content" id="myTabControlHistoryContent">
                    <!-- Pestaña de Historia -->
                    <div class="tab-pane fade show active" id="form-history" role="tabpanel" aria-labelledby="form-history-tab">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12">
                                    <form id="ControlHistory" name="ControlHistory" action="{{URL::route('/admin/create-control-history')}}" method="POST" enctype="multipart/form-data">
                                        <x-ControlHistoryForm :model="$model" :history="$history" :sectionTypes="$sectionTypes" :physicalTest="$physicalTest" :configuration="$configuration"></x-ControlHistoryForm>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button id="nextToExamPhysical" class="btn-control" type="button">
                                {{__('create-control-history.next')}}
                            </button>
                        </div>
                    </div>

                    <!-- Pestaña de Examen Físico -->
                    <div class="tab-pane fade" id="test" role="tabpanel" aria-labelledby="test-tab">
                        <div class="container-fluid">
                            <ul class="nav nav-tabs" id="tabPhysicalExam" role="tablist">
                                @foreach($history->getPhyscalExam() as $key => $value)
                                    @if($loop->first)
                                        <li class="nav-item">
                                            <a class="nav-link active" id="physical-exam-{{$key}}-tab" data-toggle="tab" href="#physical-exam-{{$key}}" role="tab" aria-controls="physical-exam-{{$key}}" aria-selected="true">
                                                {{__("com-form-history.".$key)}}
                                            </a>
                                        </li>
                                    @else
                                        <li class="nav-item">
                                            <a class="nav-link" id="physical-exam-{{$key}}-tab" data-toggle="tab" href="#physical-exam-{{$key}}" role="tab" aria-controls="physical-exam-{{$key}}" aria-selected="false">
                                                {{__("com-form-history.".$key)}}
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                            <div class="tab-content" id="tabPhysicalExamContent">
                                @foreach($history->getPhyscalExam() as $key => $value)
                                    @if($loop->first)
                                        <div class="tab-pane fade show active" id="physical-exam-{{$key}}" role="tabpanel" aria-labelledby="physical-exam-{{$key}}-tab">
                                    @else
                                        <div class="tab-pane fade" id="physical-exam-{{$key}}" role="tabpanel" aria-labelledby="physical-exam-{{$key}}-tab">
                                    @endif
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="card exam-card">
                                                            <div class="card-body">
                                                                <h5 class="card-title">
                                                                    {{__("com-form-history.".$key)}}
                                                                    <img class="w-10" src="{{asset('img/notes.png')}}" alt="">
                                                                </h5>
                                                                <div>
                                                                    <span class="badge">{{$value}}</span>
                                                                </div>
                                                                <textarea name="phisycalExams[{{$key}}]" id="{{$key}}" rows="4" class="phisycalExams form-control"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button id="nextToFiles" class="btn-control" type="button">
                                {{__('create-control-history.next')}}
                            </button>
                        </div>
                    </div>

                    <!-- Pestaña de Archivos -->
                    <div class="tab-pane fade" id="file" role="tabpanel" aria-labelledby="file-tab">
                        <x-FilesMultipleUpload></x-filesMultipleUpload>
                        <div class="action-buttons">
                            <button id="btnSubmitControlHistory" class="btn-control" type="button">
                                {{__('create-control-history.btnSubmit')}}
                            </button>
                            @csrf
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('javascript') 
<script src="{{ asset('js/create-control-history.js') }}" defer></script>
@endsection