@extends('layouts.authenticated')

@section('additionalstylesheets')
    <link href="{{ asset('/css/jquery-ui.min.css') }}" rel="stylesheet">
@endsection

@section('content')
    <form method="POST" class="form-inline well">
        @csrf
        <div class="container-fluid">
            <div class="row">
                <div class="form-group col-sm-3">
                    <label id="filterLabel" for="description">Resource:</label>
                    <select name="resource" id="resource" class="form-control">
                        <option value="">Select Resource</option>
                        @foreach ($resources as $resource)
                            <option value="{{ $resource->id }}"
                                @if ($defaultResource == $resource->id) selected="selected" @endif>
                                {{ $resource->firstname }} {{ $resource->lastname }}
                            </option>
                        @endforeach
                    </select>
                    <input type="hidden" value="" name="h_resource" id="h_resource">
                    <select name="businessunit" id="businessunit" class="form-control">
                        <option value="">Select Business Unit</option>
                        @foreach ($businessUnits as $businessUnit)
                            <option value="{{ $businessUnit->id }}"
                                @if ($previousSelected == $businessUnit->id) selected="selected" @endif>
                                {{ $businessUnit->description }}
                            </option>
                        @endforeach
                    </select>
                    <input type="hidden" value="" name="h_businessunit" id="h_businessunit">
                    <label><input type="checkbox" id="isBusinessUnit" name="isBusinessUnit">
                        Business Unit Filter
                    </label>
                    <input type="hidden" value="" name="h_isBusinessUnit" id="isBusinessUnit">
                </div>
                <div class="form-group col-sm-2">
                    <label for="fromDate">Start:</label>
                    <input type="text" name="fromDate" id="fromDate" class="form-control datepicker"
                        placeholder="yyyy-mm-dd" value="{{ $filter['fromDate'] }}">
                    <input type="hidden" value="" name="h_fromDate" id="h_fromDate">
                </div>
                <div class="form-group col-sm-2">
                    <label for="end">End:</label>
                    <input type="text" name="toDate" id="toDate" class="form-control datepicker"
                        placeholder="yyyy-mm-dd" value="{{ $filter['toDate'] }}">
                    <input type="hidden" value="" name="h_toDate" id="h_toDate">
                </div>
                <div class="form-group col-sm-2">
                    <label for="resource_type">Resource Type:</label>
                    <select name="resource_type" id="resource_type" class="form-control">
                        <option value="-1">All</option>
                        @foreach ($resourceTypes as $key => $type)
                            <option value="{{ $key }}"
                                @if ($key === $selectedResource) selected="selected" @endif>
                                {{ $type }}
                            </option>
                        @endforeach
                    </select>
                    <input type="hidden" value="" name="h_resource_type" id="h_resource_type">
                </div>
                <div class="form-group col-sm-2">
                    <br />
                    {{-- <label><input type="checkbox" name="includeAdmin" @if ($includeAdmin) checked="" @endif> --}}
                    <label><input type="checkbox" name="includeAdmin" id="includeAdmin"
                            @if ($includeAdmin) checked="" @endif>
                        Include Admin
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 buttons">
                    <label>&nbsp;</label>
                    <button type="button" name="search" id="search" class="btn btn-primary" value="search">
                        <i class="fa fa-search-plus"></i> Search
                    </button>
                    <button type="button" name="download" id="download" class="btn btn-success" value="search">
                        <i class="fa fa-download"></i> Download
                    </button>
                </div>
            </div>
            <br />
        </div>
    </form>
    <div id="output">
        @include ('report.entitySharingList')
    </div>
@endsection

@section('customjs')
    <script src="{{ asset('/js/jquery-ui.min.js') }}"></script>
    <script type="text/javascript">
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd'
        });

        $('#businessunit').hide(); //Hide the elements onload
        $("#isBusinessUnit").change(function() {
            if ($(this).is(':checked')) {
                $('#resource').hide();
                $('#resource').val("");
                $('#businessunit').show();
                $("#filterLabel").html("Business Unit:");

            } else {
                $('#businessunit').hide();
                $('#businessunit').val("");
                $('#resource').show();
                $("#filterLabel").html("resource:");
            }

        });

        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                var page = $(this).attr('href').split('page=')[1];
                fetch_data(page);
            });

            function fetch_data(page) {
                var businessUnit = '&businessUnit=' + $('#h_businessunit').val();
                var resource = '&resource=' + $('#h_resource').val();
                var fromDate = '&fromDate=' + $('#h_fromDate').val();
                var toDate = '&toDate=' + $('#h_toDate').val();
                var resourceType = '&resourceType=' + $('#h_resource_type').val();

                if ($("#isBusinessUnit").is(':checked')) {
                    $.ajax({
                        url: "/sharing_list?page=" + page + businessUnit + fromDate + toDate + resourceType,
                        success: function(data) {
                            $('#output').html(data);
                        }
                    });
                } else {
                    $.ajax({
                        url: "/sharing_list?page=" + page + resource + fromDate + toDate + resourceType,
                        success: function(data) {
                            $('#output').html(data);
                        }
                    });
                };
            }

            $('#search').click(function() {
                var businessUnit = $('#businessunit').val();
                var resource = $('#resource').val();
                var fromDate = $('#fromDate').val();
                var toDate = $('#toDate').val();
                var resourceType = $('#resource_type').val();
                $('#h_businessunit').val(businessUnit);
                $('#h_resource').val(resource);
                $('#h_fromDate').val(fromDate);
                $('#h_toDate').val(toDate);
                $('#h_resource_type').val(resourceType);

                fetch_data(1);
            });

            $('#download').click(function() {
                var resource = $('#resource').val();
                var fromDate = $('#fromDate').val();
                var toDate = $('#toDate').val();
                var resourceType = $('#resource_type').val();

                if (resource == "") {
                    return alert('Select a resource person first.')
                }
                // location.replace('entity_sharing_report_pdf/' + fromDate + "/" + toDate + "/" + resource +
                //     "/" + resourceType);
                window.open('entity_sharing_report_pdf/' + fromDate + "/" + toDate + "/" + resource +
                    "/" + resourceType, "_blank").focus();
            });
        });
    </script>
@endsection