@extends('layouts.site.master')
@section('panel-add-ticket',true)
@section('content')
    <div class="container">
        <div class="row mx-0 mt-md-5 mt-0 w-100">
            @include('site.panel.sidebar')
            <div class="col-md-9 col-12 p-2">
                <div class="p-2 shadow-sm bg-white main-radius">
                    <div class="p-2 pb-0 d-flex justify-content-between mb-2">
                        <p class="bold side-title position-relative max-w">
                            افزودن تیکت
                        </p>
                    </div>
                    <form action="{{route('panel.ticket.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                        <div class="row m-0 w-100">
                            <div class="col-md-4 col-sm-6 col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    موضوع تیکت
                                </label>
                                <div class="position-relative">
                                    <input name="subject" class="w-100 main-radius border login-input font-13"
                                           placeholder="مثلا: مشکل در باز شدن پاپ اپ ها" type="text">
                                </div>
                            </div>
                            {{--                    <div class="col-md-4 col-sm-6 col-12 p-2">--}}
                            {{--                        <label class="text-start w-100 font-14 mb-1 dark-gray light">--}}
                            {{--                            دپارتمان--}}
                            {{--                        </label>--}}
                            {{--                        <div class="position-relative">--}}
                            {{--                            <select class="login-input font-13 pointer border main-radius dark-gray w-100" id="exampleSelect">--}}
                            {{--                                <option value="1">طراحی سایت</option>--}}
                            {{--                                <option value="2">پشتیبانی</option>--}}
                            {{--                            </select>--}}
                            {{--                            <img width="9" class="position-absolute top-0 bottom-0 end-0 my-auto me-2" src="{{asset('assets/site/img/menu-chevron.svg')}}" alt="">--}}
                            {{--                        </div>--}}
                            {{--                    </div>--}}
                            <div class="col-md-4 col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    بارگزاری فایل <span class="mint-green">(اختیاری)</span>
                                </label>
                                <div id="upload-area"
                                     class="login-input light limit-1 border font-13 main-radius bg-white text-center pointer">
                                    برای بارگزاری <span class="mint-green semi">فایل</span> کلیک کنید
                                </div>

                                <input name="attachment" type="file" id="file-input" style="display: none;">
                            </div>
                            <div class="col-12 p-2">
                                <label class="text-start w-100 font-14 mb-1 dark-gray light">
                                    توضیحات تیکت
                                </label>
                                <textarea placeholder="نوشتن توضیحات..." name="message" rows="3"
                                          class="w-100 main-radius border login-input font-13" id=""></textarea>
                            </div>
                            <div class="col-md-3 col-12 p-2 pt-0 ms-auto">
                                <button class="first-page-btn-component w-100 d-flex justify-content-center py-2 font-14 text-white main-radius btn-dark-gray"
                                   type="submit">
                                    افزودن
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const uploadArea = document.getElementById('upload-area');
            const fileInput = document.getElementById('file-input');

            // وقتی روی دیو کلیک شد، ورودی فایل را فعال کن
            uploadArea.addEventListener('click', function () {
                fileInput.click();
            });

            // وقتی فایلی انتخاب شد
            fileInput.addEventListener('change', function () {
                if (this.files && this.files.length > 0) {
                    // متن دیو را به نام فایل تغییر بده
                    uploadArea.innerText = this.files[0].name;
                    uploadArea.classList.add("kam-sabz");
                }
            });
        });
    </script>
@endsection