@extends('merchant.layout')

@section('title','Create Support Ticket')

@section('content')

<style>
/* ===== Ticket Create UI ===== */
.ticket-card {
    border-radius:14px;
    border:1px solid #e5e7eb;
    transition:.25s;
    cursor:pointer;
}
.ticket-card:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.ticket-card.active {
    border-color:#f97316;
    background:rgba(249,115,22,.05);
}

/* Dropzone */
.dropzone {
    border:2px dashed #cbd5f5;
    border-radius:14px;
    padding:30px;
    text-align:center;
    transition:.3s;
}
.dropzone.dragover {
    background:#f8fafc;
    border-color:#f97316;
}
.preview-img {
    max-height:120px;
    border-radius:10px;
    margin-top:12px;
}
</style>

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xl-8">

            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">Create Support Ticket</h5>
                </div>

                <div class="card-body">

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

                    <form method="POST"
                          action="{{ route('merchant.tickets.store') }}"
                          enctype="multipart/form-data">
                        @csrf

                        {{-- SUBJECT --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">Subject</label>
                            <input type="text"
                                   name="subject"
                                   class="form-control form-control-lg"
                                   placeholder="Brief summary of the issue"
                                   required>
                        </div>

                        {{-- PRIORITY SELECT --}}
                        <label class="form-label fw-semibold mb-2">Priority</label>
                        <div class="row g-3 mb-4">

                            <input type="hidden" name="priority" id="priorityInput" required>

                            <div class="col-md-4">
                                <div class="ticket-card p-3 text-center"
                                     onclick="selectPriority('low', this)">
                                    <i class="bi bi-info-circle fs-2 text-secondary"></i>
                                    <h6 class="mt-2 mb-0">Low</h6>
                                    <small class="text-muted">General inquiry</small>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="ticket-card p-3 text-center"
                                     onclick="selectPriority('high', this)">
                                    <i class="bi bi-exclamation-circle fs-2 text-warning"></i>
                                    <h6 class="mt-2 mb-0">High</h6>
                                    <small class="text-muted">Business impact</small>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="ticket-card p-3 text-center"
                                     onclick="selectPriority('emergency', this)">
                                    <i class="bi bi-exclamation-triangle fs-2 text-danger"></i>
                                    <h6 class="mt-2 mb-0">Emergency</h6>
                                    <small class="text-muted">Service outage</small>
                                </div>
                            </div>

                        </div>

                        {{-- MESSAGE --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">Message</label>
                            <textarea name="message"
                                      rows="6"
                                      class="form-control"
                                      placeholder="Describe the issue in detail"
                                      required></textarea>
                        </div>

                        {{-- ATTACHMENT --}}
                        <div class="mb-4">
                            <label class="form-label fw-semibold">Attachment (optional)</label>

                            <div class="dropzone" id="dropzone">
                                <i class="bi bi-cloud-upload fs-2 text-muted"></i>
                                <p class="mb-1">Drag & drop image here</p>
                                <small class="text-muted">or click to browse</small>

                                <input type="file"
                                       name="attachment"
                                       id="fileInput"
                                       accept="image/*"
                                       hidden>
                                <img id="preview" class="preview-img d-none">
                            </div>
                        </div>

                        {{-- ACTION --}}
                        <div class="text-end">
                            <a href="{{ route('merchant.tickets.index') }}"
                               class="btn btn-outline-secondary">
                                Cancel
                            </a>
                            <button class="btn btn-primary px-4">
                                Submit Ticket
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>
</div>

<script>
/* Priority */
function selectPriority(value, el) {
    document.getElementById('priorityInput').value = value;
    document.querySelectorAll('.ticket-card').forEach(c => c.classList.remove('active'));
    el.classList.add('active');
}

/* Dropzone */
const dropzone = document.getElementById('dropzone');
const input = document.getElementById('fileInput');
const preview = document.getElementById('preview');

dropzone.addEventListener('click', () => input.click());

dropzone.addEventListener('dragover', e => {
    e.preventDefault();
    dropzone.classList.add('dragover');
});

dropzone.addEventListener('dragleave', () => dropzone.classList.remove('dragover'));

dropzone.addEventListener('drop', e => {
    e.preventDefault();
    dropzone.classList.remove('dragover');
    input.files = e.dataTransfer.files;
    showPreview();
});

input.addEventListener('change', showPreview);

function showPreview() {
    const file = input.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = e => {
        preview.src = e.target.result;
        preview.classList.remove('d-none');
    };
    reader.readAsDataURL(file);
}
</script>

@endsection