@extends('layout.main')
@section('content')
    <section>
        <div class="container-fluid1">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">{{ __('Basic Information') }}</legend>
                                <div class="row">
                                    <div class="d-flex justify-content-between mb-1">
                                        <h6 class="text-muted">{{ __('Ticket Details') }}</h6>
                                        <div class="badge badge-primary"> {{ __($ticket->ticket_status) }} </div>
                                    </div>
                                    <h3 class="mb-3">{{ $ticket->subject }}</h3>
                                    <div class="d-flex justify-content-between">
                                        <div class="text-muted">{{ __('Posted by') }}
                                            {{-- : {{$ticket->employee->first_name.' '.$ticket->employee->last_name}}</div> --}}
                                            : {{ $ticket->full_name }}</div>
                                        <div class="text-muted text-capitalize">{{ trans('file.Priority') }}
                                            : {{ __($ticket->ticket_priority) }}</div>
                                        <div class="text-muted">{{ trans('file.Date') }} :{{ $ticket->created_at }}</div>
                                    </div>
                                </div>

                                <hr>
                                <span id="assigned_result"></span>
                                <form method="post" id="assigned_form" class="form-horizontal">
                                    @csrf
                                    <div class="row mt-3">

                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>{{ __('Assigned to') }} * &nbsp; &nbsp;</label>
                                                <select name="employee_id[]" id="employee_id" class="form-control pre-assigned"
                                                        multiple="multiple"
                                                        title='{{ __('Selecting', ['key' => trans('file.Status')]) }}...'>
                                                    @foreach ($employees as $emp)
                                                        <option value="{{ $emp->id }}">{{ $emp->full_name }}</option>
                                                    @endforeach
                                                </select>
                                                @can('assign-ticket')
                                                    <button type="submit" name="assigned_submit" id="assigned_submit"
                                                            class="btn btn-primary ms-1 mt-2"
                                                            value={{ trans('file.Save') }}>{{ trans('file.Save') }}</button>
                                                @endcan
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </fieldset>
                        </div>
                    </div>
                </div>


                <div class="col-md-12">

                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active text-left" id="details-tab" data-toggle="tab" href="#Details"
                                       role="tab" aria-controls="Details"
                                       aria-selected="true">{{ trans('file.Details') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="comments-tab" data-toggle="tab" href="#Comments" role="tab"
                                       aria-controls="Comments" data-table="comment"
                                       aria-selected="false">{{ trans('file.Comments') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="notes-tab" data-toggle="tab" href="#Notes" role="tab"
                                       aria-controls="Notes" aria-selected="false">{{ trans('file.Notes') }}</a>
                                </li>
                            </ul>
                            <div class="tab-content mt-3" id="myTabContent">
                                <fieldset class="scheduler-border">
                                    <legend class="scheduler-border">{{ __('Basic Information') }}</legend>
                                    <div class="tab-pane fade show active" id="Details" role="tabpanel"
                                         aria-labelledby="details-tab">
                                        <!--Contents for Details starts here-->
                                        <div class="row w-100">
                                            <div class="col-md-10">

                                                <div class="col-md-8">
                                                    <div class="form-group">
                                                        <label><b>{{ trans('file.Description') }}</b></label>
                                                        <br>

                                                        {!! html_entity_decode($ticket->description) !!}

                                                    </div>
                                                </div>

                                                <hr>
                                                <span id="details_result"></span>
                                                <form method="post" id="details_form" class="form-horizontal row">
                                                    @csrf
                                                    <div class="col-md-6 form-group">
                                                        <label>{{ trans('file.Status') }}</label>
                                                        <select name="ticket_status" id="ticket_status"
                                                                class="form-control selectpicker " data-live-search="true"
                                                                data-live-search-style="contains"
                                                                title='{{ __('Selecting', ['key' => trans('file.Status')]) }}...'>
                                                            <option value="open">{{ __('Open') }}</option>
                                                            <option value="closed">{{ __('Closed') }}</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>{{ trans('file.Remarks') }}</label>
                                                            <textarea class="form-control" id="ticket_remarks" name="ticket_remarks" rows="3"></textarea>
                                                        </div>
                                                    </div>


                                                    <div class="col-md-6 form-group">
                                                        <button type="submit" name="details_submit" id="details_submit"
                                                                class="btn btn-primary">{{ trans('file.Save') }}</button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="Comments" role="tabpanel" aria-labelledby="comments-tab">
                                        <div class="row w-100">
                                            <span id="comments_result"></span>
                                            <form method="post" id="comments_form" class="form-horizontal">
                                                @csrf
                                                <div class="form-group">
                                                    <label>{{ trans('file.Comments') }}</label>
                                                    <textarea required class="form-control" id="ticket_comments" name="ticket_comments" rows="3"></textarea>
                                                </div>

                                                <button type="submit" name="comments_submit" id="comments_submit"
                                                        class="btn btn-success">{{ trans('file.Save') }}</button>
                                            </form>
                                            <div class="row mt-5">
                                                <div class="table-responsive">
                                                    <table id="comments-table" class="table ">
                                                        <thead>
                                                        <tr>
                                                            <th>{{ trans('file.User') }}</th>
                                                            <th>{{ trans('file.Comments') }}</th>
                                                            <th class="not-exported text-center">{{ trans('file.Action') }}
                                                            </th>
                                                        </tr>
                                                        </thead>

                                                    </table>
                                                </div>

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

                                    <div class="tab-pane fade" id="Notes" role="tabpanel" aria-labelledby="notes-tab">
                                        <div class="row w-100">
                                            <div class="col-md-10">
                                                <span id="note_result"></span>
                                                <form method="post" id="note_form" class="form-horizontal">
                                                    @csrf
                                                    <div class="col-md-6 form-group">
                                                        <label>{{ __('Ticket Note') }} *</label>
                                                        <input type="text" name="ticket_note" id="ticket_note"
                                                               placeholder="{{ __('Ticket Note') }}"
                                                               value="{{ $ticket->ticket_note ?? '' }}" required
                                                               class="form-control">
                                                    </div>
                                                    <div class="col-md-6 form-group">
                                                        <button type="submit" name="ticket_note_submit"
                                                                id="ticket_note_submit"
                                                                class="btn btn-success">{{ trans('file.Save') }}</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </section>

    <script type="text/javascript">
        (function ($) {
            "use strict";

            let ticket_status = null;
            let ticket_remarks = null;
            let assigned = null;


            $('#ticket_status').val(ticket_status);
            $('#ticket_remarks').html(ticket_remarks);


            $(document).ready(function () {

                $('#employee_id').select2({
                    placeholder: '{{ __('Assign Employee...') }}',
                });
                $('#employee_id').val(assigned);
                $('#employee_id').trigger('change');

                $('#assigned_form').on('submit', function (event) {
                    event.preventDefault();

                    $.ajax({
                        url: "{{ route('tickets.assigned', $ticket) }}",
                        method: "POST",
                        data: new FormData(this),
                        contentType: false,
                        cache: false,
                        processData: false,
                        dataType: "json",
                        success: function (data) {
                            let html = '';
                            if (data.errors) {
                                html = '<div class="alert alert-danger">';
                                for (let count = 0; count < data.errors.length; count++) {
                                    html += '<p>' + data.errors[count] + '</p>';
                                }
                                html += '</div>';
                            }
                            if (data.success) {
                                html = '<div class="alert alert-success">' + data.success +
                                    '</div>';
                            }
                            $('#assigned_result').html(html).slideDown(300).delay(5000)
                                .slideUp(300);
                        }
                    })

                });
            });

            $('#details_form').on('submit', function (event) {
                event.preventDefault();

                $.ajax({
                    url: "{{ route('ticket_details.store', $ticket) }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        let html = '';
                        if (data.errors) {
                            html = '<div class="alert alert-danger">';
                            for (let count = 0; count < data.errors.length; count++) {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if (data.success) {
                            html = '<div class="alert alert-success">' + data.success + '</div>';
                        }
                        $('#details_result').html(html).slideDown(300).delay(5000).slideUp(300);
                        $('#ticket_status').html(data.ticket.status);
                        $('#ticket_remarks').html(data.ticket.ticket_remarks);
                    }
                })
            });

            $('[data-table="comment"]').one('click', function (e) {

                $('#comments-table').DataTable().clear().destroy();

                let table_table = $('#comments-table').DataTable({
                    initComplete: function () {
                        this.api().columns([1]).every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d +
                                    '</option>');
                                $('select').selectpicker('refresh');
                            });
                        });
                    },
                    responsive: true,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('ticket_comments.index', $ticket) }}",
                        method: "post"
                    },

                    columns: [


                        {
                            data: 'user',
                            name: 'user'
                        },
                        {
                            data: null,
                            render: function (data, type, row) {
                                return data.ticket_comments + '<br> (' + data.created_at + ')';
                            }

                        },
                        {
                            data: 'action',
                            name: 'action',
                            orderable: false
                        }
                    ],


                    "order": [],
                    'language': {
                        select: {
                            rows: {
                                _: "{{ __('file.Selected %d rows') }}",
                                0: "{{ __('file.Click a row to select it') }}",
                                1: "{{ __('file.Selected 1 row') }}"
                            }
                        },
                        'zeroRecords': '{{ __('No data available in table') }}',
                        "infoEmpty": '{{ trans('file.Showing') }} 0 - 0 (0)',
                        "infoFiltered": "",
                        'lengthMenu': '_MENU_ {{ __('records per page') }}',
                        "info": '{{ trans('file.Showing') }} _START_ - _END_ (_TOTAL_)',
                        "search": '{{ trans('file.Search') }}',
                        'paginate': {
                            'previous': '{{ trans('file.Previous') }}',
                            'next': '{{ trans('file.Next') }}'
                        }
                    },
                    'columnDefs': [{
                        "orderable": false,
                        'targets': [0, 2],
                    },],

                    'select': {
                        style: 'multi',
                        selector: 'td:first-child'
                    },
                    'lengthMenu': [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                });
                new $.fn.dataTable.FixedHeader(table_table);
            });

            $('#comments_form').on('submit', function (event) {
                event.preventDefault();

                $.ajax({
                    url: "{{ route('ticket_comments.store', $ticket) }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        let html = '';
                        if (data.errors) {
                            html = '<div class="alert alert-danger">';
                            for (let count = 0; count < data.errors.length; count++) {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if (data.success) {
                            html = '<div class="alert alert-success">' + data.success + '</div>';
                            $('#comments_form')[0].reset();
                            $('#comments-table').DataTable().ajax.reload();
                        }
                        $('#comments_result').html(html).slideDown(300).delay(5000).slideUp(300);
                    }
                })
            });

            $('#note_form').on('submit', function (event) {
                event.preventDefault();

                $.ajax({
                    url: "{{ route('ticket_notes.store', $ticket) }}",
                    method: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    dataType: "json",
                    success: function (data) {
                        let html = '';
                        if (data.errors) {
                            html = '<div class="alert alert-danger">';
                            for (let count = 0; count < data.errors.length; count++) {
                                html += '<p>' + data.errors[count] + '</p>';
                            }
                            html += '</div>';
                        }
                        if (data.success) {
                            html = '<div class="alert alert-success">' + data.success + '</div>';
                        }
                        $('#note_result').html(html).slideDown(300).delay(5000).slideUp(300);
                        $('#ticket_note').html(data.ticket.ticket_note);
                    }
                })
            });

            $(document).on('click', '.delete-comment', function () {

                if (confirm('{{ __('Delete Selection', ['key' => trans('file.Comments')]) }}')) {

                    let delete_id = $(this).attr('id');
                    let target = "{{ route('tickets.index') }}/" + delete_id + '/delete_comments';
                    $.ajax({
                        url: target,
                        success: function (data) {
                            let html = '';
                            if (data.success) {
                                html = '<div class="alert alert-success">' + data.success +
                                    '</div>';
                            }
                            if (data.error) {
                                html = '<div class="alert alert-danger">' + data.error + '</div>';
                            }
                            setTimeout(function () {
                                $('#general_result').html(html).slideDown(300).delay(5000)
                                    .slideUp(300);
                                $('#confirmModal').modal('hide');
                                $('#comments-table').DataTable().ajax.reload();
                            }, 2000);
                        }
                    })
                }

            });


        })(jQuery);
    </script>
@endsection