@extends('panel.layouts.master')
@section('css')
    <link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/assets/plugins/dropzone/dropzone.min.css" rel="stylesheet">
    <style>
        .dropzone {
            border: 2px dashed rgba(50, 58, 70, .3);
            background: #fff;
            border-radius: 6px;
        }
    </style>
@endsection
@section('content')
    <!-- BEGIN PAGE CONTENT -->
    <div class=" container ">
        <div class="alert alert-custom alert-warning fade show fill" role="alert">
            <div class="alert-text"><strong>
                    افزودن تیکت
                </strong></div>
        </div>
        <div class="row">

            <!-- BEGIN BREADCRUMB -->
            <div class="col-md-12">
                <div class="breadcrumb-box border shadow">
                    <ul class="breadcrumb">
                        <li><a href="dashboard.html">پیشخوان</a></li>
                        <li><a href=""> مشاهده تیکت </a></li>

                    </ul>
                    <div class="breadcrumb-left">
                        {{ jdate()->format('Y-m-d') }}
                        <i class="icon-calendar"></i>
                    </div><!-- /.breadcrumb-left -->
                </div><!-- /.breadcrumb-box -->
            </div><!-- /.col-md-12 -->
            <!-- END BREADCRUMB -->
        </div>
        <div class="row">
            <div class="col-md-8">

                <div class="portlet box border shadow curve">
                    <div class="portlet-heading alert-success">
                        <div class="portlet-title">
                            <h3 class="title">
                                <i class="icon-frame"></i>
                                عنوان تیکت : {{ $ticket->subject }}
                            </h3>
                        </div>

                    </div>
                    <div class="portlet-body">
                        {!! $ticket->content !!}
                        <hr>
                        @foreach ($ticket->audios as $it)
                        <div class="col-md-12 mt-3">
                            @if (file_exists(storage_path('app/ticket/' . $it->file)) && $it->file != '')
                                <audio src="{{ route('panel.ticket.audio', $it->id) }}" controls></audio>
                            @endif

                        </div><!-- /.col-12 -->
                    @endforeach
                        @foreach ($ticket->files as $item)
                            <div class="col-md-2">
                                @if (file_exists(storage_path('app/ticket/' . $item->file)) && $item->file != '')
                                    <a href="{{ route('panel.ticket.download', $item->id) }}" target="_blank"
                                        class="btn btn-success btn-block"> فایل شماره ({{ $loop->index + 1 }})</a>
                                @endif

                            </div><!-- /.col-12 -->
                        @endforeach
                    </div>
                </div>

            </div><!-- /.col-12 -->
            <div class="col-md-4">
                <div class="portlet box border shadow curve">
                    <div class="portlet-heading alert-danger">
                        <div class="portlet-title">
                            <h3 class="title">
                                <i class="icon-frame"></i>
                                مشخصات تیکت
                            </h3>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <span>اولویت : </span><span>{{ $ticket->priority->name }}</span>
                        <br />
                        <span>وضعیت تیکت : </span><span>{{ $ticket->status->name }}</span>
                        <br />
                        <span>دپارتمان : </span><span>{{ $ticket->category->name }}</span>
                        <br />
                        <span>تاریخ ثبت تیکت : </span><span>{{ jdate($ticket->created_at) }}</span>
                    </div>
                </div>

            </div><!-- /.col-12 -->
            <div class="col-lg-12 col-md-12">
                <div class="portlet box border shadow curve">
                    <div class="portlet-heading">
                        <div class="portlet-title">
                            <a class="btn btn-info btn-curve btn-collapse" rel="tooltip" title="ارسال پاسخ" href="">
                                <h3 class="title">
                                    <i class="icon-frame"></i>
                                    ارسال پاسخ
                                </h3>
                            </a>
                        </div>


                    </div>
                    <div class="portlet-body row" style="display: none">
                        <div class="col-md-7">
                            <form action="{{ route('panel.ticket.comment.store', $ticket) }}" method="POST"
                                id="TicketForm">
                                @csrf
                                <div class="form-group">
                                    <label>توضیحات شما </label>
                                    <div class="input-group curve">
                                        <span class="input-group-addon">
                                            <i class="fa fa-ticket fa-2x text-success"></i>
                                        </span>
                                        <textarea name="content" required cols="30" rows="10" class="form-control"></textarea>
                                    </div><!-- /.input-group -->
                                </div><!-- /.form-group -->

                                <div id="controls">
                                    <button id="recordButton" class="btn btn-success curve"><i
                                            class="fa fa-microphone fa-2x"></i></button>

                                    <button id="stopButton" disabled class="btn btn-danger curve"><i
                                            class="fa fa-stop-circle fa-2x"></i></button>
                                </div>
                                <div id="formats">برای ضبط بر روی دکمه <i class="fa fa-microphone fa-2x"></i> کلیک کنید
                                </div>
                                <p><strong>لیست صداهای ضبط شده:</strong></p>
                                <ol id="recordingsList"></ol>


                                <div class="form-actions">
                                    <button type="submit"  id="submit"  class="btn btn-info btn-round">
                                        <i class="fa fa-check fa-2x"></i>
                                        ذخیره
                                    </button>
                                    <a href="/admin/ticket" class="btn btn-warning btn-round">
                                        <i class="fa fa-close fa-2x"></i>
                                        بازگشت

                                    </a>
                                </div><!-- /.form-actions -->


                            </form>
                        </div>
                        <div class="col-md-4">
                            <div class="alert alert-warning border-right"><span>شما میتوانید حداکثر </span> <span
                                    class="text-primary">5</span> <span> تا فایل آپلود کنید</span></div>
                            <div class="alert alert-warning border-right"><span>هر فایل شما نباید بیشتر از </span> <span
                                    class="text-primary">10</span> <span> مگابایت حجم داشته باشد</span></div>
                            <form method="post" action="{{ url('/file/upload') }}" enctype="multipart/form-data"
                                class="dropzone" id="dropzone">
                                @csrf
                                <div class="dz-message needsclick">
                                    <p class="h1 text-muted"><i class="mdi mdi-cloud-upload"></i></p>
                                    <h3>فایل ها را برای آپلود به اینجا بکشید و رها کنید</h3>
                                </div>
                            </form>

                        </div>
                    </div>

                </div>
            </div>
            @foreach ($ticket->comments()->latest()->get() as $item)
                <div class="col-12">
                    <div class="portlet box border shadow curve">
                        <div
                            class="portlet-heading @if ($item->user->type == 'user') alert-info @else alert-warning @endif">
                            <div class="portlet-title">
                                <h3 class="title">
                                    <i class="icon-frame"></i>
                                    {{ $item->user->nf }} <span rel="tooltip"
                                        title="{{ jdate($item->created_at) }} ">({{ jdate($item->created_at)->ago() }})</span>
                                </h3>
                            </div>

                        </div>
                        <div class="portlet-body row">
                            <div class="col-md-12">{!! $item->content !!}</div>
                            <hr>
                            @foreach ($item->audios as $it)
                                <div class="col-md-12 mt-3">
                                    @if (file_exists(storage_path('app/ticket/' . $it->file)) && $it->file != '')
                                        <audio src="{{ route('panel.ticket.audio', $it->id) }}" controls></audio>
                                    @endif

                                </div><!-- /.col-12 -->
                            @endforeach
                            @foreach ($item->files as $it)
                                <div class="col-md-2">
                                    @if (file_exists(storage_path('app/ticket/' . $it->file)) && $it->file != '')
                                        <a href="{{ route('panel.ticket.download', $it->id) }}" target="_blank"
                                            class="btn btn-success btn-block"> فایل شماره ({{ $loop->index + 1 }})</a>
                                    @endif

                                </div><!-- /.col-12 -->
                            @endforeach
                        </div>
                    </div>

                </div><!-- /.col-12 -->
            @endforeach


        </div>


    </div><!-- /#page-content -->
    <!-- END PAGE CONTENT -->
@endsection
@section('js-page')
    <script src="/assets/plugins/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/plugins/select2/dist/js/i18n/fa.js"></script>
    <script src="/assets/js/pages/select2.js"></script>
    <script src="/assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/plugins/jquery-validation/src/localization/messages_fa.js"></script>
    <script src="/assets/js/pages/validation.js"></script>
    <script src="/assets/js/record.js"></script>
    <script src="/assets/js/pages/record.js"></script>
    <!-- include FilePond library -->
    <script src="/assets/plugins/dropzone/dropzone.min.js"></script>

    <!-- include FilePond jQuery adapter -->
    <script type="text/javascript">
        Dropzone.options.dropzone = {
            maxFilesize: 5,
            maxFile: 3,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
                return time + file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.pdf,.zip,.rar",
            addRemoveLinks: true,
            timeout: 5000,
            removedfile: function(file) {
                var name = file.upload.filename;
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    type: 'POST',
                    url: '{{ url('admin/file/upload/delete') }}',
                    data: {
                        filename: name
                    },
                    success: function(data) {
                        console.log("File has been successfully removed!!");
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
                var fileRef;
                return (fileRef = file.previewElement) != null ?
                    fileRef.parentNode.removeChild(file.previewElement) : void 0;
            },

            success: function(file, response) {
                $('#TicketForm')
                    .append('<input type="hidden" name="attach[]" value="' + response.name + '" >')
            },
            error: function(file, response) {
                return false;
            }
        };
    </script>
@endsection