@extends('layout.mainlayout')
@section('content')

<div class="page-wrapper cardhead">
    <div class="content container-fluid">

        @component('components.breadcrumb')
            @slot('title')
                Create Ticket
            @endslot
        @endcomponent

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row g-3">
            <div class="col-xl-8">
                <div class="card ticket-create-card">
                    <div class="card-header border-0 pb-0">
                        <h4 class="mb-1">New Support Ticket</h4>
                        <p class="text-muted mb-0">Share complete details for faster resolution.</p>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('tickets.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="section-title">Requester Info</div>
                            <div class="mb-3">
                                <label class="form-label">Employee</label>
                                <input type="text" class="form-control"
                                       value="{{ $user->name }} ({{ $user->email }})" disabled>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Phone</label>
                                <div class="row g-2">
                                    <div class="col-md-5">
                                        <select name="country_code" id="country_code" class="form-control select2">
                                            @foreach (config('country_codes') as $c)
                                                <option value="{{ $c['dial_code'] }}"
                                                    {{ old('country_code', '+91') == $c['dial_code'] ? 'selected' : '' }}>
                                                    {{ $c['name'] }} ({{ $c['dial_code'] }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-7">
                                        <input type="text" name="user_phone" class="form-control"
                                               placeholder="Enter phone number" value="{{ old('user_phone') }}">
                                    </div>
                                </div>
                            </div>

                            <div class="section-title">Ticket Context</div>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">Location</label>
                                    <select name="location_id" class="form-control select2">
                                        <option value="">Select Location</option>
                                        @foreach ($locations as $loc)
                                            <option value="{{ $loc->id }}" @selected(old('location_id') == $loc->id)>
                                                {{ $loc->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Project</label>
                                    <select name="project_id" class="form-control select2">
                                        <option value="">Select Project</option>
                                        @foreach ($projects as $p)
                                            <option value="{{ $p->id }}" @selected(old('project_id') == $p->id)>
                                                {{ $p->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Concern Department <span class="text-danger">*</span></label>
                                    <select name="department_id" class="form-control select2" required>
                                        <option value="">Select Department</option>
                                        @foreach ($departments as $d)
                                            <option value="{{ $d->id }}" @selected(old('department_id') == $d->id)>
                                                {{ $d->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="section-title">Issue Details</div>
                            <div class="mb-3">
                                <label class="form-label">Subject <span class="text-danger">*</span></label>
                                <input type="text" name="subject" class="form-control"
                                       value="{{ old('subject') }}" maxlength="255" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Details <span class="text-danger">*</span></label>
                                <textarea name="details" rows="6" class="form-control" required>{{ old('details') }}</textarea>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Attachment (optional)</label>
                                <input type="file" name="attachment" class="form-control">
                                <small class="text-muted">Allowed: max 5 MB</small>
                            </div>

                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('tickets.index') }}" class="btn btn-light">Cancel</a>
                                <button class="btn btn-primary px-4">Submit Ticket</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card ticket-help-card">
                    <div class="card-body">
                        <h5 class="mb-3">Tips for Quick Resolution</h5>
                        <ul class="mb-0 ps-3">
                            <li class="mb-2">Use a clear and specific subject line.</li>
                            <li class="mb-2">Mention exact error, screen, or process step.</li>
                            <li class="mb-2">Attach screenshot/document if relevant.</li>
                            <li>Choose the correct department for faster routing.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#country_code').select2({
        placeholder: 'Select Country Code',
        width: '100%'
    });

    $('select[name="location_id"], select[name="project_id"], select[name="department_id"]').select2({
        width: '100%'
    });
});
</script>
@endpush

@push('styles')
<style>
.ticket-create-card,
.ticket-help-card {
    border: 0;
    box-shadow: 0 8px 28px rgba(17, 24, 39, 0.08);
    border-radius: 14px;
}
.section-title {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 12px;
}
</style>
@endpush