@extends('bootstrap.layouts.app')

@section('content')

    <div class="wrapper-content">
        <div class="wrapper-content__header">
        </div>
        <div class="wrapper-content__body">
            <!-- Main variables *content* -->
            <div id="block_88">
                <div class="block-bg"></div>
                <div class="container">
                    <div class="ticket-form">
                        <div class="row ticket-form__alignment">
                            <div class="col-lg-12">
                                <div class="component_card">
                                    <div class="card">
                                        @if (isset($pageContent) &&
                                                !is_null($pageContent) &&
                                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
                                            <div class="my-4 well">
                                                {!! $pageContent->page_content_top !!}
                                            </div>
                                        @endif
                                        <form class="kt-form" class="component_form_group" method="post"
                                            action="{{ route('tickets.store') }}" name="tickets_post_form"
                                            id="tickets_post_form" enctype="multipart/form-data">
                                            @csrf
                                            @method('POST')
                                            <div class="">
                                                <div class="alert alert-dismissible alert-danger ticket-danger"
                                                    style="display: none">
                                                    <button type="button" class="close">&times;</button>
                                                    <div></div>
                                                </div>
                                            </div>
                                            <div class="">
                                                <div class="form-group">
                                                    <label>Subject</label>
                                                    <input class="form-control" name="subject" id="subject"
                                                        class="form-control form-control-lg mb-3 mb-lg-0 update_seo"
                                                        value="{{ old('subject') }}" required>
                                                    @error('subject')
                                                        <span class="error text-danger"
                                                            aria-hidden="true">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <label>Message</label>
                                                    <textarea type="text" rows="3" name="message" id="message" class="form-control form-control-lg mb-3 mb-lg-0"
                                                        rows="4" required>{{ old('message') }}</textarea>
                                                    @error('message')
                                                        <span class="error text-danger"
                                                            aria-hidden="true">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <div class="tickets-uploader" data-rtl="false"
                                                        data-lang-button-attach="Attach files"
                                                        data-lang-file-format-incorrect="Invalid file format"
                                                        data-lang-file-size-incorrect="File is too large (limit 5 MB)">
                                                    </div>
                                                </div>
                                                <input type="hidden" name="_csrf"
                                                    value="748XCaOKQqTpjW7eODphl2_vHIW09o7ySPp3IYJJMO2F2WIkm7kK66rOBqcAAxDkIJ5O4PDD_aUEnAVRwS5dsg==">
                                            </div>
                                            <div class="component_button_submit">
                                                <div class="">
                                                    <button class="btn btn-block btn-big-primary" type="submit">
                                                        Submit ticket
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="block_96">
                <div class="block-bg"></div>
                <div class="container">
                    <div class="tickets-list">
                        <div class="row tickets-list__alignment">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="tickets-list__margin-search component_card">
                                            <div class="card">
                                                <div class="component_form_group">
                                                    <div class="">
                                                        <form action="/tickets" method="get" id="history-search">
                                                            <div class="input-group">
                                                                <input onkeyup="searchData();" type="text" id="searchTicket" name="search" class="form-control"
                                                                    value="" placeholder="Search">
                                                                <div class="input-group-append component_button_search">
                                                                    <button class="btn btn-big-secondary" type="submit">
                                                                        <span class="fas fa-search"></span>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="tickets-list__margin-table">
                                            <div class="table-bg component_table ">
                                                <div class="table-wr table-responsive">
                                                    <table class="table">
                                                        <thead>
                                                            <tr>
                                                                <th>ID</th>
                                                                <th>Subject</th>
                                                                <th>Status</th>
                                                                <th class="nowrap">Last update</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="ticketsData">
                                                            @if (!empty($tickets))
                                                                @foreach ($tickets as $ticket)
                                                                    <tr>
                                                                        <td>{{ $ticket->ticket_id }}</td>
                                                                        <td><a
                                                                                href="{{ url('tickets/chat/') . '/' . $ticket->ticket_id }}"><strong>{{ $ticket->subject }}</strong></a>
                                                                        </td>
                                                                        <td>{{ $ticket->status }}</td>
                                                                        <td>{{ $ticket->lastupdate_time }}</td>
                                                                    </tr>
                                                                @endforeach
                                                            @endif
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <nav class="component_pagination">
                                            <div class="">
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (isset($pageContent) &&
                                !is_null($pageContent) &&
                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'bottom'))
                            <div class="my-4 well">
                                {!! $pageContent->page_content_bottom !!}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Notifications wrapper -->
    <div id="notify-wrapper" class="alert alert-success mb-3 hidden" style="display: none;"></div>



@endsection
@section('script')
    <script>
        function searchData() {
            var search_query = $('#searchTicket').val();
            $.ajax({
                url: "{{ url('/') }}/search-tickets",
                data: {
                    "search_query": search_query
                },
                success: function(result) {
                    $("#ticketsData").html('');
                    var html = '';
                    $.each(result.data, function(k, v) {
                        html += '<tr><td>' + v.ticket_id + '</td><td>' + v.subject + '</td><td>' +
                            v.status + '</td><td>' + v.lastupdate_time + '</td></tr>';
                    });
                    $("#ticketsData").html(html);
                }
            });
        }
    </script>
@endsection