@extends('layouts.master')

@section('content')




        <div class="container">
            <h1>Reseller Dashboard</h1>
        </div>



    <br>
    <div class="row">
        <div class="col-12 col-md-6 col-lg-6 mb-4">
            <a href="#" alt="3CX Telefonanlage jetzt sichern" title="3CX Telefonanlage jetzt sichern" target="_blank">
                <img src="https://cdn.lus.systems/logos/LuS/logo-horizontal_TRANSPARENT.png" class="w-100 img-responsive">
            </a>
        </div>
        <div class="col-12 col-md-6 col-lg-6 mb-4">
            <a href="#" alt="Sehr gute Mollie Konditionen jetzt sichern" title="Sehr gute Mollie Konditionen jetzt sichern" target="_blank">
                <img src="https://cdn.lus.systems/logos/LuS/logo-horizontal_TRANSPARENT.png" class="w-100 img-responsive">
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="card">
                <div class="card-header">
                    Aktuelle Neuigkeiten (letzte 10 Tage)
                </div>
                <div class="panel-body p-3">

                    <div class="margin-t-10">

                        <div class="alert alert-info">Dieses Modul ist noch nicht Aktiv.</div>

                        <div class="text-right">
                            <a href="#" class="inherit-text-color">Alle Neuigkeiten &gt;</a>
                        </div>

                    </div>

                </div>
            </div>
        </div>


        <div class="col-md-6 col-lg-6">
            <div class="card">
                <div class="card-header">
                    Offene Tickets
                    <div class="float-right">
                        <a style="cursor: pointer;" title="Ticket erstellen" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#create">Ticket erstellen</a>
                    </div>
                </div>
                <div class="panel-body p-3">

                    <div class="margin-t-10">

                        <div id="support_table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer"><div class="row"><div class="col-sm-12 col-md-6"><div class="dataTables_length" id="support_table_length"><label><select name="support_table_length" aria-controls="support_table" class="form-control form-control-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select></label></div></div><div class="col-sm-12 col-md-6"><div id="support_table_filter" class="dataTables_filter"><label><input type="search" class="form-control form-control-sm" placeholder="" aria-controls="support_table"></label></div></div></div><div class="row"><div class="col-sm-12"><table id="support_table" class="table table-hover table-bordered dataTable no-footer dtr-inline" style="width: 100%;" role="grid" aria-describedby="support_table_info">
                                        <thead>
                                        <tr role="row">
                                            <th class="sorting" tabindex="0" aria-controls="support_table" rowspan="1" colspan="1" style="width: 105.6px;" aria-label="Titel: aktivieren, um Spalte aufsteigend zu sortieren">Titel</th>
                                            <th class="sorting" tabindex="0" aria-controls="support_table" rowspan="1" colspan="1" style="width: 133.6px;" aria-label="Status: aktivieren, um Spalte aufsteigend zu sortieren">Status</th>
                                            <th class="sorting" tabindex="0" aria-controls="support_table" rowspan="1" colspan="1" style="width: 288.6px;" aria-label="Änderungsdatum: aktivieren, um Spalte aufsteigend zu sortieren">Änderungsdatum</th>
                                            <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;" aria-label="Aktionen">Aktionen</th>
                                        </tr>
                                        </thead>

                                        <tr role="row" class="odd">

                                            <tbody><tr class="odd"><td valign="top" colspan="4" class="dataTables_empty">Keine Daten in der Tabelle vorhanden</td></tr></tbody>

                                    </table><div id="support_table_processing" class="dataTables_processing card" style="display: none;">Bitte warten...</div></div></div><div class="row"><div class="col-sm-12 col-md-5"><div class="dataTables_info" id="support_table_info" role="status" aria-live="polite">0 bis 0 von 0 Einträgen</div></div><div class="col-sm-12 col-md-7"><div class="dataTables_paginate paging_simple_numbers" id="support_table_paginate"><ul class="pagination"><li class="paginate_button page-item previous disabled" id="support_table_previous"><a href="#" aria-controls="support_table" data-dt-idx="0" tabindex="0" class="page-link">Zurück</a></li><li class="paginate_button page-item next disabled" id="support_table_next"><a href="#" aria-controls="support_table" data-dt-idx="1" tabindex="0" class="page-link">Nächste</a></li></ul></div></div></div></div>

                    </div>
                    <script>$.fn.dataTable.ext.errMode = 'none';</script>

                    <script type="text/javascript">
                        let priority;

                        $("#asap_text").hide();

                        function setPriority(){
                            priority = $("#priority").val();
                            if(priority === "ASAP"){
                                $("#asap_text").show();
                            }else{
                                $("#asap_text").hide();
                            }
                        }

                        $(document).ready(function() {
                            var table = $('#support_table').DataTable( {
                                "processing": true,
                                "serverSide": true,
                                "ajax": '#',
                                "language": {
                                    "sEmptyTable":      "Keine Daten in der Tabelle vorhanden",
                                    "sInfo":            "_START_ bis _END_ von _TOTAL_ Einträgen",
                                    "sInfoEmpty":       "0 bis 0 von 0 Einträgen",
                                    "sInfoFiltered":    "(gefiltert von _MAX_ Einträgen)",
                                    "sInfoPostFix":     "",
                                    "sInfoThousands":   ".",
                                    //"sLengthMenu":      "_MENU_ Einträge anzeigen",
                                    "sLengthMenu":      "_MENU_",
                                    "sLoadingRecords":  "Wird geladen...",
                                    "sProcessing":      "Bitte warten...",
                                    //"sSearch":          "Suchen",
                                    "sSearch":          "",
                                    "sZeroRecords":     "Keine Einträge vorhanden.",
                                    "oPaginate": {
                                        "sFirst":       "Erste",
                                        "sPrevious":    "Zurück",
                                        "sNext":        "Nächste",
                                        "sLast":        "Letzte"
                                    },
                                    "oAria": {
                                        "sSortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                                        "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
                                    }
                                },
                                "columns": [
                                    {
                                        data: 'subject',
                                        name: 'subject'
                                    },
                                    {
                                        data: 'department_title',
                                        name: 'department_title'
                                    },
                                    {
                                        data: 'priority',
                                        name: 'priority'
                                    },
                                    {
                                        data: 'status',
                                        name: 'status'
                                    },
                                    {
                                        name: 'updated_at',
                                        data: {
                                            '_': 'updated_at.display',
                                            'sort': 'updated_at.timestamp'
                                        }
                                    },
                                    {
                                        data: "actions",
                                        name: "actions",
                                        orderable: false,
                                        searchable: false
                                    }
                                ],
                                responsive: true,
                                order: [[4, 'desc']]
                            } );
                        } );
                    </script>
                </div>
            </div>
        </div>



        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="create" id="create" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 class="modal-title" id="myLargeModalLabel">Ticket erstellen</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="/reseller/support/ticket/create" enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="dHFaYZKDXlcWckfgZGPkLP7GiMC4fRubnz24QJFx" autocomplete="off">                        <div class="form-group">
                                <label for="department">Abteilung</label>
                                <select name="department" id="department" class="form-control">
                                    <option value="1">Allgemein</option>
                                    <option value="2">Angebotsanfrage</option>
                                    <option value="3">Technik</option>
                                    <option value="4">Buchhaltung</option>
                                    <option value="5">Störung / Ausfall</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="priority">Priorität</label>
                                <select name="priority" id="priority" class="form-control" onchange="setPriority();">
                                    <option value="LOW">Niedrig</option>
                                    <option value="NORMAL" selected>Normal</option>
                                    <option value="HIGH">Hoch</option>
                                    <option value="ASAP">ASAP</option>
                                </select>
                                <br>
                                <div style="margin-bottom: 0;" class="alert alert-warning" id="asap_text">
                                    Die Priorität "ASAP" ist ausschließlich Notfällen vorenthalten, bei denen der Geschäftsbetrieb massiv beeinträchtigt ist.
                                    Ein Missbrauch wird nach tatsächlich angefallenem Aufwand per Remote Hands Preisliste berechnet, mindestens jedoch mit 50 Euro netto.
                                    Die Remote Hands Preisliste finden Sie im Download Bereich. Insofern gesonderte schriftliche Vereinbarungen bestehen, gelten diese vorrangig.
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="subject">Titel</label>
                                <input type="text" name="subject" id="subject" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="message">Nachricht</label>
                                <textarea name="message" id="message" class="form-control form-control" style="width: 100%; height: 200px;"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="files">Dateien</label>
                                <input type="file" id="files" name="files[]" class="form-control-file" multiple>
                            </div>
                            <div class="form-group" style="float: right;">
                                <input style="cursor: pointer;" type="submit" value="Erstellen" class="btn btn-info" onclick="$(this).addClass('disabled').attr('disabled', 'disabled'); this.form.submit();">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection