@extends('template.master')

@section('page_styles')
<link rel="stylesheet" href="{{asset('css/layout/report.css')}}">
<link rel="stylesheet" href="{{asset('assets/css/bootstrap-select/bootstrap-select.min.css')}}">
<link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
<style>

    .daterangepicker{z-index:9999 !important;}

    .tox-tinymce-aux {
        display: none !important;
    }

    .icon-size {
        font-size: 25px;
    }
</style>
@stop

@section('content')
@include('reports.utilities.generic_modal')
@include('reports.utilities.upload_file')
@include('reports.utilities.report_type_form')


<div class="container-fluid">

    <!-- Begin Page Header-->
    <div class="row">
        <div class="page-header">
            <div class="d-flex align-items-center">
                <h2 class="page-header-title text-gradient-02">Reports</h2>
                <div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}"><i class="ti ti-home"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Reports</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Header -->
    @if(auth()->user()->role_id == 1)
    <div class="row">
        <div class="col-xl-2 col-md-2" style="margin-top: 0.5%"><b>Select Company:</b></div>
        <div class="col-xl-3">
            <div class="mb-2">
                <select class="form-control" onchange="loadCompany()" id="company_id">
                    <option value="">Please Select</option>
                    @foreach($companies as $company)
                        <option value="{{ $company->id }}" >{{ $company->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-xl-7 text-right">
            <div class="mb-2">
                <div class="form-group">
                    <div class="btn-group" role="group" aria-label="Buttons Group">
                        <button type="button" class="btn btn-primary with-icon float-right" data-toggle="modal" data-target="#modal-report-types-centered">
                            <div class="icon">
                                <i class="la la-code-fork"></i>
                            </div>
                            <span>Manage Report Types</span>
                        </button>
                        <button type="button" class="btn btn-secondary with-icon float-right" data-toggle="modal" data-target="#modal-centered" onclick="javascript: uploadFileId()">
                            <div class="icon">
                                <i class="la la-upload"></i>
                            </div>
                            <span>Upload a new file</span>
                        </button>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    @endif

    <div class="row flex-row mt-2">
        <div class="col-xl-12">
            @if(count($report_files) == 0)
                @include('no_data', [
                    'nd_title' => 'No Reports Available',
                    'nd_subtitle' => 'We are preparing your reports, please stay tuned. Thank you',
                ])
            @else
            <div class="row">
                <div class="clearfix"><br /></div>

                <div class="col-md-12">
                    <div class="row">
                        <div class="col-12">
                            <div class="widget has-shadow">
                                <div class="row">
                                    <div class="col-xl-2">
                                        <div class="date-filter">
                                            <div class="mb-3">
                                                <div class="styled-checkbox">
                                                    <input type="checkbox" checked="checked" name="checkbox" id="show-all" onclick="javascript: filterByMonth('All')">
                                                    <label for="show-all">Show All </label>
                                                </div>
                                            </div>
                                            <div class="separator">

                                            </div>
                                            @foreach($months_data as $md)
                                                @php $mo = $md == 'Jan 1970' ? 'Not Specified' : date('Y-m', strtotime($md)); @endphp
                                                <div class="mb-3">
                                                    <div class="styled-checkbox">
                                                        <input type="checkbox" checked="checked" class="{{ $mo }}" name="checkbox" id="check-{{$mo}}" onclick="javascript: filterByMonth('')">
                                                        <label for="check-{{$mo}}">{{$md == 'Jan 1970' ? 'Not Specified' : $md}}</label>
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                    <div class="col-xl-10">
                                        <div class="widget-header bordered no-actions d-flex align-items-center justify-content-between mb-3">
                                            <h4>Your Recent Files</h4>
{{--                                            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal-centered" onclick="javascript: edit_image('', '', '')">Upload a new file</button>--}}
                                        </div>
                                        <div class="widget-body" style="padding-left: 0">

                                            <table id="reports-tbl" class="display" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        @if(auth()->user()->role_id == 1)
                                                            <th>&nbsp;</th>
                                                         @endif
                                                        <th>Date</th>
                                                        <th>Title</th>
                                                        <th>&nbsp;</th>
                                                        <th>Name</th>
                                                        <th>Report Type</th>
                                                         @if(auth()->user()->role_id == 1)
                                                         <th>Company Name</th>
                                                         @endif
                                                        <th>Uploaded By/On</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </thead>
                                                <tfoot>
                                                    <tr>
                                                        @if(auth()->user()->role_id == 1)
                                                            <th>&nbsp;</th>
                                                         @endif
                                                        <th>Date</th>
                                                        <th>Title</th>
                                                        <th>&nbsp;</th>
                                                        <th>Name</th>
                                                        <th>Report Type</th>
                                                         @if(auth()->user()->role_id == 1)
                                                         <th>Company Name</th>
                                                         @endif
                                                        <th>Uploaded By/On</th>
                                                        <th>Actions</th>
                                                    </tr>
                                                </tfoot>
                                            </table>

                                            {{-- <div class="align-items-start justify-content-start mb-3 report-filter-row">
                                                <button class="btn with-icon">
                                                    <i class="la la-filter"></i>
                                                    <span>Filter By</span>
                                                </button>
                                            </div>
                                            <div class="row report-table">
                                                <div class="col-xl-12">

                                                    @if ($errors->any())
                                                    <div class="alert alert-danger">
                                                        <ul>
                                                            @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                            @endforeach
                                                        </ul>
                                                    </div><br />
                                                    @endif

                                                    @if (isset($fileUpload))
                                                    <div class="alert @if($fileUpload->success == true) alert-success @else alert-danger @endif">
                                                        <ul>
                                                            <li>{{$fileUpload->message}}</li>
                                                        </ul>
                                                    </div><br />
                                                    @endif

                                                    @include('reports.utilities.report_file_list')
                                                </div>
                                            </div> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            @endif
        </div>
    </div>
    <!-- End Row -->

    <!-- Begin File Upload Modal -->
    <div id="modal-centered" class="modal fade">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">File Upload</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">close</span>
                    </button>
                </div>
                <div class="modal-body">
                    @include('reports.utilities.upload_file')
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-shadow" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div> -->
            </div>
        </div>
    </div>
    <!-- End File Upload Modal -->
</div>

@stop

@section('page_modals')

@include('template.confirm')

@stop
@section('page_scripts')
<script src="{{asset('assets/vendors/js/bootstrap-select/bootstrap-select.min.js')}}"></script>
<script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>

<script>
    $('.report-filter-row .btn').click(function() {
        $('.date-filter').toggleClass('active');
    });

    var table = $('#reports-tbl').DataTable( {
        "processing": true,
        "serverSide": true,
        "bSortable": true,
        "ajax": "{{route('reports.load')}}",
        // "columnDefs": [
        //   { "width": "10px", "targets": 0 },
        //   { "width": "40px", "targets": 1 },
        //   { "width": "100px", "targets": 2 },
        //   { "width": "70px", "targets": 3 },
        //   { "width": "70px", "targets": 4 },
        //   { "width": "70px", "targets": 5 }
        // ],
    } );


    var limit = 5;
    $(function() {

        // load_report('All');

    });


    // Load Report Data
    function load_report(month)
    {
        var offset = $('#current').text();
        var search = $('#search').val();
        var order = $('#order').val();
        var company_id = $('#company_id').val();

        $.ajax({
            type: 'GET',
            url: '{{route('reports.load')}}?offset='+offset+'&limit='+limit+'&search='+search+'&order='+order+'&month='+month+'&company_id='+company_id,
            dataType: 'json',
            success: function(resp) {
                $('#result-list').html(resp.data);
                $('.paging').show();
                $('#current').text(resp.current);
                $('#last_page').text(Math.ceil(parseInt(resp.total_count)/5));
                $('#display_total').text(parseInt(resp.current)+4);
                $('#total_count').text(resp.total_count);
            }
        });
    }

    // Preview Image
    function preview_image(url, extension) {
        $('#preview').html('');
        var content = '';
        if (!isFileImage(extension)) {
            content = '<object type="text/html" data="' + url + '" style="width: 100%; height: calc(100vh - 200px);"></object>';
        } else {
            content = '<img src="' + url + '" style="width: 100%;">';
        }
        $('#preview').html(content);
    }

    // Pagination
    function pagination(type)
    {
        var current = parseInt($('#current').text());
        var total_count = parseInt($('#total_count').text());

        var page = (type == 'back') ? current-1 : current+1;
        if((type == 'back' && page*limit > 0) || (type == 'next' && page*limit > 0 && current*limit <= total_count))
        {
            $('.paging').hide();
            $('#current').text(page);
            filterByMonth('');
        }
    }

    // Check file type
    function isFileImage(file) {
        return file && file.split('/')[0] === 'image';
    }

    // Download File
    function download_file(file) {
        this.href = 'data:image/jpeg;base64;charset=utf-8,' +
            encodeURIComponent(file);
    }

    function loadCompany()
    {
        var search = $('#company_id').val() != '' ? 'Company: ' + $('#company_id').val() : '';
        table.search( search ).draw();
    }

    // Filter By Month
    function filterByMonth(month)
    {
        var mo = '';
        $("input[name='checkbox']").each(function(i, obj) {
            if(month == 'All')
            {
                if($(this).is(':checked'))
                {
                    $( ".cbx-mo" ).prop('checked', false);
                    mo = 'All';
                }
            }
            else
            {
                $( "#show-all" ).prop('checked', false);
                if($(this).is(':checked'))
                {
                    mo += $(this).attr('class') + ',';  //month + ',';
                }
            }
        });

        var search = mo ? 'Filter: ' + mo : '';
        table.search( search ).draw();
    }

    // Edit File
    function edit_image(id, path, filename, date, title, report_type_id, company_id)
    {
        $('#edit').text('Current File: '+filename);
        $('#date').val(date);
        $('#title').val(title);
        $('#report_type').val(report_type_id);
        $('#company_id_form').val(company_id);
        $('#id').val(id);
    }

    function uploadFileId()
    {
        $('#company_id_form').val($('#company_id').val());
    }

    function delete_image(id)
    {
        $('.confirm_id').val(id);
        $('.confirm_error_message').text('Are you sure you want to delete this report?');
    }

    function confirm()
    {
        $('#confirm-modal-page').attr('style', 'display: none');
        $.ajax({
            type: 'POST',
            url: 'reports/destroy/'+$('.confirm_id').val(),
            dataType: 'json',
            success: function(resp) {
                location.reload();
            }
        });
    }
</script>
@stop