@extends('admin.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 id="page-content">
        <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="/admin/ticket">تیکت</a></li>
                        <li class="active"> {{ $title }} </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 class="col-12">
                <div class="portlet box border shadow">
                    <div class="portlet-heading">
                        <div class="portlet-title">
                            <h3 class="title">
                                <i class="fa fa-ticket-plus fa-2x text-danger"></i>
                                {{ $title }}
                            </h3>
                        </div><!-- /.portlet-title -->
                        <div class="buttons-box">
                            <a class="btn btn-sm btn-default btn-round btn-fullscreen" rel="tooltip" title="تمام صفحه"
                                href="#">
                                <i class="icon-size-fullscreen"></i>
                            </a>
                            <a class="btn btn-sm btn-default btn-round btn-collapse" rel="tooltip" title="کوچک کردن"
                                href="#">
                                <i class="icon-arrow-up"></i>
                            </a>
                        </div><!-- /.buttons-box -->
                    </div><!-- /.portlet-heading -->
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-lg-6">
                                @if ($errors->any())
                                    @foreach ($errors->all() as $error)
                                        <div class="alert alert-danger fill  fade show">
                                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                                aria-label="Close"></button>
                                            {{ $error }}
                                        </div>
                                    @endforeach
                                @endif
                                <form role="form" action="{{ $action }}" method="POST" id="TicketForm">
                                    @csrf
                                    @if (isset($ticket->id))
                                        @method('PUT')
                                    @endif
                                    <div class="form-body">
                                        <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>
                                                <input type="text" name="name" class="form-control" placeholder="">
                                            </div><!-- /.input-group -->
                                        </div><!-- /.form-group -->
                                        <div class="form-group">
                                            <label>نام مشتری</label>

                                            <div class="input-group curve">

                                                <select class="form-control curve select2" id="useritem" name="user_id">
                                                    @foreach ($users as $item)
                                                        <option value="{{ $item->id }}">{{ $item->nf }}</option>
                                                    @endforeach
                                                </select>

                                            </div><!-- /.input-group -->
                                        </div><!-- /.form-group -->

                                        <div class="form-group">
                                            <label> دپارتمان</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-check-square-o fa-2x text-success"></i>
                                                </span>
                                                <select class="form-select" name="category_id">
                                                    @foreach ($category as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div><!-- /.input-group -->
                                        </div>
                                        <div class="form-group">
                                            <label> اولویت</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-id-card-o fa-2x text-success"></i>
                                                </span>
                                                <select class="form-select" name="priority_id">
                                                    @foreach ($priority as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div><!-- /.input-group -->
                                        </div>
                                        <div class="form-group">
                                            <label>وضعیت تیکت</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-check-square-o fa-2x text-success"></i>
                                                </span>
                                                <select class="form-select" name="status_id">
                                                    @foreach ($statuses as $item)
                                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div><!-- /.input-group -->
                                        </div>

                                        <div class="form-group">
                                            <label>متن تیکت</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-map-marker fa-2x text-success"></i>
                                                </span>
                                                <textarea class="form-control" name="content" rows="5"></textarea>
                                            </div><!-- /.input-group -->
                                        </div><!-- /.form-group -->
                                    </div><!-- /.form-body -->
                                    <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-lg-6">
                                <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><!-- /.portlet-body -->
                </div><!-- /.portlet -->
            </div><!-- /.col-12 -->
        </div><!-- /.row -->
    </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