@extends('modules.head') @section('contenido')
<div class="box-header">
    @if(Auth::user()->rol_id == 1 || Auth::user()->rol_id == 9)
    <a class="auxiliar" href="{{url('/reminders/report')}}">
        <button type="button" class="btn  pull-left btnAux">
            <i class="fa fa-file"></i>@lang('messages.inventory_report')
        </button>
    </a>
    @endif
</div>
<div class="add_reminder_btn_container">
    <span class="btn btnAdd" data-toggle="modal" data-target="#addReminderModal"><i class="fa fa-plus" aria-hidden="true"></i> New reminder</span>
</div>
<div class="reminder_container">
    <div class="box-body table-responsive" id='reminders_table_container'>
        <table id="reminders_table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Title</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Description</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Date</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Priority</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="addReminderModal" tabindex="-1" role="dialog" aria-labelledby="addReminderModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="add_reminder_container">
                    <div class="form-group">
                        <input type="text" class="form-control" id="reminder_title" placeholder="Add title">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" id="reminder_description" rows="3" placeholder="Add description"></textarea>
                    </div>
                    <div class="form-group">
                        <input class="form-control" id="reminder_datepicker" data-date-format="mm/dd/yyyy" value="" placeholder="Choose date">
                    </div>
                    <div class="form-group" id="reminder_priority">
                        <label class="form-check-label" for="reminder_priority">Choose priority</label>
                        @foreach($priorities as $priority)
                        <div class="form-check-inline">
                            <input class="form-check-input" type="radio" name="reminder_priority" value="{{ $priority->id }}" />
                            <label class="form-check-label" for="reminder_priority">{{ $priority->name }}</label>
                        </div>
                        @endforeach
                    </div>
                    <button id="save_reminder_btn" class="btn btnBox">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<style type="text/css">
body:not(.modal-open){
  padding-right: 0px !important;
}
.reminder_container {clear: both;}
.reminder_container>div {margin-bottom: 10px;}
.add_reminder_container {background-color: #fff;padding: 30px 20px;border-radius: 8px;}
#reminder_title,#reminder_description,#reminder_datepicker {border-top: 0px solid;border-right: 0px solid;border-left: 0px solid;font-size: 17px;}
#reminder_priority {margin-left: 15px;opacity: 0.7;}
#reminder_priority label {font-size: 17px;}
.btn.btnAdd { float: right; margin: 0 0 30px;}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        // activating datepicker
        $('#reminder_datepicker').datepicker({
            format: 'mm/dd/yyyy',
            startDate: '0d'
        });

        // checking all fields before sending data to server
        function isDataReadyToBeSent(title, description, date, priority) {
            if (title.trim() && description.trim() && date != "Invalid Date" && priority) {
                return true;
            }
            return false;
        }
        // when clicking add reminder
        $('#save_reminder_btn').click(function() {
            let reminder_title = $('#reminder_title').val();
            let reminder_description = $('#reminder_description').val();
            let reminder_date = $("#reminder_datepicker").datepicker("getDate");
            let reminder_priority = $('input[name=reminder_priority]:checked').val();

            if (isDataReadyToBeSent(reminder_title, reminder_description, reminder_date, reminder_priority)) {
                let formatted_date = $.datepicker.formatDate('yy-mm-dd', reminder_date);
                let data = {
                    title: reminder_title,
                    description: reminder_description,
                    date: formatted_date,
                    priority: reminder_priority,
                }
                $.ajax({
                    type: 'post',
                    url: '/business-developer/save-reminder',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    data: data,
                    success: function(r) {
                        if (r.status) {

                            swal({
                                title: 'Success!',
                                text: 'The reminder was created.',
                                icon: 'success'
                            }).then(function() {
                                location.reload();
                            })
                        } else {
                            swal({
                                title: 'Something went wrong',
                                text: 'The reminder could not be created.',
                                icon: 'error'
                            })
                        }
                    }
                })
            } else {
                swal({
                    title: 'Alert',
                    text: 'All the fields are required.',
                    icon: 'info'
                })
            }
        })

        //when clicking fa-trash to delete a reminder
        $('#reminders_table').on('click', 'td.delete-column i', function(e) {
            let id = e.target.dataset.id;
            swal({
                title: 'Are you sure?',
                text: "You won't be able to revert this.",
                icon: 'info',
                buttons: {
                    confirm: {
                        text: 'Yes, delete it!',
                        className: 'btn btn-primary'
                    },
                    cancel: {
                        visible: true,
                        className: 'btn btn-danger'
                    }
                }
            }).then(function(val) {
                if (val) {
                    $.ajax({
                        type: 'post',
                        url: `/business-developer/discard-reminder/${id}`,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function(r) {
                            if (r.status) {
                                swal({
                                    title: 'Success!',
                                    text: 'The reminder was discarded.',
                                    icon: 'success'
                                }).then(function() {
                                    location.reload();
                                })
                            } else {
                                swal({
                                    title: 'Something went wrong',
                                    text: 'The reminder could not be discarded.',
                                    icon: 'error'
                                })
                            }
                        }
                    })
                }
            })
        });

        // table logic showing reminders
        $('#reminders_table thead tr')
            .clone(true)
            .addClass('filters')
            .prependTo('#reminders_table thead');

        $('#reminders_table thead tr:first-child > th').css('background-color', "rgb(236 243 249)");
        $("#reminders_table").dataTable().fnDestroy();
        _table = $('#reminders_table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "order": [],
            "language": {
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: {
                url: '/business-developer/get-all-reminders',
            },
            columns: [{
                    data: 'title',
                    name: 'title',
                    render: (data, type, row) => {
                        if (row.ref_id) {
                            return `<span style="font-weight:bold;">${data.slice(0, 13)}<a target="blank" href="/${row.table_id}/edit/${row.ref_id}">${data.slice(13)}<a/></span>`;
                        } else {
                            return `<span style="font-weight:bold;">${data}</span>`;
                        }
                    }
                },
                {
                    data: 'description',
                    name: 'description',
                },
                {
                    data: 'date',
                    name: 'date',
                    render: (data, type, row) => {
                        return data;
                    }
                },
                {
                    data: 'priority',
                    name: 'priority.name',
                    render: (data, type, row) => {
                        if (data.name == "High") {
                            return `<span style="color: red;"><i class="fa fa-chevron-up"></i> ${data.name}</span>`;
                        } else if (data.name == "Medium") {
                            return `<span style="color: orange;"><i class="fa fa-minus"></i> ${data.name}</span>`;
                        } else {
                            return `<span style="color: blue;"><i class="fa fa-chevron-down"></i> ${data.name}</span>`;
                        }

                    }
                },
                {
                    data: 'id',
                    name: 'id',
                    render: (data, type, row) => {
                        return `<i class='fa fa-trash iconMini' style="color:red;" data-id="${data}"></i>`;
                    }
                },

            ],
            columnDefs: [{
                targets: 4,
                className: 'delete-column',
            }],
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: addFiltersForDataTable
        });
    });
</script>
@endsection