@extends('layouts.tenant.layout_1.app')

@section('page_css')
    <link href="/assets/css/bootstrap-nav-wizard.min.css" rel="stylesheet" />
    <link href="/metro/vendor/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="/metro/vendor/fullcalendar/css/fullcalendar.min.css">
    <link href="/metro/vendor/summernote/summernote.css" rel="stylesheet">
    <style>
        /* Start Of Full Calendar */
        .fc-toolbar a.fc-button {
            position: relative;
        }

        .fc a.fc-button {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            height: 2.1em;
            padding: 0 0.6em;
            cursor: pointer;

            white-space: nowrap;
            font-size: 1em;
        }

        .fc a.fc-button .fc-icon {
            position: relative;
            top: 0.2em;
            margin: 0 0.2em;
            vertical-align: middle;
        }

        /* End Of Full Calendar */
        #notes_list_wrapper tr:first-child td {
            border-top: 1px solid #dee2e6;
        }

        .nav>li {
            width: {{ 100 / count($stages) }}%;
        }

        .nav>li>a {
            position: relative;
            display: block;
            padding: 10px 10px;
            font-size: 13px;
        }

        .widget-timeline {
            height: auto;
        }

        .btn-custom {
            text-align: left;
            padding: 0px 10px;
            line-height: 30px;
        }

        .btn-custom>.btn-icon-right {
            margin: 0px;
            float: right;
            padding: 0px 0px 0px 10px;
        }

        .form-control.error {
            border-color: #E74C3C;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
        }

        .widget-timeline {
            min-height: 290px !important;
        }
    </style>
@stop

@push('head')
    @livewireStyles
@endpush

@push('body')
    @livewireScripts
@endpush

@include('tenant.leads._show')

@section('page_js')
    <script src="/metro/vendor/moment/moment.min.js"></script>
    <script src="/metro/vendor/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script src="/metro/vendor/jqueryui/js/jquery-ui.min.js"></script>
    <script src="/metro/vendor/fullcalendar/js/fullcalendar.min.js"></script>
    <script src="/metro/vendor/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>
    <script src="/metro/vendor/summernote/js/summernote.min.js"></script>
    <script src="/metro/vendor/jquery-validation/jquery.validate.min.js"></script>
    @if ($current_tab == 'calendar')
        <script>
            ! function(e) {
                "use strict";
                $('#calendar').fullCalendar({
                    events: function(start, end, timezone, callback) {
                        jQuery.ajax({
                            url: "{{ route('tenant.events.fetch', [$row_id, 'lead-data']) }}",
                            type: 'POST',
                            data: {
                                start: start.format(),
                                end: end.format(),
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(result) {
                                var events = [];
                                if (result) {
                                    $.map(result, function(r) {
                                        events.push({
                                            id: r.id,
                                            title: r.title + (r.description != null ? ' - ' + r.description : ''),
                                            start: r.date_start,
                                            end: r.date_end,
                                            description: r.description
                                        });
                                    });
                                }
                                callback(events);
                            }
                        });
                    },
                    defaultView: "month",
                    handleWindowResize: !0,
                    height: e(window).height() - 100,
                    header: {
                        left: "prev,next today",
                        center: "title",
                        right: "month,agendaWeek,agendaDay,listMonth"
                    },
                    eventRender: function(event, element) {

                    },
                    rerenderDelay: 1000,
                });
            }(window.jQuery);
        </script>
    @endif
    <script type="text/javascript">
        $(document).ready(function() {

            var start_date = moment('2020-04-29').format('YYYY-MM-DD');
            var end_date = moment('2020-05-05').format('YYYY-MM-DD');
            var note_editor_html = '<tr id="edit_table_row" class="hidden"><td colspan="2"><div class="row"><div class="col-12">' +
                '<textarea name="edit_comment" class="form-control summernote" placeholder="Add a note.." required></textarea>' +
                '</div></div>' +
                '<div class="row mt-2"><div class="col-12 text-right">' +
                '<button id="btnCancelEditButton" type="button" class="btn btn-sm btn-danger mr-2">Cancel</button>' +
                '<button id="btnUpdateButton" type="button" class="btn btn-sm btn-primary">Update Note</button>' +
                '</div></div>' +
                '</td></tr>';

            $('#eventDate').daterangepicker({
                minDate: new Date(),
                format: 'YYYY-MM-DD',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-danger',
                cancelClass: 'btn-inverse',
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });

            $(".summernote").summernote({
                height: 190,
                minHeight: null,
                maxHeight: null,
                focus: !1
            });

            /** select_source */
            $('select', '#select_source').change(function() {
                if ($(this).val() == 'Other' || $(this).val() == 'Others') {

                    $('#source_input').addClass('required').attr({
                        'name': 'lead_source_input',
                        'required': 'required'
                    }).removeClass('d-none').focus();
                } else {
                    $('#source_input').removeClass('required').removeAttr('name required').addClass('d-none');
                }
                return false;
            });

            /** NOTES */

            $(document).on('click', '#btnNoteTextArea', function(e) {
                $('#btnNoteTextArea').attr('disabled', true);
                $('#btnNoteTextAreaLoading').removeClass('d-none');
                $('#btnNoteTextAreaText').text("Loading");

                var formData = $('form[name=frmAddNewNote]').serialize();
                $.ajax({
                    url: $('form[name=frmAddNewNote]').attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(resp) {
                        $('#btnNoteTextArea').removeAttr('disabled');
                        $('#btnNoteTextAreaLoading').addClass('d-none');
                        $('#btnNoteTextAreaText').text("Add Note");

                        if (resp.code == 1) {
                            // swal("Added!", "Note entry has been added!", "success");
                            swal({
                                title: "Added!",
                                text: "Note entry has been added!",
                                type: "success"
                            });

                            updateLeadsNoteListing();
                            $('.summernote').summernote('reset');

                        } else {
                            swal("Error!!", resp.message, "error");
                        }
                    }
                });
            });

            /** To Delete a Note */
            $(document).on('click', '.btnDeleteNote', function(e) {
                e.preventDefault();

                var target_tr = $(this).closest('tr'),
                    delete_url = $(this).data('delete_url'),
                    holder_id = $(this).data('delete_holder_id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this note entry!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete note entry!",
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.value) {
                        $.ajax({
                            url: delete_url,
                            type: 'POST',
                            data: {
                                'holder_id': holder_id
                            },
                            success: function(resp) {
                                if (resp.code == 1) {
                                    Swal.fire("Deleted!", "Your note entry has been deleted.", "success");
                                    target_tr.fadeOut(function() {
                                        $(this).remove();
                                    });
                                    if ($('.leads-notes-tr').length <= 1) {
                                        $('#no-leads-notes').show();
                                    }
                                } else {
                                    Swal.fire("Error!!", resp.message, "error");
                                }
                            }
                        });
                    } else {
                        Swal.fire("Cancelled!", "Note deletetion was cancelled.", "info");
                    }
                });
            });

            $(document).on('click', '#fetch_now', function() {
                updateLeadsNoteListing();
            });

            /** To Retrieve Note Listing */
            function updateLeadsNoteListing() {
                $.ajax({
                    url: "{{ route('tenant.leads.notes_field_data', $row_id) }}",
                    type: 'POST',
                    success: function(resp) {
                        $('#notes_list_wrapper').prepend('<tr class="leads-notes-tr">' +
                            '<td>' +
                            '<div class="media">' +
                            '<div class="media-body">' +
                            '<div class="row"><div class="col-12 comment_text">' +
                            resp.comment +
                            '</div></div>' +
                            '<div class="row mb-2">' +
                            '<div class="col-6">' +
                            '<small class="text-muted">Entered At: </small>' +
                            '<small class="text-primary">' + resp.created_at + '</small>' +
                            '</div><div class="col-6">' +
                            '<small class="text-muted">Entered By :</small>' +
                            '<small class="text-primary">' + resp.user.given_names + ' ' + resp.user.surname + '</small>' +
                            '</div></div>' +
                            '</div></div>' +
                            '</td>' +
                            '<td width="120" class="text-right" valign="top">' +
                            '<a href="javascript:void(0);" class="btn btn-sm mr-1 btn-danger btnDeleteNote" data-delete_url="' + resp.delete_link + '"><i class="la la-trash-o"></i></a>' +
                            '<a href="javascript:void(0);" class="btn btn-sm btn-primary edit_note" data-edit_url="' + resp.edit_link + '"><i class="la la-pencil"></i></a>' +
                            '</td>' +
                            '</tr>'
                        );
                        if ($('.leads-notes-tr').length > 0) {
                            $('#no-leads-notes').hide();
                        }
                    }
                });
            }

            $(document).on('click', '.edit_note', function(e) {
                var target_tr = $(this).closest('tr'),
                    comment_val = $('.comment_text', target_tr).html(),
                    target_tr_siblings = target_tr.siblings('tr');

                target_tr_siblings.removeClass('active_edit_row');
                $('.edit_note', target_tr_siblings).attr('disabled', 'disabled');

                if ($('#edit_table_row').length > 0) $('#edit_table_row').remove();
                $(note_editor_html).insertAfter(target_tr);

                $('textarea[name=edit_comment]').val(comment_val);
                $('textarea[name=edit_comment]').summernote({
                    height: 190,
                    minHeight: null,
                    maxHeight: null,
                    focus: !1
                });

                target_tr.addClass('active_edit_row').hide().next('tr').removeClass('hidden');
            });

            $(document).on('click', '#btnCancelEditButton', function(e) {
                resetNoteEditor();
            });

            function resetNoteEditor() {
                $('#edit_table_row').remove();
                $('.edit_note').removeAttr('disabled');
                $('.active_edit_row').slideDown(function() {
                    $(this).removeClass('active_edit_row');
                });
            }

            $(document).on('click', '#btnUpdateButton', function(e) {

                var target_tr = $(this).closest('tr'),
                    action_url = $('.edit_note', '.active_edit_row').data('edit_url'),
                    holder_id = $('.edit_note', '.active_edit_row').data('edit_holder_id');

                $.ajax({
                    url: action_url,
                    type: 'POST',
                    data: {
                        'comment': $('textarea[name=edit_comment]', target_tr).val(),
                        'holder_id': holder_id
                    },
                    success: function(resp) {
                        if (resp.code == 1) {
                            swal("Update!", "Note entry has been updated!", "success");
                            $('.comment_text', '.active_edit_row').html(resp.data);
                            resetNoteEditor()
                        } else {
                            swal("Error!!", resp.message, "error");
                        }
                    }
                });
            });

            $('#btnEditButton').click(function(e) {
                var action_url = $(this).data('edit_url');
                $.ajax({
                    url: action_url,
                    type: 'POST',
                    data: {
                        'comment': $('textarea[name=edit_comment]').val()
                    },
                    success: function(resp) {
                        if (resp.code == 1) {
                            swal("Update!", "Note entry has been updated!", "success");
                            updateLeadsNoteListing();
                            $('.summernote').summernote('reset');
                        } else {
                            swal("Error!!", resp.message, "error");
                        }
                    }
                });
            });

            /** End of Delete Note */

            $('#btnCreateNewEvent').click(function(event) {

                var retVal = false,
                    form = $('form[name=frmSendNewEvent]'),
                    formData = form.serialize();

                if (form[0].checkValidity() === false) {

                    event.preventDefault();
                    event.stopPropagation();

                    swal({
                        title: "Error!",
                        text: "Please make sure all marked red fields are filled out!",
                        type: "error",
                        showCancelButton: false,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Ok",
                    });

                } else {

                    form.addClass('was-validated');

                    $.ajax({
                        url: "{{ route('tenant.lms.leads.create_event', [$leads->id, $row_id]) }}",
                        type: 'POST',
                        data: formData,
                        success: function(resp) {
                            if (resp.code == 1) {

                                $('.bd-schedule-meeting-md').modal('hide');
                                $('.bd-schedule-meeting-md').modal('hide');
                                $('input[type=text]', '.bd-schedule-meeting-md').val('');
                                $('select', '.bd-schedule-meeting-md').val('');
                                $('textarea', '.bd-schedule-meeting-md').val('');

                                @if ($current_tab == 'calendar')
                                    //location.reload();
                                @endif

                                swal({
                                    title: "Event Added!",
                                    text: "Event entry has been added!",
                                    type: "success",
                                    showCancelButton: false,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: "Ok",
                                });
                            } else {
                                swal("Error!!", resp.message, "error");
                            }
                        },
                        complete: function(data) {

                        }
                    });
                }
                form.addClass('was-validated');
            });

            $('form[name=frmSendNewMessage]').submit(function(e) {
                e.preventDefault();

                var formData = $(this).serialize();

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(resp) {
                        if (resp.code == 1) {
                            swal({
                                title: "Message Sent!",
                                text: "Your email message has been sent!",
                                type: "success",
                                showCancelButton: false,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "Ok",
                            });
                        } else {
                            swal("Error!!", resp.message, "error");
                        }
                    },
                    complete: function(data) {
                        $('.bd-send-email-md').modal('hide');
                        $('input[type=text]', '.bd-send-email-md').val('');
                        $('select', '.bd-send-email-md').val('');
                        $('textarea', '.bd-send-email-md').val('');
                    }
                });
            });

            /** To Retrieve Activity Listing */
            function getActivityListing() {
                $.ajax({
                    url: "{{ route('tenant.leads.activity_data_view', $row_id) }}",
                    type: 'POST',
                    success: function(resp) {
                        $('#notes_list_wrapper').html(resp);
                    }
                });
            }

        });
    </script>
@stop