@extends('layouts.app')

@section('style')
    <style>
        .error {
            color: red;
        }
    </style>
@endsection
@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-xxl" data-bs-backdrop='static'>
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show mt-2">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <!--begin::Card-->
        <div class="card">
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bolder fs-3 mb-1">Tickets</span>
                </h3>
                <div class="card-title">
                    <a href="{{ route('tickets.create') }}" class="btn btn-sm fw-bold btn-primary mx-1">New
                        Ticket</a>
                </div>
            </div>
            <div class="card-body py-4">
                <form class="kt-form" action="{{ route('tickets.store') }}" name="tickets_post_form" id="tickets_post_form"
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('POST')

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="subject" class="form-label">Subject</label>
                                <input type="text" name="subject" id="subject"
                                    class="form-control form-control-lg mb-3 mb-lg-0 update_seo"
                                    value="{{ old('subject') }}" required />
                                @error('subject')
                                    <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="message" class="form-label">Message</label>
                                <textarea type="text" rows="3" name="message" id="message" class="form-control form-control-lg mb-3 mb-lg-0"
                                    rows="4" required>{{ old('message') }}</textarea>
                                @error('message')
                                    <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <!--<div class="col-lg-12">
                            <div class="form-group py-3">
                                <label for="attachment" class="form-label">Attachment</label>
                                <input type="file" name="attachment" id="attachment"
                                    class="form-control form-control-lg mb-3 mb-lg-0" required />
                                @error('attachment')
                                    <span class="error text-danger" aria-hidden="true">{{ $message }}</span>
                                @enderror
                            </div>
                        </div> -->
                    </div>
                    <button type="submit" class="btn btn-primary">Create Ticket</button>
                </form>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
@endsection

@section('script')
    <script>
        $("#tickets_post_form").validate({
            rules: {
                subject: {
                    required: true
                },
                message: {
                    required: true
                },
            }
        });
    </script>
@endsection