@extends('home.users_profile.layout')

@section('title')
    درخواست پشتیبانی
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('home/css/profile_panel.css') }}">

    <style>
        .header-transparent{
            position: static !important;
            background-color: #222;
        }
        .active {
            color: #0B94F7;
        }

        .UserImage {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        li {
            list-style: none !important;
        }

        #myaccountContent {
            margin-top: 0 !important;
            text-align: right !important;
        }

        .float-right {
            float: right !important;
        }


        .show {
            display: block;
        }

        table {
            font-size: 14px;
        }

        @media screen and (max-width: 800px) {
            table {
                width: 750px;
            }
        }
    </style>
@endsection
@section('script')
    <script>
        $('.mobile-menu-toggle').click(function () {
            $('.loaded').addClass('mmenu-active');
        })
        $('.mobile-menu-close').click(function () {
            $('.loaded').removeClass('mmenu-active');
        })
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a > span.toggle-btn').click(function (e) {
            e.preventDefault();
            $(this).parent().next().slideToggle(300).parent().toggleClass("show");
        })
        $('#mobile_menu_nav').click(function () {
            $('#icon-panel').toggleClass('negative');
            $('#icon-panel').toggleClass('positive');
            $('.negative').html('-');
            $('.positive').html('+');
        })
    </script>
@endsection
@section('content')
    <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">

        <div class="app-container container-xxl d-flex">

            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">
                    <!--begin::Content-->
                    <div id="kt_app_content" class="app-content">
                        <!--begin::محصولات-->
                        <div class="card">
                            <!--begin::کارت body-->
                            <div class="card-body">
                                <!--begin::قالب بندی-->
                                <div class="d-flex flex-column flex-xl-row p-7">
                                    <!--begin::Content-->
                                    <div class="flex-lg-row-fluid me-xl-15 mb-20 mb-xl-0">
                                        <!--begin::تیکت view-->
                                        <div class="mb-0">
                                            <!--begin::Heading-->
                                            <div class="d-flex align-items-center mb-12">
                                                <!--begin::Icon-->
                                                <i class="ki-duotone ki-file-added fs-4qx text-primary ms-n2 me-3">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i>
                                                <div class="d-flex flex-column">
                                                    <!--begin::Title-->
                                                    <h1 class="text-gray-800 fw-semibold">تیکت جدید</h1>
                                                </div>
                                                <!--end::Content-->
                                            </div>

                                            <div class="mb-15">

                                                <form action="{{ route('home.ticket.store') }}" method="post"  enctype="multipart/form-data" class="row mb-7">
                                                    @csrf
                                                    <!--begin::Col-->
                                                    <div class="col-md-4 fv-row mb-3">
                                                        <label class="fs-6 fw-semibold mb-2">عنوان</label>
                                                        <input type="text" class="form-control" name="title" value="{{ old('title') }}">
                                                        @error('title')
                                                        <p class="input-error-validation">{{ $message }}</p>
                                                        @enderror
                                                    </div>


                                                    <div class="col-12 fv-row mb-3">
                                                        <label class="fs-6 fw-semibold mb-2" for="description">توضیحات</label>
                                                        <textarea rows="10" type="text" class="form-control" name="description" id="description">{{ old('description') }}</textarea>
                                                        @error('description')
                                                        <p class="input-error-validation">{{ $message }}</p>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12 fv-row mb-3 mt-3">
                                                        <label class="fs-6 fw-semibold mb-2 ml-5" for="file"> افزودن فایل ضمیمه (عکس، Word و PDF):</label>
                                                        <input type="file" class="custom-file-input form-control" name="file" id="file">
                                                        @error('file')
                                                        <p class="input-error-validation">{{ $message }}</p>
                                                        @enderror
                                                    </div>

                                                    <div class="col-sm-12">
                                                        <button type="submit" class="btn btn-primary">ارسال</button>
                                                    </div>

                                                    <!--end::Col-->
                                                </form>
                                                <!--end::Row-->

                                            </div>


                                            <!--end::Pagination-->
                                        </div>
                                        <!--end::تیکت view-->
                                    </div>

                                </div>
                                <!--end::قالب بندی-->
                            </div>
                            <!--end::کارت body-->
                        </div>

                    </div>
                    <!--end::Content-->
                </div>

            </div>
            <!--end:::اصلی-->
        </div>
        <!--end::Wrapper container-->
    </div>

@endsection