@extends('adminlte::page')
@section('plugins.FullCalendar', true)
@section('plugins.Toastr', true)
@section('plugins.Select2', true)

@section('title', 'Planificacion Terreno')

@section('content_header')
    <br>
@stop

@section('content')
    <div class="card card-primary">
        <div class="card-body p-0">
            <!-- THE CALENDAR -->
            <div id="calendar"></div>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-md-auto">
                    <span class="badge bg-primary" style="width: 30px; height: 30px;"> </span>
                </div>
                <div class="col-md-auto">
                    <p class="font-weight-bold">Actividad Planificada.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto">
                    <span class="badge bg-success" style="width: 30px; height: 30px;"> </span>
                </div>
                <div class="col-md-auto">
                    <p class="font-weight-bold">Trabajo Terminado.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto">
                    <span class="badge bg-danger" style="width: 30px; height: 30px;"> </span>
                </div>
                <div class="col-md-auto">
                    <p class="font-weight-bold">Retrabajo/Reprogramación</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto">
                    <span class="badge bg-warning" style="width: 30px; height: 30px;"> </span>
                </div>
                <div class="col-md-auto">
                    <p class="font-weight-bold">Vacaciones/Examenes/Otros.</p>
                </div>
            </div>
        </div>
    </div>
    @if (auth()->user()->can('plannerCabinet.create'))
        <div id="user_permission" data-user=@json(true)></div>
    @else
        <div id="user_permission" data-user=@json(false)></div>
    @endif
    <!-- Modal -->
    <div class="modal fade" id="modal" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Actividad</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 data-action="{{ route('plannerCabinet.store') }}" method="POST" id="plannerForm">
                        @csrf
                        <a class="btn btn-primary float-right" title="Historial Actividad" id="btnHistory" href="#"><i
                                class="fas fa-solid fa-eye"></i></a>
                        <br>
                        <input type="hidden" name="_method" value="PUT" id="inputPut">
                        <div class="form-group">
                            <label for="inputName">Tipo actividad:</label>
                            <select class="form-control" id="type_activity_id" name="type_activity"
                                onchange="changeInputs()" @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                                <option value="Trabajo">Trabajo</option>
                                <option value="Otros">Vacaciones/Examenes/Otros</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputName">Orden de trabajo:</label>
                            <select class="form-control" id="workorder_id_id" name="workorder_id" onchange="changeOT()"
                                @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputName">Fecha Estimada:</label>
                                    <input type="date" id="start_estimated_id" name="start_estimated"
                                        class="form-control" disabled>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputName">Fecha Final Estimada:</label>
                                    <input type="date" id="end_estimated_id" name="end_estimated" class="form-control"
                                        disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputName">Fecha inicio:</label>
                                    <input type="date" id="start_id" name="start" class="form-control"
                                        onchange="changeDate()" @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="inputName">Fecha Final:</label>
                                    <input type="date" id="end_id" name="end" class="form-control"
                                        @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputName">Título:</label>
                            <input type="text" id="title_id" name="title" class="form-control"
                                @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                        </div>
                        <div class="form-group">
                            <label for="inputName">Tipo servicio:</label>
                            <select class="form-control" id="type_service_id_id" multiple="multiple"
                                name="type_service_id[]" @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputName">Personal:</label>
                            <select class="form-control" id="user_id_id" multiple="multiple" name="user_id[]"
                                @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputName">descripción:</label>
                            <textarea class="form-control" id="description_id" name="description" rows="4" @disabled(!auth()->user()->can('plannerCabinet.create') && !auth()->user()->can('plannerCabinet.edit'))></textarea>
                        </div>
                        @can('plannerCabinet.edit')
                            <div id="inputEdit">
                                <div class="form-group">
                                    <label for="inputName">Tipo de modificación</label>
                                    <select class="form-control" id="type_id" name="type_modification">
                                        <option value="Reprogramacion">Reprogramación</option>
                                        <option value="Retrabajo">Retrabajo</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="inputName">Motivo modificación:</label>
                                    <textarea class="form-control" id="reason_id" name="reason" rows="4"></textarea>
                                </div>
                            </div>
                        @endcan
                </div>

                <div class="modal-footer">
                    @can('plannerCabinet.create')
                        <button type="submit" class="btn btn-primary btns" id="btnAdd">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            AGREGAR</button>
                    @endcan
                    @can('plannerCabinet.edit')
                        <button type="submit" class="btn btn-primary btns" id="btnEdit"><span
                                class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><i
                                class="fas fa-solid fa-pen"></i>
                            MODIFICAR</button>
                    @endcan
                    </form>
                    @can('plannerCabinet.destroy')
                        <form id="formDelete">
                            @method('DELETE')
                            @csrf
                        </form>
                        <button class="btn btn-danger btns" id="btnDelete"><i class="fas fa-solid fa-trash"></i>
                            ELIMINAR</button>
                    @endcan
                    @can('plannerCabinet.edit')
                        <form id="formClose">
                            @method('PUT')
                            @csrf
                        </form>
                        <button class="btn btn-info btns" id="btnClose"><i class="fas fa-regular fa-calendar-check"></i>
                            CERRAR</button>
                    @endcan
                </div>
            </div>
        </div>
    </div>
@stop



@section('js')
    <script>
        let permission = document.querySelector('#user_permission').dataset.user;
        permission = JSON.parse(permission);
        var uri = "{{ route('validate.checkUserPlanner') }}";
        $(document).ready(function() {
            $('#inputEdit').hide();
            $.fn.select2.defaults.set('language', 'es');
            $('span.spinner-border').hide();
            $('#workorder_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.workorderPlannerCabinet') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term,
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione una orden de trabajo',
                theme: "bootstrap4",
            });
            $('#type_service_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.workorderCabinetTypeService') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term,
                            workorder: $('#workorder_id_id').val(),
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione un tipo de servicio',
                theme: "bootstrap4",
            });

            $('#user_id_id').select2({
                ajax: {
                    url: "{{ route('api.select.workorderCabinetUser') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            term: params.term,
                        }
                    },
                    processResults: function(data) {
                        return {
                            results: data
                        }
                    }
                },
                placeholder: 'Seleccione personal',
                theme: "bootstrap4",
            });

        });
        let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
            events: "{{ route('plannerCabinet.calendar') }}",
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'es',
            themeSystem: 'bootstrap',
            dateClick: function(info) {
                if (permission) {
                    idActivity = "";
                    $('#btnAdd').show();
                    $('#btnEdit').hide();
                    $('#btnDelete').hide();
                    $('#btnClose').hide();
                    $('#btnHistory').hide();
                    $('#inputEdit').hide();
                    $("#type_id").prop('disabled', true);
                    $("#reason_id").prop('disabled', true);
                    $("#inputPut").prop('disabled', true);
                    $('#plannerForm')[0].reset();
                    $('#plannerForm').validate().resetForm();
                    $('#title_id').val('');
                    $('#description_id').val('');
                    $('#workorder_id_id').val(null).trigger('change');
                    $('#type_service_id_id').empty();
                    $('#type_service_id_id').val(null).trigger('change');
                    $("#user_id_id").empty();
                    $('#user_id_id').val(null).trigger('change');
                    $('#start_id').val(info.dateStr);
                    $('#end_id').val(info.dateStr);
                    changeDate();
                    changeInputs();
                    changeRules("create");
                    $("#plannerForm").attr("data-action", "{{ route('plannerCabinet.store') }}");
                    $("#btnHistory").attr("href", "#");
                    $('#modal').modal('show');
                }
            },
            eventClick: function(info) {
                idActivity = info.event.id;
                $('#btnAdd').hide();
                $('#btnEdit').show();
                $('#btnDelete').show();
                $('#btnClose').show();
                $('#btnHistory').show();
                $('#inputEdit').show();
                $("#type_id").prop('disabled', false);
                $("#reason_id").prop('disabled', false);
                $("#inputPut").prop('disabled', false);
                $('#workorder_id_id').val(null).trigger('change');
                $('#start_id').val(moment(info.event.start).format("YYYY-MM-DD"));
                var endDate = new Date(info.event.end);
                endDate.setDate(endDate.getDate() - 1);
                $('#end_id').val(moment(endDate).format("YYYY-MM-DD"));
                $('#title_id').val(info.event.title.split('|')[0]);
                $('#type_activity_id').val(info.event.extendedProps.type_activity);
                if ($('#type_activity_id').val() == 'Trabajo') {
                    var optionWorkOrder = new Option(info.event.extendedProps.workorder, info.event
                        .extendedProps.workorder_id, true, true);
                    $('#workorder_id_id').append(optionWorkOrder).trigger('change');
                }
                if ($('#type_activity_id').val() == 'Otros') {
                    $('#btnEdit').hide();
                }
                RecoveryUsers(info.event.id);
                RecoveryService(info.event.id);
                $('#description_id').val(info.event.extendedProps.description);
                if (permission) {
                    changeInputs();
                }
                if (info.event.extendedProps.status == 1) {
                    $('#btnClose').hide();
                    $('#btnEdit').hide();
                }
                changeRules("edit");
                $("#plannerForm").attr("data-action", "{{ route('plannerCabinet.store') }}/" + info.event.id);
                $("#btnHistory").attr("href", "{{ route('plannerCabinet.store') }}/" + info.event.id);
                $('#modal').modal('show');
            }
        });
        calendar.render();

        $("#btnDelete").click(function() {
            var url = "{{ route('plannerCabinet.destroy', ':id') }}";
            url = url.replace(':id', idActivity);
            deleteActivity(url);
        });
        $("#btnClose").click(function() {
            var url = "{{ route('plannerCabinet.closeActivity', ':id') }}";
            url = url.replace(':id', idActivity);
            CloseActivity(url);
        });

        function RecoveryUsers(id) {
            $('#user_id_id').val(null).trigger('change');
            $.ajax({
                url: "{{ route('api.recoverUser') }}",
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: "json",
                data: {
                    planning: id
                },
                success: function(resultado) {
                    $.each(resultado, function(index, user) {
                        var option = new Option(user.text, user.id, true, true);
                        $('#user_id_id').append(option).trigger('change');
                    });



                }
            });
        }

        function RecoveryService(id) {
            $('#type_service_id_id').val(null).trigger('change');
            $.ajax({
                url: "{{ route('api.recoverService') }}",
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: "json",
                data: {
                    planning: id
                },
                success: function(resultado) {
                    $.each(resultado, function(index, service) {
                        var option = new Option(service.text, service.id, true, true);
                        $('#type_service_id_id').append(option).trigger('change');
                    });

                }
            });
        }


        function changeOT() {
            $('#type_service_id_id').val(null).trigger('change');
            if ($('#workorder_id_id').val() != null) {
                $.ajax({
                    url: "{{ route('api.recoverDateCabinet') }}",
                    type: "get",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: "json",
                    data: {
                        workorder_id: $('#workorder_id_id').val()
                    },
                    success: function(resultado) {
                        $('#start_estimated_id').val(resultado.start_estimated);
                        $('#end_estimated_id').val(resultado.end_estimated);
                    },
                    error: function() {
                        $('#start_estimated_id').val('');
                        $('#end_estimated_id').val('');
                    }
                });
            }
        }
    </script>

    <script src="/js/plannerLand/delete.js"></script>
    <script src="/js/plannerLand/form.js"></script>
@stop