@extends('layouts.dashboard')

@section('title', 'ایجاد تیکت جدید')

@section('content')


<div class="py-5" id="open_ticket">

    <div class="card p-4 p-md-5">
        <div class="text-center mb-5">
            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                <i class="bi bi-plus-circle fs-3"></i>
            </div>
            <h3 class="fw-bold mb-1">ارسال تیکت جدید</h3>
            <p class="text-muted">فرم زیر را پر کنید تا کارشناسان ما در اسرع وقت پاسخگو باشند.</p>
        </div>

        <form action="{{ route('ticket.doOpen') }}" method="POST">
            @csrf
            <!-- ردیف ۱: دپارتمان و اولویت -->
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label for="department" class="form-label">
                        <i class="bi bi-building me-1 text-primary"></i> دپارتمان
                    </label>
                    <select class="form-select" id="department" name="department" required>
                        <option disabled value="">انتخاب کنید...</option>
                        <option value="Support" selected>پشتیبانی فنی</option>
                        <option value="Sale">فروش و مالی</option>
                        <option value="Management">ارتباط با مدیریت</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="priority" class="form-label">
                        <i class="bi bi-flag-fill me-1 text-primary"></i> اولویت
                    </label>
                    <select class="form-select" name="priority" id="priority" required>
                        <option disabled value="">انتخاب کنید...</option>
                        <option value="low">کم</option>
                        <option value="medium" selected>متوسط</option>
                        <option value="high">زیاد / فوری</option>
                    </select>
                </div>
            </div>

            <!-- ردیف ۲: سرویس و موضوع -->
            <div class="mb-4">
                <label for="service" class="form-label">
                    <i class="bi bi-box-seam me-1 text-primary"></i> سرویس / محصول مرتبط
                </label>
                <select class="form-select" name="service" id="service">
                    <option selected value="">انتخاب کنید (اختیاری)</option>
                    @foreach($listServices as $service)
                        <option value="{{ $service->id }}">
                            {{ $service->products->name }} -
                            {{ $service->status_label }} -
                            {{ $service->created_at->format('Y/m/d') }}
                        </option>
                    @endforeach
                </select>
                <div class="form-text text-muted">اگر مشکل مربوط به خرید خاصی است، آن را انتخاب کنید.</div>
            </div>

            <div class="mb-4">
                <label for="subject" class="form-label">
                    <i class="bi bi-card-heading me-1 text-primary"></i> موضوع تیکت
                </label>
                <input type="text" class="form-control" name="subject" id="subject" placeholder="مثال: لینک دانلود محصول کار نمی‌کند" required>
            </div>

            <!-- ردیف ۳: متن پیام -->
            <div class="mb-4">
                <label for="message" class="form-label">
                    <i class="bi bi-chat-text me-1 text-primary"></i> متن پیام
                </label>
                <textarea class="form-control" name="message" id="message" rows="6" placeholder="مشکل خود را با جزئیات شرح دهید..." required></textarea>
            </div>


            <!-- دکمه ارسال -->
            <div class="d-grid">
                <button type="submit" class="btn btn-submit">
                    <i class="bi bi-send-fill me-2"></i> ارسال تیکت
                </button>
            </div>

        </form>
    </div>

    <!-- راهنما -->
    <div class="card p-4 bg-light border-0">
        <h6 class="fw-bold mb-2"><i class="bi bi-lightbulb-fill text-warning me-2"></i>نکات قبل از ارسال تیکت:</h6>
        <ul class="small text-muted mb-0 pe-3">
            <li>لطفاً قبل از ارسال تیکت، بخش سوالات متداول را بررسی کنید.</li>
            <li>اگر مشکل فنی دارید، شماره فاکتور یا نام محصول را حتماً ذکر کنید.</li>
            <li>ارسال تیکت تکراری باعث کاهش سرعت پاسخگویی می‌شود.</li>
        </ul>
    </div>
</div>


@endsection
