@extends('layouts.app')

@section('css')
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>

<style>
    .bootstrap-touchspin-up {
        background-color: #00c88b !important;
        border-color: #00c88b !important;
    }

    .bootstrap-touchspin-down {
        background-color: #67666a !important;
        border-color: #67666a !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice,
    .select2-selection__choice__remove {
        background-color: #00c88b !important;
        border: 1px solid #00c88b !important;
        font-family: 'Poppins';
        font-weight: 400;
        font-size: 13px;
        color: #fff !important;
        margin-bottom: 5px;
    }

    .form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before{
        background: #00c88b !important;
        border-width: 0 !important;
        border: solid #00c88b !important;
        border-color: #00c88b !important;
    }
    .form-check-primary.form-check label input[type="checkbox"] + .input-helper:before, .form-check-primary.form-check label input[type="radio"] + .input-helper:before{
        border-color: #00c88b !important;
    }

    .text-align-center{
        text-align: center;
    }

    .green{
        color: #00c88b !important;
    }

    .btn-outline-primary_local {
        color: #00c88b;
        border-color: #00c88b;
    }

    .select2{
        width: 100% !important;
    }

    .premio-selector {
        margin-top: 15px;
        padding: 15px;
        border-bottom: 1px solid #eee;
    }
</style>
@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-wrench menu-icon"></i>
        </span> Administración de rutas </h3>
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>vista general <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    @include('flash::message')

    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-5 mt-5">
            @if($mesAnterior)
                <a href="{{ route('rewards.admin_rutas', ['mesId' => $mesAnterior->id]) }}" class="btn btn-outline-primary_local">
                    <i class="mdi mdi-chevron-left"></i> {{ $mesAnterior->nombre.' '.$mesAnterior->anio }}
                </a>
            @else
                <span class="btn btn-outline-secondary disabled">
                    <i class="mdi mdi-chevron-left"></i> No hay mes anterior
                </span>
            @endif
            
            <h2 class="text-align-center green mb-0">{{ $mesActual->nombre.' '.$mesActual->anio }}</h2>
            
            @if($mesSiguiente)
                <a href="{{ route('rewards.admin_rutas', ['mesId' => $mesSiguiente->id]) }}" class="btn btn-outline-primary_local">
                    {{ $mesSiguiente->nombre.' '.$mesSiguiente->anio }} <i class="mdi mdi-chevron-right"></i>
                </a>
            @else
                <button class="btn btn-success" data-toggle="modal" data-target="#crearMesModal">
                    <i class="mdi mdi-plus"></i> Crear nuevo mes
                </button>
            @endif
        </div>
    </div>

    @foreach($rutas as $ruta)
        <div class="col-4 grid-margin">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title text-align-center text-uppercase">{{ $ruta->nombre }}</h4>
                    
                    <div>
                        <button class="btn btn-sm btn-success" 
                                data-toggle="modal" 
                                data-target="#agregarObjetivoModal"
                                data-ruta-id="{{ $ruta->id }}"
                                data-ruta-nombre="{{ $ruta->nombre }}">
                            <i class="mdi mdi-plus"></i> Nuevo
                        </button>
                        @if($ruta->carrera)
                            <button class="btn btn-sm btn-info" 
                                    data-toggle="modal" 
                                    data-target="#asignarPremioModal"
                                    data-ruta-id="{{ $ruta->id }}"
                                    data-ruta-nombre="{{ $ruta->nombre }}"
                                    data-premio-actual="{{ $ruta->premio_id ?? '' }}">
                                <i class="mdi mdi-gift"></i> Premio
                            </button>
                        @endif
                    </div>
                </div>

                <div class="premio-selector">
                    @if($ruta->carrera)
                            <h4>Premio actual:</h4>
                            @if($ruta->carrera->premio)
                                <div class="d-flex align-items-center">
                                    <img src="{{ asset('img_productos/' . $ruta->carrera->premio->imagen) }}" alt="{{ $ruta->carrera->premio->nombre }}" 
                                        style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;">
                                    <div>
                                        <strong>{{ $ruta->carrera->premio->nombre }}</strong><br>
                                        <small>{{ $ruta->carrera->premio->descripcion }}</small>
                                    </div>
                                </div>
                            @else 
                                <h5> Aún no hay premio asignado </h5>
                            @endif
                    @else
                        <h4> Aún no hay objetivos para esta ruta </h4>
                    @endif
                </div>


                <div class="card-body">
                    
                    @if(count($objetivosOrganizados[$ruta->id]['en_carrera']) > 0 || count($objetivosOrganizados[$ruta->id]['no_en_carrera']) > 0)
                        @if(count($objetivosOrganizados[$ruta->id]['en_carrera']) > 0)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="text-success mb-0">Objetivos en carrera este mes:</h5>
                            </div>
                            <ul class="list-group mb-3">
                                @foreach($objetivosOrganizados[$ruta->id]['en_carrera'] as $objetivo)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ $objetivo->titulo }}
                                        <div>  
                                            <i class="mdi mdi-pen text-info" data-toggle="modal"
                                                data-target="#editarObjetivoModal"
                                                data-id="{{ $objetivo->id }}"
                                                data-titulo="{{ $objetivo->titulo }}"
                                                data-descripcion="{{ $objetivo->descripcion }}"
                                                data-puntos="{{ $objetivo->puntos }}"
                                                data-servicio-id="{{ $objetivo->servicio_id }}"
                                                data-ruta-id="{{ $objetivo->ruta_id }}"
                                                data-ruta-nombre="{{ $objetivo->ruta->nombre }}"></i>

                                            <button class="btn btn-sm text-danger" 
                                                    data-toggle="modal" 
                                                    data-target="#quitarCarreraModal"
                                                    data-objetivo-id="{{ $objetivo->id }}"
                                                    data-ruta="{{$objetivo->ruta->nombre}}">
                                                Quitar
                                            </button>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                        
                        @if(count($objetivosOrganizados[$ruta->id]['no_en_carrera']) > 0)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 class="text-muted mb-0">Otros objetivos:</h5>
                            </div>
                            <ul class="list-group">
                                @foreach($objetivosOrganizados[$ruta->id]['no_en_carrera'] as $objetivo)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ $objetivo->titulo }}

                                        <div>
                                          
                                                <i class="mdi mdi-pen text-info" data-toggle="modal"
                                                    data-target="#editarObjetivoModal"
                                                    data-id="{{ $objetivo->id }}"
                                                    data-titulo="{{ $objetivo->titulo }}"
                                                    data-descripcion="{{ $objetivo->descripcion }}"
                                                    data-puntos="{{ $objetivo->puntos }}"
                                                    data-servicio-id="{{ $objetivo->servicio_id }}"
                                                    data-ruta-id="{{ $objetivo->ruta_id }}"
                                                    data-ruta-nombre="{{ $objetivo->ruta->nombre }}"></i>

                                            <button class="btn btn-sm green" 
                                                    data-toggle="modal" 
                                                    data-target="#agregarACarreraModal"
                                                    data-ruta="{{$objetivo->ruta->nombre}}"
                                                    data-objetivo-id="{{ $objetivo->id }}">
                                                Agregar
                                            </button>
                                        </div>
                                       
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    @else
                        <div class="text-center">
                            <p class="text-muted">No hay objetivos registrados para esta ruta.</p>
                            <button class="btn btn-success" 
                                    data-toggle="modal" 
                                    data-target="#agregarObjetivoModal"
                                    data-ruta-id="{{ $ruta->id }}"
                                    data-ruta-nombre="{{ $ruta->nombre }}">
                                <i class="mdi mdi-plus"></i> Agregar primer objetivo
                            </button>
                        </div>
                    @endif
                </div>                
            </div>
        </div>
    @endforeach
</div>

<!-- Modal para crear nuevo mes -->
<div class="modal fade" id="crearMesModal" tabindex="-1" role="dialog" aria-labelledby="crearMesModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background: #fff;">
            <div class="modal-header" style="background-color: #00c88b;">
                <h5 class="modal-title" id="crearMesModalLabel">Crear nuevo mes</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('meses.store') }}">
                @csrf
                <div class="modal-body">
                    @php
                        $currentMonth = \Carbon\Carbon::now()->month;
                        $currentYear = \Carbon\Carbon::now()->year;
                    @endphp

                    <div class="form-group"> 
                        <label for="mes">Mes</label>
                        <select class="form-control" id="mes" name="mes" required>
                            @php
                                setlocale(LC_TIME, 'es_ES.UTF-8'); 
                            @endphp

                            @foreach(range(1, 12) as $month)
                                @php
                                    $fecha = \Carbon\Carbon::createFromDate(null, $month, 1);
                                    $mesNombre = strftime('%B', $fecha->timestamp);
                                @endphp
                                <option value="{{ $month }}" {{ $month == $currentMonth ? 'selected' : '' }}>
                                    {{ ucfirst($mesNombre) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="anio">Año</label>
                        <input type="number" class="form-control" id="anio" name="anio" 
                            value="{{ $currentYear }}" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary_local">Crear mes</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="agregarACarreraModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                            
    <form method="POST" action="{{ route('carreras.agregar-objetivo') }}">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="background: #fff;">
                <div class="modal-header" style="background-color: #00c88b;">
                    <h5 class="modal-title text-white text-uppercase" id="exampleModalLabel">Añadir objetivo - Ruta <span id="labelRuta"> </span> </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" style="background: #fff;">
                @csrf
                <input type="hidden" name="objetivo_id" id="modalObjetivoId">
                <input type="hidden" name="mes_id" value="{{ $mesActual->id }}">

                    <div class="form-group row">
                        <div class="col-sm-12">
                            <h5 class="modal-title text-align-center">¿Está seguro de añadir este objetivo a la ruta actual de {{$mesActual->nombre}} del {{$mesActual->anio}}?</h5>
                        </div>
                    </div> 
                </div>
                <div class="modal-footer">                                            
                    <button type="submit" class="btn btn-primary_local">Agregar</button>                                    
                    <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>                                            
                </div>
            </div>
        </div>
    </form>
</div>


<div class="modal fade" id="quitarCarreraModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">                            
    <form method="POST" action="{{ route('carreras.quitar-objetivo') }}">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="background: #fff;">
                <div class="modal-header" style="background-color: #00c88b;">
                    <h5 class="modal-title text-white text-uppercase" id="exampleModalLabel">Quitar objetivo - Ruta <span id="labelRuta"> </span> </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" style="background: #fff;">
                @csrf
                <input type="hidden" name="objetivo_id" id="modalQuitarObjetivoId">
                <input type="hidden" name="mes_id" value="{{ $mesActual->id }}">

                    <div class="form-group row">
                        <div class="col-sm-12">
                            <h5 class="modal-title text-align-center">¿Está seguro de quitar este objetivo de la ruta actual de {{$mesActual->nombre}} del {{$mesActual->anio}}?</h5>
                        </div>
                    </div> 
                </div>
                <div class="modal-footer">                                            
                    <button type="submit" class="btn btn-danger">Quitar</button>                                    
                    <button type="button" class="btn btn-secondary btnCancelModal" data-dismiss="modal">cancelar</button>                                            
                </div>
            </div>
        </div>
    </form>
</div>

<div class="modal fade" id="agregarObjetivoModal" tabindex="-1" role="dialog" aria-labelledby="agregarObjetivoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background: #fff;">
            <div class="modal-header" style="background-color: #00c88b;">
                <h5 class="modal-title text-white" id="agregarObjetivoModalLabel">Agregar nuevo objetivo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('objetivos.store') }}">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="ruta_id" id="modalRutaId">
                    <input type="hidden" name="mes_id" value="{{ $mesActual->id }}">
                    
                    <div class="form-group">
                        <label for="titulo">Título del objetivo</label>
                        <input type="text" class="form-control" id="titulo" name="titulo" required>
                    </div>

                     <div class="form-group">
                        <label for="servicio_id">Servicio asignado</label>
                        <select name="servicio_id" id="servicio_id" class="select2">
                            @foreach($servicios as $servicio)
                                <option value="{{$servicio->id}}">{{$servicio->nombre}}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="descripcion">Descripción</label>
                        <textarea class="form-control" id="descripcion" name="descripcion" rows="3"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="puntos">Puntos</label>
                        <input type="number" class="form-control" id="puntos" name="puntos" min="1" value="1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary_local">Guardar objetivo</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="editarObjetivoModal" tabindex="-1" role="dialog" aria-labelledby="editarObjetivoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background: #fff;">
            <form method="POST" action="{{ route('objetivos.update') }}">
                @csrf
                @method('PUT')
                <div class="modal-header" style="background-color: #00c88b;">
                    <h5 class="modal-title text-white" id="editarObjetivoModalLabel">Editar objetivo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="objetivo_id" id="editObjetivoId">
                    <input type="hidden" name="ruta_id" id="editRutaId">
                    <input type="hidden" name="mes_id" value="{{ $mesActual->id }}">

                    <div class="form-group">
                        <label for="editTitulo">Título del objetivo</label>
                        <input type="text" class="form-control" id="editTitulo" name="titulo" required>
                    </div>

                    <div class="form-group">
                        <label for="editServicioId">Servicio asignado</label>
                        <select name="servicio_id" id="editServicioId" class="select2">
                            @foreach($servicios as $servicio)
                                <option value="{{ $servicio->id }}">{{ $servicio->nombre }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="editDescripcion">Descripción</label>
                        <textarea class="form-control" id="editDescripcion" name="descripcion" rows="3"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="editPuntos">Puntos</label>
                        <input type="number" class="form-control" id="editPuntos" name="puntos" min="1" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary_local">Actualizar objetivo</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="asignarPremioModal" tabindex="-1" role="dialog" aria-labelledby="asignarPremioModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background: #fff;">
            <div class="modal-header" style="background-color: #00c88b;">
                <h5 class="modal-title text-white" id="asignarPremioModalLabel">Asignar premio a ruta</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" action="{{ route('rutas.asignar-premio') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="ruta_id" id="premioRutaId">
                    <input type="hidden" name="mes_id" value="{{ $mesActual->id }}">
                    
                    <div class="form-group">
                        <label>Premio para: <span id="nombreRutaPremio"></span></label>
                    </div>
                    
                    <div class="form-group">
                        <label for="premio_id">Seleccionar premio</label>
                        <select class="form-control select2" id="premio_id" name="premio_id" required>
                            <option value="">Seleccione un premio</option>
                            @foreach($premios as $premio)
                                <option value="{{ $premio->id }}">
                                    {{ $premio->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary_local">Asignar premio</button>
                </div>
            </form>
        </div>
    </div>
</div>




@endsection

@section('scripts')
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>

    <script>
        $(document).ready(function() {           

            $('#asignarPremioModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var rutaId = button.data('ruta-id');
                var rutaNombre = button.data('ruta-nombre');
                var premioActual = button.data('premio-actual');
                
                $('#premioRutaId').val(rutaId);
                $('#nombreRutaPremio').text(rutaNombre);
                
                $('#premio-preview').hide();
                
                if(premioActual) {
                    $('#premio_id').val(premioActual).trigger('change');
                } else {
                    $('#premio_id').val('').trigger('change');
                }

                $('.select2').select2();

            });
            
            
            $('#editarObjetivoModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                
                $('#editObjetivoId').val(button.data('id'));
                $('#editRutaId').val(button.data('ruta-id'));
                $('#editTitulo').val(button.data('titulo'));
                $('#editDescripcion').val(button.data('descripcion'));
                $('#editPuntos').val(button.data('puntos'));
                $('#editServicioId').val(button.data('servicio-id')).trigger('change');

                var rutaNombre = button.data('ruta-nombre');
                $('#editarObjetivoModalLabel').text('Editar objetivo - ' + rutaNombre);

                $('.select2').select2();
            });


            $('#agregarACarreraModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var objetivoId = button.data('objetivo-id');
                var rutaNombre = button.data('ruta');
                $('#modalObjetivoId').val(objetivoId);
                $('#labelRuta').text(rutaNombre);
            });

             $('#quitarCarreraModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var objetivoId = button.data('objetivo-id');
                var rutaNombre = button.data('ruta');
                $('#modalQuitarObjetivoId').val(objetivoId);
                $('#labelRuta').text(rutaNombre);
            });

            $('#agregarObjetivoModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var rutaId = button.data('ruta-id');
                var rutaNombre = button.data('ruta-nombre');
                var enCarrera = button.data('en-carrera') || 0;
                
                $('#modalRutaId').val(rutaId);
                $('#modalEnCarrera').val(enCarrera);
                $('#agregarObjetivoModalLabel').text('Agregar nuevo objetivo - ' + rutaNombre);
            
                $('.select2').select2();

            });
        });
    </script>
@endsection