@use('App\Services\Date')
@extends('superadmin::layouts.master')
@section('title',__('tenant::company.notes'))
@section('extra-styles')
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/daterange/daterangepicker.css')}}">
<link rel="stylesheet" type="text/css"
      href="{{asset('assets/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/plugins/pickers/daterange/daterange.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom/amsify-suggestags/amsify-suggestags.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/notes-style.css')}}">
@endsection
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('dashboard-home')}}">@lang('Home')</a>
            </li>
            <li class="breadcrumb-item"><a href="{{route('tenants.notes.index')}}">@lang('tenant::company.notes')</a>
            </li>
        </ol>
    </div>
</div>
@endsection
@section('content')

@include('superadmin::errors.lists')
<section id="configuration">
    <div class="row my-1" style="margin: 0px;">
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary w-100 filterbtn" type="button" data-toggle="collapse"
                        data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <div class="d-flex justify-content-between">
                        <span>{{ __('Filter') }} </span><i class="fa fa-angle-down"></i>
                    </div>

                </button>
            </div>
        </div>
        <div class="collapse filter-section-collapse" id="collapseExample">
            <form action="{{ route('tenants.notes.index') }}" method="GET" class="form form-horizontal striped-rows form-bordered dev-form-validate" novalidate>
                @csrf
                <div class="card card-body mb-0">
                    <div class="row  mt-1">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="category">{{ __('tenant::company.company') }}</label>
                                    </div>
                                    <div class="col-md-7">
                                        <select
                                        name="company_id"
                                        class="w-100
                                        py-1 form-control select2-tag">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach($companies as $company)
                                            <option value="{{$company->id}}" {{ (request()->get('company_id') == $company->id) ? "selected" : "" }}>{{$company->name}}</option>

                                        @endforeach
                                    </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                    <div class="text-center mt-1">
                        <button type="submit" class="btn btn-info btn-min-width mr-1 mb-1">@lang('Apply')</button>
                        <button type="reset" id="reset" class="btn btn-warning btn-min-width mr-1 mb-1">@lang('Clear')</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div style="margin: 13px;margin-bottom: 0px;display: none;" role="alert" id="note_added_msg" class="alert alert-success">

    </div>
    <div style="margin: 13px;margin-bottom: 0px;" class="alert alert-danger hidden note_added_error">
        <div class="error-header">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <ul id="note_added_error">
            </ul>
        </div>
    </div>
    <div class="row my-1">
        <div class="col-xs-12">
            <div class="alert alert-danger hidden errors">
                <ul id="errors_list" class="errors_list">
                </ul>
            </div>
            <div class="card ">
                <div class="card-body collapse in">
                    <input type="hidden" id="current_user" value="{{auth()->user()->id}}">
                    <table
                        class="table table-striped table-column noteTable dataex-res-configuration @if(app()->getlocale() == 'ar') ar-language-file @endif" style="width:100%;display: inline-table;">
                        <thead>
                            <tr>
                                <th class="d-none">
                                    {{__('tenant::company.Resolve')}}
                                </th>
                                <th style="width: 20%">
                                    {{__('tenant::company.company name')}}
                                </th>
                                <th style="width: 20%">
                                    {{__('tenant::company.Content')}}
                                </th>
                                <th>
                                    {{__('tenant::company.date')}}
                                </th>
                                <th>
                                    {{__('tenant::company.created by')}}
                                </th>

                                <th class="hidden-print" style="width: 15%">@lang('Actions')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($notes))
                            @foreach($notes as $note)
                            <tr>
                                <td class="d-none">{{$note->resolved}}</td>
                                <td>
                                    <a href="{{route('tenant.activity',$note->company->id)}}">{{ $note->company->name }}</a>
                                </td>
                                <td>{!! str_replace("\r\n","<br>", $note->content) !!}</td>
                                <td>{{ Date::format($note->created_at, 'date') }}</td>
                                <td>{{ $note->createdBy->uname}}</td>
                                <td>
                                    <a href="javascript:void(0)" class="{{ (app()->getLocale() === 'en' ) ? 'float-right' : 'float-left'}} text-danger"
                                     onclick="openDeleteNoteModal({{$note->id}})"><i class="fa fa-trash"></i> {{__('Delete')}}</a>
                                @if(!$note->resolved)
                                    <a href="javascript:void(0)" class="text-success"
                                        onclick="resolveNote({{$note->id}}, 1)"><i class="fa fa-check"></i> {{__('tenant::company.Resolve')}}
                                    </a>
                                @endif
                                </td>
                                @endforeach
                                @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="deleteNoteModal" @if(app()->getLocale() == 'ar') style="right: 35%;" @endif
        tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="background-color: #f9f9f9;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">@lang('Delete')</h4>
            </div>
            <div class="modal-body">
                <p> @lang('Are You Sure to delete this?')
                </p>
            </div>
            <input id="deleted_note_id" value="" type="hidden">
            <div class="modal-footer" @if(app()->getLocale() == 'ar') style="text-align: right;" @endif>
                <button type="button" class="btn btn-default mx-1" data-dismiss="modal">@lang('No')</button>
                <span class="pull-right">
                    <button type="button" onclick="deleteNote(this)" class="btn btn-primary">@lang('Yes')</button>
                </span>
            </div>
        </div>
    </div>
</div>

@endsection
@section('extra_scripts')
<script src="{{url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/picker.time.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/pickadate/legacy.js')}}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/daterange/daterangepicker.js')}}" defer></script>

<script src="{{ asset('assets/js/custom/daterangepicker.js') }}" defer></script>
<script src="{{url('assets/js/vendors/js/pickers/dateTime/picker-date-time.js')}}" defer></script>
<script src="{{ asset('assets/js/sweetalert.min.js') }}" defer></script>
<script src="{{asset('assets/js/custom/amsify-suggestags/amsify-suggestags.js')}}" defer></script>
<script src="{{ asset('assets/js/select2/select2.min.js') }}" defer></script>
<script>

function deleteNote(btn){
    $(btn).attr('disabled', true);
    var noteId = $('#deleted_note_id').val();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: '{{route('tenant.note.delete')}}',
        type: 'POST',
        dataType: "json",
        data: {
            note_id: noteId
        },
        success: function (response) {
            $('#note_added_msg').text('{{__('Item deleted successfully')}}');
            $('#note_added_msg').show().delay(2000).slideUp('slow');

        },
        error: function (xhr, status, error) {
            displayNotesErrors(xhr);
        },
        complete: function (data) {
            $('#deleteNoteModal').modal('hide');
            $(btn).attr('disabled', false);
            location.reload();
        }
    });
}

function resolveNote(noteId, isResolved){
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.ajax({
        url: '{{route('tenant.note.resolve')}}',
        type: 'POST',
        dataType: "json",
        data: {
            note_id: noteId,
            resolved: isResolved
        },
        success: function (response) {
            $('#note_added_msg').text(isResolved? '{{__('tenant::company.note resolves successfully')}}'
                        : '{{__('tenant::company.note unresolves successfully')}}' );
            $('#note_added_msg').show().delay(4000).slideUp('slow');
        },
        error: function (xhr, status, error) {
            displayNotesErrors(xhr);
        },
        complete: function (data) {
            location.reload();
        }
    });
}

function displayNotesErrors(xhr){
    if ("errors" in xhr.responseJSON) {
        $('.note_added_error').removeClass('hidden');
        $('#note_added_error').empty();
        $.each(xhr.responseJSON.errors, function (key, value) {
            $('#note_added_error').append('<li>' + value + '</li>')
        });
    } else {
        $('.note_added_error').removeClass('hidden');
    }
}



function openDeleteNoteModal(note_id){
    $('#deleted_note_id').val(note_id);
    $('#deleteNoteModal').modal('show');
}

window.addEventListener('DOMContentLoaded', function() {
    $(document).ready(function () {
        $('#reset').click(function(e){
            e.preventDefault()
            $('.form-control').prop('selectedIndex',0);
        })
    });

    // handle sorting with not resolved note
    $(document).ready(function() {
      let table = $('.noteTable').DataTable();
        table.column(0).visible(false);
        //table.order([0, 'asc']).draw();
    });
});
</script>
@endsection