@extends('layouts.app')

@section('page-title')
<div class="row bg-title">
        <div class="col-lg-3 col-sm-4 col-md-4 col-xs-12 bg-title-left">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang('modules.projects.panel.titledashboard')</h4>
        </div>

        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right bg-title-right">
            <div class="col-xs-3">
                <div id="selectContainer" hidden>
                    <select id="projectSelect" class="form-control select2" >
                        <option value="">--</option>
                        @foreach($projectlist as $value)
                            <option value="{{$value->id}}">{{$value->project_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            {!! Form::open(['id'=>'uploadExcel','class'=>'ajax-form','method'=>'POST']) !!}
            <div class="col-xs-3">
                <button type="button" class="btn btn-sm btn-outline btn-info pull-right" id="multi-select"  data-toggle="button" aria-pressed="false"><i class="fa fa-check-square-o"></i> @lang('modules.dashboard.multipleSelection')</button>
                <div id="current-container" hidden>
                    <button type="button" class="btn btn-sm btn-outline btn-info pull-right" id="current"  data-toggle="button" aria-pressed="false"><i class="fa fa-clock-o"></i> @lang('modules.dashboard.currentBoard')</button>
                </div>
            </div>
            <div class="col-xs-2">
                <button type="button" class="btn btn-sm btn-outline btn-info pull-right" id="notify_prl"  data-toggle="button" aria-pressed="false"><i class="fa fa-check-square-o"></i> @lang('modules.dashboard.notifyPRL')</button>
            </div>
            <div class="col-xs-2">
                <a href="{{ route('admin.projects.create') }}" id="new-project" class="btn btn-sm btn-outline btn-success pull-right"><i class="fa fa-plus"></i> @lang('modules.projects.newProyect')</a>
            </div> 
                <div class="col-xs-2">
                <input type="datetime-local" name="datepicker" id="datepicker" class="form-control">
            </div> 
            <div class="col-xs-12 m-t-5">
            <a href="javascript:;" id="exportExcel" class="btn btn-outline btn-success btn-sm">@lang('modules.projects.excelMigration') <i class="ti-upload" aria-hidden="true"></i></a>

            <span class="btn btn-info btn-file">
            <span class="fa fa-download"></span>
                <span>@lang('modules.projects.importExcel')</span>
                <input type="file" class="form-control" id="upload" name="upload" accept=".csv, .xlsx, .xls, .xlsm"> 
            </span>

            <span class="btn btn-info btn-file">
            <span class="fa fa-download"></span>
                <span>@lang('modules.projects.exportPdf')</span>
                <input href="javascript:;" onclick="FiltroprojectPdf();" class="form-control" id="filtroResourcesPDF" name="filtroResourcesPDF"> 
            </span>
            </div>  
            <ol class="breadcrumb">
                <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
                <li class="active">{{ __($pageTitle) }}</li>
            </ol>
            {!! Form::close() !!}
        </div>
</div>
@endsection
@section('filter-section')
<style>
</style>
<br><br>
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <h4><b>@lang('modules.dashboard.dismissalPersonnel')</b></h4>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        <div class="list-group bajalist" style="border: solid black 1px; max-height: 25%; overflow-y: scroll;">
                @foreach($leaves as $value)
                    @if($value->status == 'baja')
                        <a class="list-group-item">{{$value->employee_id." | ".$value->names." ".$value->surnames}}</a>
                    @endif
                @endforeach
            </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <h4><b>@lang('modules.dashboard.vacationStaff')</b></h4>
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <div class="list-group bajalist" style="border: solid black 1px; max-height: 100px; overflow-y: scroll; ">
            @foreach($leaves as $value)
                @if($value->status == 'vacaciones')
                    <a class="list-group-item">{{$value->employee_id." | ".$value->names." ".$value->surnames}}</a>
                @endif
            @endforeach
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            <h4><b>@lang('modules.dashboard.staffInCourses')</b></h4>
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        <div class="list-group bajalist" style="border: solid black 1px; max-height: 25%; overflow-y: scroll;">
            @foreach($leaves as $value)
                @if($value->status == 'curso')
                    <a class="list-group-item">{{$value->employee_id." | ".$value->names." ".$value->surnames}}</a>
                @endif
            @endforeach
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingFour">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
            <h4><b>@lang('modules.dashboard.unassignedPersonnel')</b></h4>
        </button>
      </h5>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
      <div class="card-body">
        <div class="list-group bajalist" style="border: solid black 1px; max-height: 25%; overflow-y: scroll;">
            @foreach($employeeUnasigned as $value)
                <a class="list-group-item">{{$value->employee_id." | ".$value->names." ".$value->surnames}}</a>
            @endforeach
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingFive">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
            <h4><b>@lang('modules.dashboard.unassignedFleet')</b></h4>
        </button>
      </h5>
    </div>
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
      <div class="card-body">
        <div class="list-group bajalist" style="border: solid black 1px; max-height: 25%; overflow-y: scroll;">
            @foreach($fleetUnasigned as $value)
                <a class="list-group-item">{{$value->type." | ".$value->model." | ".$value->plate." | ".$value->year}}</a>
            @endforeach
        </div>
      </div>
    </div>
  </div>
</div>


@endsection
@push('head-script')
<link rel="stylesheet" href="{{ asset('plugins/bower_components/lobipanel/dist/css/lobipanel.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/jquery-asColorPicker-master/css/asColorPicker.css') }}">
{{--<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">--}}
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/daterange-picker/daterangepicker.css') }}" />
<style>
    /*.select2-container*/
    /*{*/
    /*    z-index:999999 !important;*/
    /*}*/
    .reportrange {
        display: table-cell; padding-bottom: 8px !important;
    }
    .top-buttons a , .top-buttons span  {
        margin-bottom: 3px;
        margin-top: 3px;
    }
</style>
@endpush

@section('content')

    <div class="white-box">
        
        <div class="row container-row"></div>
        <!-- .row -->

    </div>

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-md in" id="addResourceModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Cargando...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn blue">Guardar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{--Ajax Modal Ends--}}

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-md in"  id="editResourceModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="subTaskModelHeading"></span>
                </div>
                <div class="modal-body">
                    Cargando...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn blue">Guardar</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->.
    </div>
    {{--Ajax Modal Ends--}}
    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-md in" id="taskCategoryModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn blue">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->.
    </div>
    {{--Ajax Modal Ends--}}

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-md in" id="DescargaPDF" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-filt-pdf">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title"><i class="icon-layers"></i> @lang('app.filter') @lang('modules.projects.downloadPDF')</h4>
                </div>
                <div class="modal-body">
                    {!! Form::open(['id'=>'FiltroprojectPdf','class'=>'ajax-form','method'=>'POST']) !!}

                    <div class="row">
                        <div class="col-md-12 ">      
                            <div class="col-xs-3">
                                <label>@lang('app.from')</label>
                                <input type="date" name="DesdePDF" id="DesdePDF" class="form-control">
                            </div> 
                            <div class="col-xs-3">
                                <label>@lang('app.Until')</label>
                                <input type="date" name="HastaPDF" id="HastaPDF" class="form-control">
                            </div> 
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>@lang('app.menu.works')</label>
                                    <select class="select2 form-control" data-placeholder="@lang('app.constructionSite')" id="obraPDF" name="obraPDF">
                                        <option value="all">@lang('app.all')</option>
                                            @foreach($FiltroprojectPdf as $Obras)
                                                <option value="{{ $Obras->id }}">{{ ucwords( $Obras->project_name) }}</option>
                                            @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <label>@lang('modules.projects.typesOfWorks')</label>
                                <div class="form-group">
                                    <select class="select2 form-control" data-placeholder="@lang('app.resourceType')" id="tipoRecursoPDF" name="tipoRecursoPDF">
                                        <option value="all">@lang('app.all')</option>
                                        <option value="Empleados">@lang('app.menu.employees')</option>
                                        <option value="Vehiculos">@lang('app.menu.vehicles')</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" id="close-modal" data-dismiss="modal"> @lang('app.close')</button>
                    <button type="submit" id="new_export_pdf" class="btn btn-success"><i
                        class="fa fa-check"></i> @lang('app.export')
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{--Ajax Modal Ends--}}

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-md in" id="eventDetailModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Loading...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn blue">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{--Ajax Modal Ends--}}
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/lobipanel/dist/js/lobipanel.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asColor.js') }}"></script>
<script src="{{ asset('plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asGradient.js') }}"></script>
<script src="{{ asset('plugins/bower_components/jquery-asColorPicker-master/dist/jquery-asColorPicker.min.js') }}"></script>

<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('plugins/bower_components/dropzone-master/dist/dropzone.css') }}">
<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script type="text/javascript" src="{{ asset('plugins/daterange-picker/daterangepicker.js') }}"></script>

<!--slimscroll JavaScript -->
<script src="{{ asset('js/jquery.slimscroll.js') }}"></script>
@section('pusher-event')
    <script>
        var channel = pusher.subscribe('resource-updated-channel');
        channel.bind('resource-updated', function(data) {
            loadData();
        });
    </script>
@endsection
<script>
    $('#projectSelect').select2({});
    var multi = 0;
    loadData();

    $(document).ready(function(){
        var height = window.innerHeight;
        $('.bajalist').each(function(){
            this.style.setProperty('max-height', (height*0.4)+"px");
        });
        $('#listEmp').closest('.col-md-3').css('width', '20%');
        $('#listEmp').closest('.col-md-3').siblings().css('min-width', '80%');
    });
    window.addEventListener('resize', function(){
        var height = window.innerHeight;
        $('.bajalist').each(function(){
            this.style.setProperty('max-height', (height*0.4)+"px");
        });
    });

    $('#projectSelect').on('change', function(){
        var rss = [$(this).val()];
        $('.checkmulti:checked').each(function(){
            rss.push($(this).closest('.lobipanel').data('resource-id'));
        });
        if(rss.length > 1){
            $.easyAjax({
                url: '{{ route("admin.resourcesboard.multiMove") }}',
                type: 'POST',
                data:{rss: rss, '_token':'{{ csrf_token() }}'},
                success: function (response) {
                    $('#selectContainer').hide();
                    multi=0;
                    loadData();
                }
            });
        }else{
            $('#projectSelect').select2('val', '');
            var msgs = "Por favor, Seleccione un Recurso a mover.";
            $.showToastr(msgs, 'warning');
        }
    });
    function loadData () {

        var url = '{{route('admin.resourcesboard.index')}}';

        $.easyAjax({
            url: url,
            container: '.container-row',
            type: "GET",
            success: function (response) {
                $('.container-row').html(response.view);
                $("body").tooltip({
                    selector: '[data-toggle="tooltip"]'
                });
            }

        })
    }
    $('#multi-select').on('click', function(){
        if(multi == 0){
            $('.checkmulti').each(function(){
                $(this).show();
            });
            $('#projectSelect').select2('val', '');
            $('#selectContainer').show();
            multi=1;
        }else{
            $('.checkmulti').each(function(){
                $(this).hide();
                $(this).prop('checked', false);
            });
            $('#selectContainer').hide();
            multi=0;
        }
    });

    $('#notify_prl').on('click', function(){
        var url = '{{route('admin.resourcesboard.addnotifyprl')}}';
        $.easyAjax({
                url: url,
                type: "POST",
                data: {'_token': '{{ csrf_token() }}'},
                success: function (response) {
                    if(response.status == 'success'){
                        //console.log(response);
                    }
                }
            });
    });

    $('#toggle_fullscreen').on('click', function(){
        // if already full screen; exit
        // else go fullscreen
        if (
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement
        ) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            $('.fullscreen-hide').show();

        } else {
            element = $('.container-scroll').get(0);
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            $('.fullscreen-hide').hide();
        }
    });

    $('#datepicker').on('change', function(){
        if($(this).val() != ""){
            var url = '{{route('admin.resourcesboard.timelog')}}';
            $('#current-container').show();
            $('#multi-select').hide();
            var time = $(this).val();
            $.easyAjax({
                url: url,
                container: '.container-row',
                type: "GET",
                data: {'_token': '{{ csrf_token() }}', 'time': time},
                success: function (response) {
                    if(response.status == 'success'){
                        $('.container-row').html(response.view);
                    }else{
                        var msgs = "No se pudo Consultar la Fecha Solicitada.";
                        $.showToastr(msgs, 'warning');
                        $('#datepicker').val('');
                    }
                }
            });
            var url2 = '{{route('admin.resourcesboard.emptimelog')}}';
            $.easyAjax({
                url: url2,
                container: '.container-row',
                type: "GET",
                data: {'_token': '{{ csrf_token() }}', 'time': time},
                success: function (response) {
                    if(response.status == 'success'){
                        $('#listEmp').html(response.view);
                    }
                }
            });
        }
    });
    $('#current').on('click', function(){
        $('#datepicker').val('');
        $('#current-container').hide();
        $('#multi-select').show();
        loadData();

        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth()+1;
        var day = d.getDate();
        if(month < 10){
            month = '0'+month;
        }
        if(day < 10){
            day = '0'+day;
        }
        var time = year+'-'+month+'-'+day;
        
        var url2 = '{{route('admin.resourcesboard.emptimelog')}}';
        $.easyAjax({
            url: url2,
            container: '.container-row',
            type: "GET",
            data: {'_token': '{{ csrf_token() }}', 'time': time},
            success: function (response) {
                if(response.status == 'success'){
                    $('#listEmp').html(response.view);
                }
            }
        });
    });

    $("#upload").on('change',function(){
            $.easyAjax({
                url: '{{route('admin.resourcesboard.upload')}}',
                container: '#uploadExcel',
                type: "POST",
                redirect: true,
                file: (document.getElementById("upload").files.length == 0) ? false : true
            })
            $(this).val('');

        });

    $('#exportExcel').on('click', function () {
        var url = '{!! route('admin.resourcesboard.exportHistorico') !!}?_token={{ csrf_token()}}';
        window.open(url, '_blank');
        /*$.easyAjax({
            type: 'GET',
            url: url,
            success: function (response) {
                console.log('hola',response);
            }
        });*/
        
    });

    function FiltroprojectPdf() {

        limpiarForm();
        $('#DescargaPDF').modal('show');

    }

    $('#close-modal').click(function () {
        
        limpiarForm();
        $('#DescargaPDF').modal('hide');

    });

    $('#new_export_pdf').click(function () {
        var Desde = $("#DesdePDF").val();
        var Hasta = $("#HastaPDF").val();
        
        if(Desde <= Hasta){
            var url = '{{route('admin.resourcesboard.downloadpdf')}}';
            window.open(url, '_blank');
            
            $.easyAjax({
                url: url,
                type: "GET",
                data: $('#FiltroprojectPdf').serialize(),
                success: function (data) {
                    limpiarForm();
                    $('#DescargaPDF').modal('hide');           

                }
            })          
        }else{
            swal({
                title: "@lang('messages.wrongDates')",
                text: "@lang('messages.taskDateValidation')",
                type: "warning",
                showCancelButton: false,
                confirmButtonColor: "#DD6B55",
            })
        }     
    });

    function limpiarForm() {
            
        //$("#createPDF")[0].reset();
    }
</script>

@endpush