@extends('user.layout.master')
@section('title', 'Support Ticket Messages')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush

@section('content')
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <div class="row">
        {{-- <div class="col-lg-6 grid-margin stretch-card"> --}}
        <div class="col-md-12 grid-margin">

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Support Ticket Messages</h4>
                    <div class="col-md-12">
                        <a class="btn btn-primary message" style="float: right; margin: 5px" data-id="{{ $ticket->user_id }}"
                        data-ticket_id="{{ $ticket->id }}" data-bs-toggle="modal" data-bs-target="#comment">
                            Sent Message
                        </a>
                    </div>
                    <br>
                    <div class="mb-3" style="text-align: center">
                        <label for="ageSelect" class="form-label"></label>
                    </div>
                    
                    <div class="mb-3" style="text-align: center">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title"></h6>
                                
                                {{-- <label for="" class="form-label" style="font-family: sans-serif;">
                                    
                                    Ticket @if (!empty($ticket->title))
                                    {{ $ticket->title }}
                                    of Ticket @if (!empty($ticket->description))
                                        {{ $ticket->description }}
                                    @endif
                                    has been submitted successfully on @if (!empty($ticket->date))
                                        {{ $ticket->date }}
                                    @endif
                                    | @if (!empty($ticket->time))
                                        {{ $ticket->time }}
                                    @endif
                                @endif
                                </label> --}}
                                <br>
                                @foreach ($ticket->support_messages as $msg)
                                    <label for="" class="form-label" style="font-family: sans-serif;">
                                        {{ $msg->message }} 
                                        File |<a href="{{ asset('/uploads/ticket/file/'.$msg->file) }}"
                                            style="height: 50px;width: 50px;">{{ $msg->file }}</a>
                                    </label>
                                    <br>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

     <!-- Modal View Msg -->
     <div class="modal fade" id="comment" tabindex="-1" aria-labelledby="comment" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Sent Message</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{route('user.ticket.msg.process')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="user_id" class="user" value="{{$ticket->user_id}}">
                        <input type="hidden" name="ticket_id" class="ticket" value="{{$ticket->id}}">

                        <div class="mb-3">
                            <h6 class="card-title">Message</h6>
                            <textarea id="name" class="form-control" name="message" type="text" rows="5"
                                cols="50" required>
                            </textarea>
                            <span class="text-danger">{{ $errors->first('message') }}</span>
                        </div>

                        

                        <div class="mb-3">
                            <h6 class="card-title">File</h6>
                            <input id="name" class="form-control" name="file" type="file" required>

                            <span class="text-danger">{{ $errors->first('file') }}</span>
                        </div>
                    </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Sent</button>

                </div>
            </form>
            </div>
        </div>
    </div>
@endsection

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/dropzone/dropzone.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/pickr/themes/classic.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush

@push('plugin-scripts')
    {{-- <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/typeahead-js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/dropzone/dropzone.min.js') }}"></script> --}}
    <script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
    {{-- <script src="{{ asset('assets/plugins/pickr/pickr.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
  <script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script> --}}
@endpush

@push('custom-scripts')
    <script src="{{ asset('assets/js/form-validation.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
    <script src="{{ asset('assets/js/inputmask.js') }}"></script>
    <script src="{{ asset('assets/js/select2.js') }}"></script>
    <script src="{{ asset('assets/js/typeahead.js') }}"></script>
    <script src="{{ asset('assets/js/tags-input.js') }}"></script>
    <script src="{{ asset('assets/js/dropzone.js') }}"></script>
    <script src="{{ asset('assets/js/dropify.js') }}"></script>
    <script src="{{ asset('assets/js/pickr.js') }}"></script>
    <script src="{{ asset('assets/js/flatpickr.js') }}"></script>
    <script>
        $(".chat").on("click", function() {
            var dataId = $(this).attr("data-id");
            $(".gstr1_comment").val(dataId);
            // alert("The data-id of clicked item is: " + dataId);
        });
    </script>
@endpush