@extends('layouts.master')
@section('page_title', (!$nobusiness ? "Business":"")." Tickets")
@section('content')
    <div class="container">
        {{ Form::page_header((!$nobusiness ? "Business":"")." Tickets", "business") }}
        @if(isset($message) && $message)
            <div class="row alert alert-success">
                {{ Form::label_title($message, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
            </div>
        @endif
        @if(\Gate::allows(\App\Providers\AuthServiceProvider::SUPER_ADMIN) && !$nobusiness)
            @foreach($progress_bar_data as $phase => $milestone_data)
                @include('business.ticket._phase_progress',
                ['business' => $business, 'milestones' => $milestone_data['business_milestones'],
                'count' => count($milestone_data['business_milestones']), 'phase' => $phase,
                'bar_size' => $milestone_data['col_size']])
            @endforeach
            <div class="row grid-header">
                {{ Form::button_link('ADD TICKET', action('BusinessTicketController@create_ticket', ['business' => $business]), 'add_btn') }}
            </div>
            @if (sizeof($pinned_tickets) > 0)
                <div class="row">
                    <div class="col-md-12 grey-bg curve_container">
                        {{ Form::label_title('Pinned Tickets', null, null, null, null, 'pinned-label') }}
                        @include('shared.grids._grid_table', ['data' => $pinned_tickets])
                    </div>
                </div>
            @endif
            <div class="row">
                <div class="col-md-12 grey-bg-search curve_container search-container">
                    <form class="row" id="search_form">
                        @include('search._grid_search_filters', ['multiple_row' => true, 'col_width' => 6, 'filters' => [
                        [
                            ['name' => 'assigned_user', 'col_width' => 6, 'list' => $users, 'placeholder' => 'All Users'],
                            ['name' => 'status', 'col_width' => 6, 'list' => \App\Models\Business_Ticket::$business_ticket_status_grid_map, 'placeholder' => 'Any Status'],
                        ],
                        [
                            ['name' => 'ticket_type', 'col_width' => 6, 'list' => \App\Models\Ticket_Type::ticket_type_filter(), 'placeholder' => 'Any Type'],
                            ['name' => 'business_milestone', 'col_width' => 6, 'list' => \App\Queries\BusinessTicketQuery::business_milestone_select($business), 'placeholder' => 'Any Milestone']
                        ],
                        ]])
                        {{ Form::hidden('business', $business->business) }}
                        @include('search._complex_search', ['col_width' => 6])
                        @include('search._complex_search_parameter', ['sort_column' => 'assigned_user'])
                    </form>
                </div>
            </div>
        @else
            <div class="row grid-header">
                {{ Form::button_link('ADD TICKET', action('SuperAdminController@create_ticket'), 'add_btn') }}
            </div>
            <div class="row">
                <div class="col-md-12 grey-bg-search curve_container search-container">
                    <form class="row" id="search_form">
                        @include('search._grid_search_filters', ['col_width' => 6, 'filters' => [
                           ['name' => 'assigned_user', 'col_width' => 3, 'list' => $assigned_filter, 'placeholder' => 'Any User'],
                           ['name' => 'status', 'col_width' => 3, 'list' => \App\Models\Business_Ticket::$business_ticket_status_grid_map, 'placeholder' => 'Any Status'],
                           ['name' => 'ticket_type', 'col_width' => 3, 'list' => \App\Models\Ticket_Type::ticket_type_filter(), 'placeholder' => 'Any Type'],
                           ['name' => 'team', 'col_width' => 3, 'list' => $team_filter, 'placeholder' => 'Any Team'],
                        ]])
                        @include('search._complex_search', ['col_width' => 6])
                        @include('search._complex_search_parameter', ['sort_column' => 'company'])
                    </form>
                </div>
            </div>
        @endif
		@if(\Gate::allows(\App\Providers\AuthServiceProvider::SUPER_ADMIN))
			<div class="row">
				<div class="col-md-12 grey-bg-search curve_container" style="padding:5px 30px; margin-bottom:20px;">
					<div class="row">
						<div class="no-left-pad col-xs-6 col-md-3 search-form-label bt-label-small">Bulk Action</div>
						<div class="no-left-pad col-xs-6 col-md-3 search-form-label bt-label-small">
							<span class="bulk-action-label" id="bulk_action_label_status">Status</span>
							<span class="bulk-action-label hide" id="bulk_action_label_assigned_user">Assign To</span>
							<span class="bulk-action-label hide" id="bulk_action_label_due_date">Due Date</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-6 col-md-3 no-left-pad">
							<select class="bt-input bt-select" id="bulk_action_select" name="bulk_action">
							@foreach ($bulk_actions as $ba_key => $ba_label)
								<option value="{{ $ba_key }}">{{ $ba_label }}</option>
							@endforeach
							</select>
						</div>
						<div class="col-xs-6 col-md-3 no-left-pad">
							<div class="bulk-action-value" id="bulk_action_value_status">
								{{ Form::select_ex('status', null, \App\Models\Business_Ticket::$business_ticket_status_grid_map, 12, null, null, 'bulk_action_input_status') }}
							</div>
							<div class="bulk-action-value hide" id="bulk_action_value_assigned_user">
								{{ Form::select_ex('assigned_user', null, $bulk_assigned_filter, 12, null, null, 'bulk_action_input_assigned_user', 'Select') }}
							</div>
							<div class="bulk-action-value hide" id="bulk_action_value_due_date">
								{{ Form::date_ex('due_date', '', 11, 'bulk_action_input_due_date') }}
							</div>
						</div>
						<div class="no-left-pad col-xs-6 col-md-1">
							<input id="bulk_action_submit" type="button" class="btn btn-xs" value="Submit" dusk="bulk_action_btn">
						</div>
						<div class="no-left-pad col-xs-6 col-md-3">
							<div id="bulk_action_alert" class="alert alert-danger hide">
								<a id="bulk_action_alert_close" href="#" class="close" aria-label="close">&times;</a>
								<span id="bulk_action_alert_message"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		@endif
		<div id="search_grid">
        	@include('search._search_grid_wrapper', compact('column_set'))
		</div>
    </div>
@endsection

@section('page_script')
    @include('shared_script._search_script_render')
    @include('shared_script._dynamic_search_columns')
	@include('shared_script._tickets_checkall_script')
    @include('shared_script._tinymce_init')
	{{ Html::script('/js/moment.min.js') }}
	{{ Html::script('/js/daterangepicker.js') }}
    <script>
        $(document).ready(function () {
			init_daterangepicker('bulk_action_input_due_date');
            subject_line_onclick();
            $('[data-toggle="tooltip"]').tooltip();
            $('.milestone-row').hide();
            $('.phase-title').click(function () {
                $(this).parent().parent().find('.progress').slideToggle();
                $(this).parent().parent().parent().find('.milestone-row').slideToggle();
                flip_wedge($(this).children('img'));
            });
            $('.milestone-ticket-table').hide();

			$('#bulk_action_select').on('change', function(ev) {
				// swap in the label and input values relevant to the bulk action
				ev.preventDefault();
				$('#bulk_action_alert').addClass('hide'); // hide alert in case it was previously opened
				var bulk_action = $(this).val();
				var valueId = '#bulk_action_value_' + bulk_action;
				var labelId = '#bulk_action_label_' + bulk_action;
				$('.bulk-action-value').addClass('hide');
				$('.bulk-action-label').addClass('hide');
				$(labelId).removeClass('hide');
				$(valueId).removeClass('hide');
			});

			$('#bulk_action_alert_close').on('click', function(ev) {
				// handle dismissing alert by hiding it instead of removing it, so it can be reused
				ev.preventDefault();
				$(this).closest('.alert').addClass('hide');
			});

			$('#bulk_action_submit').on('click', function(ev) {
				ev.preventDefault();

				// get the current bulk action
				var bulk_action = $('#bulk_action_select').val();

				// get the bulk action value
				var bulk_action_value = null;
				var inputId = '#bulk_action_input_' + bulk_action;
				var bulk_action_value = $(inputId).val();

				// get the text of the bulk action value (date or string from dropdowns)
				var bulk_value_text = $(inputId).val();
				if (bulk_action == 'status' || bulk_action == 'assigned_user') {
					var findStr = inputId + ' option[value="' + bulk_action_value + '"]';
					bulk_value_text = $(findStr).text();
				}

				// get alert elements
				var alertElem = $('#bulk_action_alert');
				var alertMessage = $('#bulk_action_alert_message');
				alertElem.addClass('hide'); // hide alert in case it was previously opened

				// if there is no value, show error
				if (typeof bulk_action_value == 'undefined' || bulk_action_value == null || bulk_action_value == '') {
					alertMessage.text("No value selected.");
					alertElem.removeClass('hide');
					return false;
				}

				// get the selected tickets
				var checked_items = [];
				$('.checkbox-options').each(function() {
					if ($(this).is(':checked')) {
						checked_items.push($(this).val());
					}
				});

				// if no tickets selected, show error
				if (!checked_items.length) {
					alertMessage.text("No tickets selected.");
					alertElem.removeClass('hide');
					return false;
				}

				// formulate warning message
				var warningMsg = "You are about to change <strong>" + checked_items.length + "</strong> tickets to <strong>";
				if (bulk_action == 'status') {
					warningMsg += "Status";
				} else if (bulk_action == 'assigned_user') {
					warningMsg += "Assigned User";
				} else if (bulk_action == 'due_date') {
					warningMsg += "Due Date";
				}
				warningMsg += " = " + bulk_value_text + ".</strong><br /><br />";
				warningMsg += "Are you sure?";

				// formulate complete function string
				var completeFunc = "bulk_action_complete('" + bulk_action + "', '" + bulk_action_value + "', [" + checked_items + "])";

				// show confirm dialog
				showYesNoModalAlert('Bulk Action', warningMsg, completeFunc);
			});
        });

		function bulk_action_complete(bulk_action, bulk_action_value, checked_items) {
			// close the modal manually, otherwise it lingers on screen until the ajax is done
			$('#modal-alert').modal('hide');

			// get alert elements
			var alertElem = $('#bulk_action_alert');
			var alertMessage = $('#bulk_action_alert_message');

			// convert bulk_action_value back into an integer for the dropdown lists
			if (bulk_action == 'status' || bulk_action == 'assigned_user') {
				bulk_action_value = parseInt(bulk_action_value);
			}

			// complete bulk action after confirm dialog; refresh page on success
			$.ajax({
				type: "POST",
				url: '{{ action('SuperAdminController@bulk_ticket_action') }}',
				data: {
					bulk_action: bulk_action,
					bulk_action_value: bulk_action_value,
					checked_items: checked_items
				},
				success: function (response) {
					if (!response.success) {
						alertMessage.text("An unknown error occurred.");
						alertElem.removeClass('hide');
					} else {
						location.reload();
					}
				},
				error: function (err) {
					console.log(err);
					alertMessage.text("An unknown error occurred.");
					alertElem.removeClass('hide');
				}
			});
		}

        function flip_wedge(selector) {
            var src = selector.attr('src');
            if (src.includes('/wedge_up.png'))
                selector.attr('src', src.replace('/wedge_up.png', '/wedge_down.png'));
            else
                selector.attr('src', src.replace('/wedge_down.png', '/wedge_up.png'));
        }

        @if(!$nobusiness)
        function get_business_milestone_tickets(row, business_milestone) {
            var action = '{{ action('BusinessTicketController@get_business_milestone_tickets', ['business_milestone' => 'XXX']) }}';
            var url = action.replace('XXX', business_milestone);
            var table = $(row).next('div').find('table.table').length;
            if (!table) {
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {business_milestone: business_milestone},
                    success: function (result) {
                        $(row).next('div.milestone-ticket-table').append(result.view);
                        $(row).next('div.milestone-ticket-table').slideToggle();
                        subject_line_onclick();
                        flip_wedge($(row).find('img'));
                    }
                });
            } else {
                $(row).next('div.milestone-ticket-table').slideToggle();
                flip_wedge($(row).find('img'));
            }
        }

        @endif

        function do_after_grid_load() {
            subject_line_onclick();
        }

        function subject_line_onclick() {
            // gives the subject line the onclick of the wedge image
            if ($('.subject-td').length) {
                $('.subject-td').click(function (e) {
                    if ($(e.target).is('td'))
                        $(this).children().trigger('onclick');
                });
            }
        }

        function preview_ticket(pk) {
            var wedge = '#img_' + pk;
            var src = $(wedge).attr('src');
            if ($('#preview_row_' + pk).is(':visible')) {
                $('#preview_' + pk).hide();
                $(wedge).attr('src', src.replace('/wedge_up.png', '/wedge_down.png'));
                tinymce.remove('#issue_readonly_' + pk);
            } else if ($('#preview_' + pk).length) {
                $('#preview_' + pk).show();
                $(wedge).attr('src', src.replace('/wedge_down.png', '/wedge_up.png'));
                tinymce_init('#issue_readonly_' + pk, true);
            } else {
                var parentRow = $(wedge).parents('tr');
                var colspan = parentRow.children('td').length - 2;
                $(wedge).attr('src', src.replace('/wedge_down.png', '/wedge_up.png'));
                $("<tr class='border' id='preview_" + pk + "'></tr>").insertAfter(parentRow);
                $('#preview_' + pk).append($('#preview_row_' + pk).show());
                $('#preview_row_' + pk).prop('colspan', colspan);
                tinymce_init('#issue_readonly_' + pk, true);
            }
        }
    </script>
@endsection
@section('page_style')
	{!! HTML::style('/css/daterangepicker.css') !!}
    {!! HTML::style('/css/daterangepicker_custom.css') !!}
    @include('shared_style._grid_sort_style')
    <style>
		table.table.source-data-table.source-table-responsive.border-table > tbody > tr > td {
            max-width: 150px;
        }

		table.table.source-data-table > thead > tr > th input[type="checkbox"],
		table.table.source-data-table > tbody > tr > td input[type="checkbox"] {
            width: auto;
        }

        table.source-data-table thead tr th {
            font-size: 12px;
        }

        table.source-data-table th.sorts-by span.glyphicon-sort {
            font-size: 12px;
        }

        #pinned-label {
            margin-bottom: 20px;
        }

        .ui-dialog-buttonset .bt-button {
            background-color: transparent;
            border-color: black;
            color: black;
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            font-size: 16px;
        }

        .ui-dialog .ui-dialog-content {
            margin: 0;
            padding: 10px 24px 0px;
        }

        .ui-dialog .ui-dialog-title {
            font-family: 'Open Sans';
            font-weight: 100;
        }

        .ui-dialog .ui-dialog-titlebar-close {
            display: none;
        }

        .mce-content-body {
            background-color: white;
        }

        td.pinned-ticket-btn.text-right {
            width: 80px;
        }

        .preview-title {
            padding-left: 30px;
        }

        .subject-td {
            cursor: pointer;
        }

        .white-bg {
            padding: 20px;
        }

        .phase-progress-overview {
            margin-top: 20px;
        }

        .milestone-progress-overview {
            margin-bottom: 0;
            margin-top: 5px;
        }

        .milestone-row {
            margin: 8px !important;
        }

        .milestone-label {
            margin-left: 10px;
        }

        .milestone-info-row, .phase-title, .milestone-label {
            cursor: pointer;
        }

        .progress-col {
            padding: 0;
        }

        .progress {
            border-radius: 0;
            border: 1px solid #000000;
        }
		.alert {
			margin-bottom: 0;
			padding: 10px 15px;
		}
		.alert .close {
			top: 2px;
			right: 0;
			font-size: 24px;
			text-decoration: none;
		}
    </style>
@endsection