@php
$color;
if ($filtro_tipo == 'RECIBIDOS') {
    $color = 'bg-danger  text-white';
} elseif ($filtro_tipo == 'ENVIADOS') {
    $color = 'bg-warning text-dark';
} elseif ($filtro_tipo == 'PERSONAL') {
    $color = 'bg-success  text-white';
}
@endphp
<div class="modal-header {{ $color }}">
    <h5 class="modal-title">Detalle Tarea</h5>
    <a href="javascript" onclick="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>

    </a>
</div>
<style>

    /* div.card-body {
        position: relative;
    } */

    .badge_name {
        display: flex;
        right: 0;
    }
</style>
<div class="modal-body" id="modalRegistroAgenda">
    <div class="d-flex justify-content-between">
        <ul class="nav nav-tabs justify-content-between" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#detalle"
                    type="button" role="tab" aria-controls="home" aria-selected="true">Detalles Generales</button>
            </li>
            {{-- <li class="nav-item" role="presentation">
                <button class="nav-link" id="reasignados" data-bs-toggle="tab" data-bs-target="#reasignados-pane"
                    type="button" role="tab" aria-controls="reasignados-pane" aria-selected="false">Reasignados</button>
            </li> --}}
        </ul>
        <div class="nav-item">

        </div>
    </div>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="detalle" role="tabpanel" aria-labelledby="home-tab">
            <form class="" id="form-serie" enctype="multipart/form-data">

                <div class="form-group row mb-3 " id="form-tarea">
                    <label class="col-sm-2 col-form-label">TAREA CREADA POR</label>
                    <div class="col-sm-10 bg-warning" disabled>
                        <p class="form-control-plaintext">{{ $tareas->nombreemisor }}</p>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">ENVIADO A:</label>
                    <div class="col-sm-10" disabled>
                        <p class="form-control-plaintext">{{ $tareas->nombrereceptor }}</p>
                    </div>
                </div>
                <div class="w-75 m-auto" id="tareas_user">
                </div>
                <div class="form-group row mb-2" id="div-titulo">
                    <label class="col-sm-2 col-form-label">TITULO</label>
                    <div class="col-sm-10">
                        {{-- <input class="form-control bg-light" type="text" value="{{ $tareas->titulo }}"
                            id="titulo" disabled> --}}
                        <textarea class="form-control bg-white" id="titulo" cols="30" rows="2" disabled>{{ $tareas->titulo }}</textarea>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label">DESCRIPCION</label>
                    <div class="col-sm-10">
                        <textarea class="form-control " name="" id="descripcion" cols="30" rows="10" descripcion readonly>{{ $tareas->descripcion }}</textarea>
                    </div>

                </div>
                <div class="row g-4 mb-5" id="sub_tareas">
                    @php
                        $cont = 0;
                    @endphp
                    @foreach ($subtareas as $value)
                        @php
                            $task_reassigned = DB::table('tarea_seguimiento_detalle as task_reassigned')
                                ->join('users', 'users.id', 'task_reassigned.emisor')
                                ->where('task_reassigned.id_tareadetalle', $value->id)
                                ->select('users.nombre')
                                ->limit(4)
                                ->get();
                            $tareaForMe = true;
                            
                            if ($value->id_receptor != $usersession->id) {
                                $tareaForMe = false;
                            }
                        @endphp

                        <div class="col-sm-12 col-md-6" idtarea="{{ $value->id }}">
                            <div class="card text-center border">
                                <div class="card-header text-left">
                                    <span class="badge fs-6" estado>{{ $value->estado }}</span>
                                </div>
                                <div class="card-body    p-2">


                                    <textarea class="form-control card-title border-0 p-0 text-dark" id="textarea{{ $value->id }}" disabled
                                        order="" texto="{{ $value->nombre }}" style="text-align:justify">{{ preg_replace(['/\s+/', '/^\s|\s$/'], [' ', ''], $value->nombre) }}</textarea>
                                    {{-- <textarea class="form-control card-title text-left border-0 fs-5 text-dark overflow-hidden" id="textarea{{ $value->id }}" disabled
                                        order="" texto="{{ $value->nombre }}" style="text-align:justify">{{  $value->nombre }}</textarea> --}}


                                    <div class="text-success position-relative">
                                        <hr>
                                    </div>

                                    <div class="row g-3 rounded">
                                        <div class="col-md-4">
                                            <label class="form-label">CONFIRMAR
                                            </label>
                                            <div class="">
                                                <input class="form-check-input fs-5 " type="checkbox"
                                                    codigo="{{ $value->id }}" tipo="confirmar"
                                                    id="confirm{{ $value->id }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">REASIGNAR
                                            </label>
                                            <div class="">
                                                <input class="form-check-input fs-5" type="checkbox"
                                                    codigo="{{ $value->id }}" tipo="reasignar"
                                                    id="reasig{{ $value->id }}">
                                            </div>
                                        </div>

                                        <div class="col-md-4 mb-2">
                                            <label for="validationServerUsername" class="form-label">Avance</label>
                                            <div class="input-group has-validation">
                                                <select id="select{{ $value->id }}" class="form-select"
                                                    codigo="{{ $value->id }}" aria-label="Default select example"
                                                    disabled>
                                                    <option selected value="0">0 %</option>
                                                    <option value="25">25 %</option>
                                                    <option value="50">50 %</option>
                                                    <option value="75">75 %</option>
                                                    <option value="100">100 %</option>
                                                </select>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="progress mt-2">
                                        <div class="progress-bar" role="progressbar"
                                            style="width:{{ $value->avance }}%;" aria-valuenow="25"
                                            aria-valuemin="0" aria-valuemax="100">{{ $value->avance }}%
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer text-muted d-flex justify-content-end">
                                    @foreach ($task_reassigned as $reassigned)
                                        <span class="badge text-white bg-info me-1">{{ $reassigned->nombre }}
                                            <i class="fas fa-long-arrow-alt-right"></i></span>
                                    @endforeach
                                    <span class="badge text-white bg-danger"
                                        nameuser>{{ $value->namereceptor }}</span>


                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="form-group row mb-4">
                    <label class="col-sm-2 col-form-label">FECHA ENTREGA</label>
                    <div class="col-sm-8 d-flex align-items-center">
                        <input class="form-control bg-light" type="date" id="fechafin" name="fechafin"
                            value="{{ $tareas->fecha_fin }}" disabled>
                        <label class="col-sm-2 text-center">HORA</label>
                        <input class="form-control bg-light" type="time" id="hora" name="hora"
                            value="{{ $tareas->hora_fin }}" disabled>
                    </div>
                </div>

                @if ($tareas->is_active == 2)
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">TAREA COMPLETADA</label>
                        <div class="col-sm-10">
                            <p class="form-control">{{ $tareas->fecha_edit }}</p>
                        </div>
                    </div>
                @endif
            </form>

        </div>
        <div class="tab-pane fade" id="reasignados-pane" role="tabpanel" aria-labelledby="profile-tab"
            tabindex="0">

        </div>

    </div>
</div>
<div class="modal-footer">
    @if ($filtro_tipo == 'ENVIADOS' || $filtro_tipo == 'PERSONAL')
        <a href="javascript:;" onclick="editar(this)" class="btn btn-dark" id="btn_edit"><i
                class="fas fa-edit"></i>
            Activar Edición</a>
    @endif
    @if ($filtro_tipo != 'ENVIADOS')
        <a href="javascript:;" onclick="get_tareas()" disabled class=" disabled btn btn-success"
            id="task_confirm"><i class="fa-solid fa-check"></i> Guardar</a>
    
    @endif

</div>

<script>
    var buscador = `<div class="form-group row mb-3" id="row_buscador">
                <label class="col-sm-2 col-form-label">PARA</label>
                            <div class="col-sm-9" id="content-cliente">
                                <div class="row">
                                    <div class="col-sm-10">
                                        <select id="idcliente" class="form-control" iduser="{{ $tareas->receptor }}">
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                            </div>`;

    function reasignar() {
        $('#row_buscador').remove();
        $('#sub_tareas').after(buscador)
        js_select_buscador({{ $tareas->receptor }});
    }

    (get_tareas)();

    function get_tareas() {
        let id_reasignado = $('select#idcliente').val() === undefined ? 0 : $('select#idcliente').val();

        $.ajax({
            url: raiz() + '/admin/registroagenda/get_tareas?idtarea={{ $tareas->id }}',
            type: "GET",
            data: {
                sub_tareas: listar_subtareas('updateByCheckbox'),
                id_reasignado: id_reasignado,
                tarea_owner: '{{ $tareaowner }}',
                data: $('#form-serie').serialize() + "&parameter1=value1&parameter2=value2",
            },

            success: function(respuesta) {

                if (respuesta.resultado == 'ERROR') {
                    tipoAlert = 'error';
                    Swal.fire({
                        type: tipoAlert,
                        html: respuesta.mensaje,
                        showCloseButton: true,
                        showCancelButton: false,
                        focusConfirm: false,
                        confirmButtonText: '<i class="fas fa-print"></i>',

                    });
                }
                respuesta.data.forEach(element => {

                    let my_task = true;
                    element.id_receptor == respuesta.myiduser ? my_task : my_task = false;
                    let id_card = $('#sub_tareas div[idtarea=' + element.id + ']');
                    $(id_card).find('.card-body,textarea').css('background', '#FFFFFF')



                    if (element.estado == 'ACEPTADO' || element.estado == 'R. ACEPTADO') {

                        $(id_card).find('.row,span[estado]').css('background', '#fbe9b4')
                        $(id_card).find('span[estado]').css({
                            'background': '#FFC107',
                            'color': 'black'
                        })
                        $('#sub_tareas input#confirm' + element.id).attr('checked', true);
                        $('#sub_tareas input#confirm' + element.id).attr('disabled', true);

                        if (element.id_receptor == respuesta.myiduser) {
                            $(id_card).find('select').attr('disabled', false);
                        }
                        $(id_card).find('input[tipo=confirmar]').parent().prev('label').remove();
                        $(id_card).find('input[tipo=confirmar]').remove();

                    } else if (element.estado == 'FINALIZADO') {

                        $('#sub_tareas input#confirm' + element.id).attr('checked', true);

                        $('#sub_tareas > div[idtarea=' + element.id + ']').find('input[type=checkbox]').attr('disabled', true);
                        $('#sub_tareas select#select' + element.id).attr('disabled', true);
                        $('#sub_tareas div[idtarea=' + element.id + ']').find('input[type=checkbox]').parent().prev('label').remove();
                        $('#sub_tareas div[idtarea=' + element.id + ']').find('input[type=checkbox]').remove();
                        $('#sub_tareas div[idtarea=' + element.id + ']').find('.progress-bar').addClass('bg-success');
                        $(id_card).find('.row,span[estado]').css({
                            'background': '#52a57a',
                            'color': 'white'
                        })

                    } else {

                        $('#sub_tareas input#confirm' + element.id).prop('checked', false);
                        $('#sub_tareas input#reasig' + element.id).prop('checked', false);
                        $(id_card).find('.row').css('background', '#FFFFFF')
                        $(id_card).find('span[estado]').css({
                            'background': '#0D6EFD',
                            'color': 'white'
                        })

                    }
                    if (!my_task) {
                        notForMe(element.id);
                        if ('{{ $filtro_tipo }}' == 'RECIBIDOS') {
                            id_card.addClass('opacity-50');
                        }
                    }


                    id_card.find('span[nameuser]').text(element.nombre)
                    id_card.find('span[estado]').text(element.estado)
                    id_card.find('select').val(element.avance)
                    $('select#select' + element.id).attr('avance_tarea', element.avance);


                    $(id_card).find('.progress-bar').css('width', element.avance + '%')
                    $(id_card).find('.progress-bar').text(element.avance + '%');
                    if ('{{ $tareas->is_active }}' == 2) {
                        $('#btn_edit').remove();
                        $('.modal-footer > a').remove();
                    }

                    $('.modal-footer a ').removeClass('disabled')
                });
                index();
                //esta condicion comprueba si al reasignar tareas, te quedas sin más tareas. en ese caso,ya que te quedaste sin tareas
                //y no eres el responsable de la TAREA, se cierra el modal y actualiza el Index
                if (respuesta.end == true) {
                    index();
                    removemodal('#mx-modal-cuerpo');
                }

            }
        });


    }


    $('#sub_tareas > div').each(function() {
        let texto = $(this).find('textarea').text();
        let heighScroll = $(this).find('textarea').prop("scrollHeight");
        $(this).find('textarea').attr('scrollHeight', heighScroll)
        let textoNotSpace = texto.replace(/\s+/g, '');
        let copyText = texto.substring(0, 120);
        let seeMore =
            `<a href="javascript:;"   id="btn_more" seemore class="d-block text-right">...ver más</a>`;
        if (textoNotSpace.length > 120) {
            $(this).find('textarea').text(copyText + '...');
            $(this).find('textarea').after(seeMore);
        }
    });

    $('a[seemore]').delegate($(this), 'click', function() {
        let textarea = $(this).prev();
        let heighScroll = textarea.attr('scrollheight');
        let texto = textarea.attr('texto');
        let textoNotSpace = texto.replace(/\s+/g, '');
        let copyText = texto.substring(0, 120)
        let id = textarea.attr('id');
        if ($(this).attr('id') == 'btn_more') {
            textarea.val(texto)
            textarea.css('height', heighScroll);
            $(this).attr('id', 'btn_less')
            $(this).text('..ver menos')
        } else {
            textarea.val(copyText + '...')
            textarea.css('height', 'auto');
            $(this).attr('id', 'btn_more')
            $(this).text('..ver más')

        }
    })


    function notForMe(id) {
        $('input#confirm' + id + '[tipo=confirmar]').attr('disabled', true)
        $('input#reasig' + id + '[tipo=reasignar]').attr('disabled', true)
        $('select#select' + id).attr('disabled', true)

        $('#sub_tareas div[idtarea=' + id + ']').find('input[type=checkbox]').parent().prev('label').remove();
        $('#sub_tareas div[idtarea=' + id + ']').find('input[type=checkbox]').remove();
    }

    function update_send() {
        var desc = CKEDITOR.instances.descripcion.getData();

        callback({
                route: '{{ route('registroagendaupdate', ['id' => $id]) }}',
                method: 'PUT',
                data: forminput({
                    form: '#form-serie',
                    data: {
                        view: 'editar',
                        task_owner: '{{ $tareas->id_emisor }}',
                        sub_tareas: listar_subtareas('edit'),
                        detalle_tarea: desc,
                        delete: eliminados,
                        filtro_tipo: '{{ $filtro_tipo }}'
                    }
                }),
                carga: '#mx-modal-carga'
            },
            function(resultado) {
                index();
                removemodal('#mx-modal-carga');
            })
    }



    function addNewTask() {
        var agregar_tarea = `<div class="col-sm-12 col-md-6" idtarea="">
                            <div class="card text-center">
                                <div class="card-header text-right">
                                        <a class="btn btn-danger delete fs-6" onclick="deleteRow(this)" type="button" > <i class="fa-solid fa-trash-can"> </i></a>
                                    </div>
                                <div class="card-body">

                                    <textarea class="form-control card-title text-left border-0 fs-6" id="textarea"
                                        order="" style="text-align:justify" rows="1"></textarea>
                                        
                                </div>
                                <div class="card-footer text-muted d-flex justify-content-end">
                                  
                                </div>
                              
                            </div>
                        </div>`;
        $('#sub_tareas').append(agregar_tarea);
        ordenar();
    }

    function editar(edit) {
        let btn_agregar_tareas = `<a onclick="addNewTask()" class="btn btn-primary" type="button" id="agregar">Agregar (F2)</a>`;

        let btn_delete = `<div class="position-absolute" style="top:0;right:0">
                                <a class="btn btn-danger delete fs-6" onclick="deleteRow(this)" type="button" > <i class="fa-solid fa-trash-can"> </i></a>
                        </div>`;
        let btn_update = `<a href="javascript:;" onclick="update_send()" class="btn btn-warning"><i class="fas fa-save"
                         aria-hidden="true"></i> Actualizar</a>`;

        CKEDITOR.instances['descripcion'].setReadOnly(false);
        $('#titulo').attr('disabled', false);
        $('#fechafin').attr('disabled', false);
        $('#hora').attr('disabled', false);

        $('.modal-header > h5').text('EDITAR TAREA');
        $('.modal-header').removeClass('bg-warning bg-success bg-danger text-white');

        $('#sub_tareas >div').each(function() {

            let textarea = $(this).find('textarea');

            textarea.attr('disabled', false);
            textarea.val(textarea.attr('texto'));
            textarea.css('height', textarea.prop('scrollHeight'))
            textarea.next().remove();

            $(this).find('.row >div').remove();
            $(this).find('.card-header').append(btn_delete);

        })
        $('.modal-footer > a').remove();
        $('.modal-footer').append(btn_agregar_tareas);
        $('.modal-footer').append(btn_update);
        $('.modal-footer').addClass('justify-content-between')

        // $('#sub_tareas').before(btn_agregar_tareas);
        ordenar();

        document.onkeyup = KeyCheck;

        function KeyCheck(e) {
            var KeyID = (window.event) ? event.keyCode : e.keyCode;
            if (KeyID == 113) {
                addNewTask();
                $('textarea').last().focus();
            }
        }

    }
    var eliminados = [];
    function ordenar() {
        let i = 0;
        $('#sub_tareas> div ').each(function() {
            ++i;
            $(this).find('textarea').attr('id', 'textarea' + i)

            $(this).find('label[conteo]').text(i);
        })

    }
    function deleteRow(borrar) {
        let form_group = $(borrar).parents('.col-sm-12').first();
        let id_eliminar = form_group.attr('idtarea');
        form_group.remove();
        id_eliminar != '' ? eliminados.push(id_eliminar) : '';
    }

    //este codigo se encarga de que solo se presione un CheckBox a la vez, y que se active el SELECT(avance) solo si ya se confirmó
    $('input[type=checkbox]').click(function() {
        let codigo = $(this).attr('codigo');
        let otherInput = $('#sub_tareas div[idtarea=' + codigo + '] input').not(':disabled').not($(this));
        if (!$(this).is(':checked') && !otherInput.is('checked') || otherInput == undefined) {
            $(this).prop('checked', false);
            otherInput.prop('checked', false);
            if (otherInput.attr('tipo') == undefined) {
                $('select#select' + codigo).attr('disabled', false);
            }
        } else if ($(this).is(':checked')) {
            $('select#select' + codigo).attr('disabled', true);
            otherInput.prop('checked', false);
        }
        let reasig = $('input:checked[tipo=reasignar]').not(':disabled').length;

        if (reasig > 0) {
            $('#row_buscador').remove();
            $('#sub_tareas').after(buscador)
            js_select_buscador({{ $tareas->receptor }});
        } else {
            $('#row_buscador').remove();
        }

        js_select_buscador({{ $tareas->receptor }});

    });

    $('select').change(function() {
        let dato = $(this).val();
        let avance_anterior = $(this).attr('avance_tarea');
        let id_subtarea = $(this).attr('codigo');
        if (dato == 100) {
            Swal.fire({
                title: '¿Completar Tarea?',
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: 'Aceptar',
                denyButtonText: `Don't save`,
                confirmButtonColor: '#53A642',
                cancelButtonColor: '#E64545'
            }).then((result) => {
                if (result.value) {
                    $(this).attr('avance_tarea', dato);
                } else {
                    $(this).val(avance_anterior);
                }
            })
        }
    });


    CKEDITOR.config.height = 150;
    CKEDITOR.config.width = 'auto';
    CKEDITOR.config.removeButtons =
        'Source,ExportPdf,Link,Save,NewPage,DocProps,Preview,Print,Templates,document,Undo,Redo,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CreateDiv,Flash,Iframe,InserrPre,Cut,Copy,Paste,PasteText,PasteFromWord,ShowBlocks,MediaEmbed,RemoveFormat,BidiLtr,BidiRtl,SpecialChar,Smiley,About';
    CKEDITOR
        .plugins.addExternal('stylesheetparser', '{{ url('application/plugins/stylesheetparser') }}/',
            'plugin.js');

    var cont = 0;
    $('textarea[descripcion]').each(function() {

        CKEDITOR.replace('descripcion', {
            extraPlugins: 'stylesheetparser',
            // toolbar : [],
            contentsCss: [
                'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
                'https://medic.pe/public/app/css/style.css'
            ],
            stylesSet: []
        });
    })
</script>