@extends('layouts.main_without_top_button')
@section('title')
    LOGISTICS CRM
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">CRM</li>
    </ul>
@stop

@section('contentinner')
    <style>
        .td_left_border {
            border-top: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-bottom: 0;
        }

        .td_border_right {
            border-right: 1px solid #dddddd;
        }

        .widgettitle {
            color: #000000;
        }
    </style>
    <div class="tabbable">
        @include('generals.crm.includes.crm_tab')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            <div class="btn-group">
                                <button onclick="create('{{ route('crm.ticket_form') }}')" class="btn">
                                    <i class="icon-th"></i> &nbsp;New Ticket
                                </button>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->
                <table class="table table-bordered table-striped table-condensed" id="crm_data_table" >
                    <thead>
                    <tr>
                        <th style="width: 8%">Ticket Id</th>
                        <th style="width: 30%">Subject</th>
                        <th style="width: 15%">Date Opened</th>
                        <th style="width: 15%">Last Updated</th>
                        <th style="width: 30%">Opened By</th>
                        <th style="width: 20%">Status</th>
                        <th style="width: 20%"></th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div><!--tabcontent-->
    </div>
    
    
    
    <style>
	    .star-rating {
		    font-size: 0;
		    white-space: nowrap;
		    display: inline-block;
		    /* width: 250px; remove this */
		    height: 50px;
		    overflow: hidden;
		    position: relative;
		    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
		    background-size: contain;
	    }
	    .star-rating i {
		    opacity: 0;
		    position: absolute;
		    left: 0;
		    top: 0;
		    height: 100%;
		    /* width: 20%; remove this */
		    z-index: 1;
		    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
		    background-size: contain;
	    }
	    .star-rating input {
		    -moz-appearance: none;
		    -webkit-appearance: none;
		    opacity: 0;
		    display: inline-block;
		    /* width: 20%; remove this */
		    height: 100%;
		    margin: 0;
		    padding: 0;
		    z-index: 2;
		    position: relative;
	    }
	    .star-rating input:hover + i,
	    .star-rating input:checked + i {
		    opacity: 1;
	    }
	    .star-rating i ~ i {
		    width: 40%;
	    }
	    .star-rating i ~ i ~ i {
		    width: 60%;
	    }
	    .star-rating i ~ i ~ i ~ i {
		    width: 80%;
	    }
	    .star-rating i ~ i ~ i ~ i ~ i {
		    width: 100%;
	    }
	    ::after,
	    ::before {
		    height: 100%;
		    padding: 0;
		    margin: 0;
		    box-sizing: border-box;
		    text-align: center;
		    vertical-align: middle;
	    }
	
	    .star-rating.star-5 {width: 250px;}
	    .star-rating.star-5 input,
	    .star-rating.star-5 i {width: 20%;}
	    .star-rating.star-5 i ~ i {width: 20%;}
	    .star-rating.star-5 i ~ i ~ i {width: 40%;}
	    .star-rating.star-5 i ~ i ~ i ~ i {width: 60%;}
	    .star-rating.star-5 i ~ i ~ i ~ i ~ i {width: 80%;}
	    .star-rating.star-5 i ~ i ~ i ~ i ~ i ~ i {width: 100%;}
	
	    .star-rating.star-3 {width: 150px;}
	    .star-rating.star-3 input,
	    .star-rating.star-3 i {width: 33.33%;}
	    .star-rating.star-3 i ~ i {width: 66.66%;}
	    .star-rating.star-3 i ~ i ~ i {width: 100%;}
    </style>
    
    <script>
        var oTable = jQuery('#crm_data_table').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "lengthMenu": [100, 200, 300],
                "pageLength": 100,
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("crm.data_table") }}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true},
                    {"orderable": true}
                ],
                "bStateSave": true
            });

        function rating(ticket_id) {
        	
        	        var rate = 0;
	        
			        var buttons = jQuery('<div>')
				        .append(createStar());
			 
			        swal({
				        title: "How was your experience getting help with this issue?",
				        html: buttons,
				        showCancelButton: false,
				        showConfirmButton: true,
				        confirmButtonText: "Submit"
			        }).then((result) => {
				        jQuery.ajax({
				        type: "post",
				        url: "{{route('crm.close_ticket')}}",
				        data: {
				        ticket_id: ticket_id,
				        rates: rate
				        },
				        dataType: 'json',
				        beforeSend: function () {
				        startSpinner();
				
				        }, complete: function () {
				        stopSpinner();
				        },
				        success: function (data) {
					        oTable.draw();
				        },
				        error: function (data) {
					        oTable.draw();
				        }
				        })
			        });
	        
	        function createStar() {
		        
		        return $('<span class="star-rating star-5"> ' +
			        '<input type="radio" name="rating" class="rating" value="0"><i></i>' +
			        ' <input type="radio" name="rating" class="rating" value="1"><i></i> ' +
			        '<input type="radio" name="rating" class="rating" value="2"><i></i> ' +
			        '<input type="radio" name="rating" class="rating" value="3"><i></i>' +
			        ' <input type="radio" name="rating" class="rating" value="4"><i></i> ' +
			        ' <input type="radio" name="rating" class="rating" value="5"><i></i> ' +
			        '</span>');
	        }
	
	        jQuery('.rating').each(function () {
		        var rating = jQuery(this);
		        rating.click(function () {
			        rate = rating.val();
		        })
	        })
        }
	    

    </script>
@stop