@extends('layouts.profe')




@section('content')

<div class="row jutify-content-around">
    <div class="col-md-5 text-uppercase">
        CUROS: {{$curso->nombre}}
    </div>

    <div class="col-md-5">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#modelId">
            NUEVA OPERACION
        </button>

        <!-- Button trigger modal -->
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#resut">
            VER RESULTADOS
        </button>

        <!-- Modal -->
        <div class="modal fade" id="resut" tabindex="-1" role="dialog" aria-labelledby="VERRESULTADOS" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">VER RESULTADOS</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('profesor.verResultados')}}" method="get">

                            <input type="hidden" name="curso_id" value="{{ $curso->id }}">

                            <div class="form-group">
                                <label for="operacion">Operación:</label>
                                <select class="form-control" id="operacion" name="operacion" required>
                                    <option value="" disabled {{ old('operacion', $operacion->operacion ?? '') == '' ? 'selected' : '' }}>Selecciona una operación</option>
                                    <option value="suma" {{ old('operacion', $operacion->operacion ?? '') == 'suma' ? 'selected' : '' }}>Suma</option>
                                    <option value="resta" {{ old('operacion', $operacion->operacion ?? '') == 'resta' ? 'selected' : '' }}>Resta</option>
                                    <option value="multiplicacion" {{ old('operacion', $operacion->operacion ?? '') == 'multiplicacion' ? 'selected' : '' }}>Multiplicación</option>
                                    <option value="division" {{ old('operacion', $operacion->operacion ?? '') == 'division' ? 'selected' : '' }}>División</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="dificultad">Dificultad:</label>
                                <select class="form-control" id="dificultad" name="dificultad" required>
                                    <option value="" disabled {{ old('dificultad', $operacion->dificultad ?? '') == '' ? 'selected' : '' }}>Selecciona una dificultad</option>
                                    <option value="facil" {{ old('dificultad', $operacion->dificultad ?? '') == 'facil' ? 'selected' : '' }}>Fácil</option>
                                    <option value="medio" {{ old('dificultad', $operacion->dificultad ?? '') == 'medio' ? 'selected' : '' }}>Medio</option>
                                    <option value="dificil" {{ old('dificultad', $operacion->dificultad ?? '') == 'dificil' ? 'selected' : '' }}>Difícil</option>
                                </select>
                            </div>


                            <button type="submit" class="btn btn-primary">BUSCAR</button>

                        </form>
                    </div>

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


        <!-- Modal -->
        <div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">NUEVA OPERACION</h5>
                        <button type="btn btn-danger" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="{{route('profesor.storeOperacion')}}" method="post">
                        @csrf
                        <div class="modal-body">

                            @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            <!-- Campo oculto para curso_id -->
                            <input type="hidden" name="curso_id" value="{{ $curso->id }}">

                            <div class="form-group">
                                <label for="operacion">Operación:</label>
                                <select class="form-control" id="operacion" name="operacion" required>
                                    <option value="" disabled {{ old('operacion', $operacion->operacion ?? '') == '' ? 'selected' : '' }}>Selecciona una operación</option>
                                    <option value="suma" {{ old('operacion', $operacion->operacion ?? '') == 'suma' ? 'selected' : '' }}>Suma</option>
                                    <option value="resta" {{ old('operacion', $operacion->operacion ?? '') == 'resta' ? 'selected' : '' }}>Resta</option>
                                    <option value="multiplicacion" {{ old('operacion', $operacion->operacion ?? '') == 'multiplicacion' ? 'selected' : '' }}>Multiplicación</option>
                                    <option value="division" {{ old('operacion', $operacion->operacion ?? '') == 'division' ? 'selected' : '' }}>División</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="dificultad">Dificultad:</label>
                                <select class="form-control" id="dificultad" name="dificultad" required>
                                    <option value="" disabled {{ old('dificultad', $operacion->dificultad ?? '') == '' ? 'selected' : '' }}>Selecciona una dificultad</option>
                                    <option value="facil" {{ old('dificultad', $operacion->dificultad ?? '') == 'facil' ? 'selected' : '' }}>Fácil</option>
                                    <option value="medio" {{ old('dificultad', $operacion->dificultad ?? '') == 'medio' ? 'selected' : '' }}>Medio</option>
                                    <option value="dificil" {{ old('dificultad', $operacion->dificultad ?? '') == 'dificil' ? 'selected' : '' }}>Difícil</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="descripcion">Descripción:</label>
                                <textarea class="form-control" id="descripcion" name="descipcion" rows="3" required>{{ old('descipcion', $operacion->descipcion ?? '') }}</textarea>
                            </div>

                            <div class="form-group">
                                <label for="valor1">Valor 1:</label>
                                <input type="number" class="form-control" id="valor1" name="valor1" step="0.01" required value="{{ old('valor1', $operacion->valor1 ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="valor2">Valor 2:</label>
                                <input type="number" class="form-control" id="valor2" name="valor2" step="0.01" required value="{{ old('valor2', $operacion->valor2 ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="total">Total:</label>
                                <input type="number" class="form-control" id="total" name="total" step="0.01" readonly value="{{ old('total', $operacion->total ?? '') }}">
                            </div>

                            <div class="form-group">
                                <label for="imagenes">Imágenes:</label>
                                <input type="text" class="form-control-file" id="imagenes" name="imagenes" multiple value="{{ old('imagenes', $operacion->imagenes ?? '') }}">
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" onclick="return confirm('¿Desea Guardar?')">Guardar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="row mt-3">


    <div class="col-md-12">
        @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">SUMA</h4>
                <div class="list-group">
                    @foreach (getOperacionTotipo($curso->id, 'SUMA') as $ope)
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{$ope->valor1}} + {{$ope->valor2}}= {{number_format($ope->total, 0)}}</h5>
                            <small class="text-{{($ope->dificultad == 'facil') ? 'success' : (($ope->dificultad == 'medio') ? 'info' : 'danger')}} text-uppercase" style="    background: #000000; padding: 4%;border-radius: 15px; font-weight: 800;">{{$ope->dificultad}}</small>
                        </div>
                        <p class="mb-1">{{$ope->descipcion}}</p>
                        <img src="{{$ope->imagenes}}" style="width: 10%;" alt="" srcset="">

                        <form action="{{route('profesor.destroyOperacion', $ope->id)}}" class="d-inline" method="post">
                            @csrf
                            @method('DELETE')
                            <button type='submit' class='btn btn-danger btn-sm' onclick="return confirm('Esta Seguro de Eliminar?')"><i class='fa fa-trash' aria-hidden='true'></i> Eliminar</button>
                        </form>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">RESTA</h4>
                <div class="list-group">
                    @foreach (getOperacionTotipo($curso->id, 'RESTA') as $ope)
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{$ope->valor1}} - {{$ope->valor2}}= {{number_format($ope->total, 0)}}</h5>
                            <small class="text-{{($ope->dificultad == 'facil') ? 'success' : (($ope->dificultad == 'medio') ? 'info' : 'danger')}} text-uppercase" style="    background: #000000; padding: 4%;border-radius: 15px; font-weight: 800;">{{$ope->dificultad}}</small>
                        </div>
                        <p class="mb-1">{{$ope->descipcion}}</p>
                        <img src="{{$ope->imagenes}}" style="width: 10%;" alt="" srcset="">

                        <form action="{{route('profesor.destroyOperacion', $ope->id)}}" class="d-inline" method="post">
                            @csrf
                            @method('DELETE')
                            <button type='submit' class='btn btn-danger btn-sm' onclick="return confirm('Esta Seguro de Eliminar?')"><i class='fa fa-trash' aria-hidden='true'></i> Eliminar</button>
                        </form>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">MULTIPLICACION</h4>
                <div class="list-group">
                    @foreach (getOperacionTotipo($curso->id, 'MULTIPLICACION') as $ope)
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{$ope->valor1}} * {{$ope->valor2}}= {{number_format($ope->total, 0)}}</h5>
                            <small class="text-{{($ope->dificultad == 'facil') ? 'success' : (($ope->dificultad == 'medio') ? 'info' : 'danger')}} text-uppercase" style="    background: #000000; padding: 4%;border-radius: 15px; font-weight: 800;">{{$ope->dificultad}}</small>
                        </div>
                        <p class="mb-1">{{$ope->descipcion}}</p>
                        <img src="{{$ope->imagenes}}" style="width: 10%;" alt="" srcset="">

                        <form action="{{route('profesor.destroyOperacion', $ope->id)}}" class="d-inline" method="post">
                            @csrf
                            @method('DELETE')
                            <button type='submit' class='btn btn-danger btn-sm' onclick="return confirm('Esta Seguro de Eliminar?')"><i class='fa fa-trash' aria-hidden='true'></i> Eliminar</button>
                        </form>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title text-uppercase">DIVISION</h4>
                <div class="list-group">
                    @foreach (getOperacionTotipo($curso->id, 'DIVISION') as $ope)
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">{{$ope->valor1}} / {{$ope->valor2}}= {{number_format($ope->total, 0)}}</h5>
                            <small class="text-{{($ope->dificultad == 'facil') ? 'success' : (($ope->dificultad == 'medio') ? 'info' : 'danger')}} text-uppercase" style="    background: #000000; padding: 4%;border-radius: 15px; font-weight: 800;">{{$ope->dificultad}}</small>
                        </div>
                        <p class="mb-1">{{$ope->descipcion}}</p>
                        <img src="{{$ope->imagenes}}" style="width: 10%;" alt="" srcset="">

                        <form action="{{route('profesor.destroyOperacion', $ope->id)}}" class="d-inline" method="post">
                            @csrf
                            @method('DELETE')
                            <button type='submit' class='btn btn-danger btn-sm' onclick="return confirm('Esta Seguro de Eliminar?')"><i class='fa fa-trash' aria-hidden='true'></i> Eliminar</button>
                        </form>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

</div>

@endSection

@section('scripts')
<script>
    document.getElementById("valor1").addEventListener("input", calcularTotal);
    document.getElementById("valor2").addEventListener("input", calcularTotal);

    function calcularTotal() {
        const operacion = document.getElementById("operacion").value;
        const valor1 = parseFloat(document.getElementById("valor1").value) || 0;
        const valor2 = parseFloat(document.getElementById("valor2").value) || 0;
        let total = 0;

        switch (operacion) {
            case "suma":
                total = valor1 + valor2;
                break;
            case "resta":
                total = valor1 - valor2;
                break;
            case "multiplicacion":
                total = valor1 * valor2;
                break;
            case "division":
                total = valor2 !== 0 ? valor1 / valor2 : 0;
                break;
        }
        document.getElementById("total").value = total;
    }
</script>

@endsection