@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('plannerLand.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('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.edit'))>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputName">Equipamiento:</label>
                            <select class="form-control" id="equipment_id_id" multiple="multiple" name="equipment_id[]"
                                @disabled(!auth()->user()->can('plannerLand.create') && !auth()->user()->can('plannerLand.edit'))>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="inputName">Camioneta(Opcional):</label>
                            <select class="form-control" id="pickup_id_id" name="pickup_id"
                                @disabled(!auth()->user()->can('plannerLand.create') && !auth()->user()->can('plannerLand.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('plannerLand.create') && !auth()->user()->can('plannerLand.edit'))></textarea>
                        </div>
                        @can('plannerLand.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('plannerLand.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('plannerLand.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('plannerLand.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('plannerLand.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>

    <!-- Modal -->
    <div class="modal fade bd-example-modal-lg" id="modalInduction_id" role="dialog"
        aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <select class="form-control" style="width: 50%" id="user_induction_id">
                    </select>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <table class="table" id="tableInducction">
                                    <thead class="thead-dark">
                                        <tr style="100%">
                                            <th scope="col">Inducción</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="col">
                                <table class="table" id="tableLicense">
                                    <thead class="thead-dark">
                                        <tr style="100%">
                                            <th scope="col">Licencia</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </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.workorderPlannerLand') }}",
                        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.workorderLanTypeService') }}",
                        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.workorderLanUser') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                term: params.term,
                                workorder: $('#workorder_id_id').val(),
                            }
                        },
                        processResults: function(data) {
                            return {
                                results: data
                            }
                        }
                    },
                    placeholder: 'Seleccione personal',
                    theme: "bootstrap4",
                });

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

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

                $('#pickup_id_id').select2({
                    ajax: {
                        url: "{{ route('api.select.workorderLanPickup') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                term: params.term,
                                workorder: $('#workorder_id_id').val(),
                            }
                        },
                        processResults: function(data) {
                            return {
                                results: data
                            }
                        }
                    },
                    placeholder: 'Seleccione camioneta',
                    theme: "bootstrap4",
                });
            });
            let calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
                events: "{{ route('plannerLand.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');
                        $('#equipment_id_id').empty();
                        $('#equipment_id_id').val(null).trigger('change');
                        $('#pickup_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('plannerLand.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 (info.event.extendedProps.pickup != null || info.event.extendedProps.pickup != null) {
                            var optionPickup = new Option(info.event.extendedProps.pickup, info.event.extendedProps
                                .pickup_id, true, true);
                            $('#pickup_id_id').append(optionPickup).trigger('change');
                        }
                    }
                    if ($('#type_activity_id').val() == 'Otros') {
                        $('#btnEdit').hide();
                    }
                    RecoveryUsers(info.event.id);
                    RecoveryEquipment(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('plannerLand.store') }}/" + info.event.id);
                    $("#btnHistory").attr("href", "{{ route('plannerLand.store') }}/" + info.event.id);
                    $('#modal').modal('show');
                }
            });
            calendar.render();



            $("#btnDelete").click(function() {
                var url = "{{ route('plannerLand.destroy', ':id') }}";
                url = url.replace(':id', idActivity);
                deleteActivity(url);
            });
            $("#btnClose").click(function() {
                var url = "{{ route('plannerLand.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 RecoveryEquipment(id) {
                $('#equipment_id_id').val(null).trigger('change');
                $.ajax({
                    url: "{{ route('api.recoverEquipment') }}",
                    type: "get",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: "json",
                    data: {
                        planning: id
                    },
                    success: function(resultado) {
                        $.each(resultado, function(index, equipment) {
                            var option = new Option(equipment.text, equipment.id, true, true);
                            $('#equipment_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');
                $('#pickup_id_id').val(null).trigger('change');
                $('#user_id_id').val(null).trigger('change');
                $('#user_induction_id').val(null).trigger('change');
                if ($('#workorder_id_id').val() != null) {
                    $.ajax({
                        url: "{{ route('api.recoverDateLand') }}",
                        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