@extends('front.layouts.master-auth')
@section('content')


    <!-- Start Page Content -->
    <section class="page-content">
        <div class="container">
            <div class="addOffer-page-title">
                <h2 class="addOffer-name">
                    @lang('Open Support Ticket')
                </h2>
            </div>
            <div class="add-work-page">
                <form class="add-work-form" method="post" action="{{route('support.store')}}" enctype="multipart/form-data">
                    @csrf
                    <div class="group-line">
                        <div class="form-group">
                            <label>
                                @lang('Ticket Type') <span style="color: red;">*</span>
                            </label>
                            <select class="form-control" name="support_type_id" required>
                                <option value="">@lang('Select')</option>
                                @foreach($types as $type)
                                    <option value="{{$type->id}}" @if(old('support_type_id') == $type->id) selected @endif>{{getTrans($type->display_name,lang())}}</option>
                                @endforeach
                            </select>
                            @error('support_type_id')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>
                                @lang('Project Link')
                            </label>
                            <input type="url" name="title"  class="form-control" value="{{old('title')}}">
                            @error('title')
                            <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <label>
                            @lang('Body') <span style="color: red;">*</span>
                        </label>
                        <textarea class="form-control" name="body" required>{{old('body')}}</textarea>
                        @error('body')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label>
                            @lang('Attach')
                            <span class="images-max-label">(حتى 5 صور)</span>
                        </label>
                        <small class="form-hint">إرفاق صور توضيحية للمشكلة (اختياري) — بحد أقصى 5 صور</small>
                        <div class="multi-image-zone" id="support-image-zone">
                            <div class="multi-upload-prompt" id="support-upload-prompt">
                                <svg xmlns="http://www.w3.org/2000/svg" width="39.629" height="27.74" viewBox="0 0 39.629 27.74">
                                    <path d="M33.289,14.3A5.951,5.951,0,0,0,27.74,6.213a5.914,5.914,0,0,0-3.3,1,9.908,9.908,0,0,0-18.5,4.941c0,.167.006.334.012.5A8.919,8.919,0,0,0,8.917,29.99H31.7A7.925,7.925,0,0,0,33.289,14.3ZM24.36,18.1H20.31v6.935a.994.994,0,0,1-.991.991H16.347a.994.994,0,0,1-.991-.991V18.1h-4.05a.989.989,0,0,1-.7-1.69l6.526-6.526a.994.994,0,0,1,1.4,0l6.526,6.526a.99.99,0,0,1-.7,1.69Z" transform="translate(0 -2.25)" fill="#393939"/>
                                </svg>
                                <span class="drop-text">اسحب الصور هنا أو اضغط للاختيار</span>
                                <span class="images-counter-badge" id="support-counter-badge">0 / 5</span>
                                <input type="file" name="images[]" id="support-image-input" class="form-control" accept="image/*" multiple>
                            </div>
                            <div class="multi-preview-grid" id="support-preview-grid"></div>
                        </div>
                        @error('images')
                        <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        @foreach($errors->get('images.*') as $msgs)
                            @foreach($msgs as $msg)
                            <div class="alert alert-danger">{{ $msg }}</div>
                            @endforeach
                        @endforeach
                    </div>
                    <button type="submit" class="work-submit">
                        @lang('Open Ticket')
                    </button>
                </form>
                <div class="add-work-img">
                    <div class="project-side-info">
                        <h3 class="project-side-info__title">نحن هنا لمساعدتك!</h3>
                        <p class="project-side-info__sub">افتح تذكرة دعم واشرح مشكلتك بالتفصيل حتى نتمكن من تقديم أفضل حل لك</p>
                        <ul class="project-side-info__list">
                            <li><span class="psi-check">✓</span> رد سريع خلال 24 ساعة</li>
                            <li><span class="psi-check">✓</span> فريق دعم متخصص</li>
                            <li><span class="psi-check">✓</span> تتبع حالة تذكرتك</li>
                            <li><span class="psi-check">✓</span> إرفاق الملفات والصور</li>
                        </ul>
                    </div>
                    <div class="rocket-img">
                        <img src="{{asset('front/images/contact.png')}}" class="img-fluid" loading="lazy" decoding="async">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Page Content -->

    <style>
        .form-hint {
            display: block;
            font-size: 12px;
            color: #888;
            margin-bottom: 6px;
        }
        .multi-image-zone {
            border: 2px dashed #ddd;
            border-radius: 8px;
            overflow: hidden;
            transition: border-color .2s;
            min-height: 129px;
        }
        .multi-image-zone.drag-over {
            border-color: #1dbf73;
            background: #f0fdf6;
        }
        .multi-upload-prompt {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            cursor: pointer;
            position: relative;
            gap: 6px;
        }
        .multi-upload-prompt .drop-text {
            font-size: 14px;
            color: #555;
        }
        .multi-upload-prompt input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        .multi-preview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 8px;
            padding: 0 12px 12px;
        }
        .multi-preview-grid:empty { display: none; }
        .preview-thumb {
            position: relative;
            aspect-ratio: 1;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid #eee;
        }
        .preview-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .preview-thumb .remove-thumb {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(220,53,69,.85);
            color: #fff;
            border: none;
            font-size: 13px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .images-max-label {
            font-size: 12px;
            color: #888;
            font-weight: normal;
        }
        .images-counter-badge {
            background: #f0f0f0;
            border-radius: 20px;
            padding: 2px 10px;
            font-size: 12px;
            color: #555;
        }
        .images-counter-badge.full {
            background: #fff3cd;
            color: #856404;
        }
    </style>

@endsection

@section('js-body')
<script>
(function() {
    var zone          = document.getElementById('support-image-zone');
    var input         = document.getElementById('support-image-input');
    var grid          = document.getElementById('support-preview-grid');
    var prompt        = document.getElementById('support-upload-prompt');
    var counterBadge  = document.getElementById('support-counter-badge');

    if (!zone || !input) return;

    var MAX_SIZE    = 4 * 1024 * 1024;
    var MAX_IMAGES  = 5;
    var ALLOWED     = ['image/jpeg','image/png','image/jpg','image/webp'];
    var selectedFiles = [];

    function showError(msg) {
        zone.closest('.form-group').querySelectorAll('.js-support-img-error').forEach(function(el){ el.remove(); });
        var div = document.createElement('div');
        div.className = 'alert alert-danger js-support-img-error';
        div.textContent = msg;
        zone.closest('.form-group').appendChild(div);
    }

    function clearError() {
        zone.closest('.form-group').querySelectorAll('.js-support-img-error').forEach(function(el){ el.remove(); });
    }

    function updateCounter() {
        var n = selectedFiles.length;
        counterBadge.textContent = n + ' / ' + MAX_IMAGES;
        counterBadge.classList.toggle('full', n >= MAX_IMAGES);
        prompt.style.display = n >= MAX_IMAGES ? 'none' : 'flex';
    }

    function syncInputFiles() {
        var dt = new DataTransfer();
        selectedFiles.forEach(function(f) { dt.items.add(f); });
        input.files = dt.files;
    }

    function addPreviewThumb(file, index) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var thumb = document.createElement('div');
            thumb.className = 'preview-thumb';
            thumb.dataset.index = index;
            thumb.innerHTML =
                '<img src="' + e.target.result + '" alt="معاينة">' +
                '<button type="button" class="remove-thumb" title="حذف">&times;</button>';
            thumb.querySelector('.remove-thumb').addEventListener('click', function() {
                selectedFiles.splice(parseInt(thumb.dataset.index), 1);
                renderPreviews();
                syncInputFiles();
                updateCounter();
                clearError();
            });
            grid.appendChild(thumb);
        };
        reader.readAsDataURL(file);
    }

    function renderPreviews() {
        grid.innerHTML = '';
        selectedFiles.forEach(function(file, i) {
            addPreviewThumb(file, i);
        });
        updateCounter();
    }

    function addFiles(files) {
        clearError();
        var remaining = MAX_IMAGES - selectedFiles.length;
        if (remaining <= 0) {
            showError('وصلت للحد الأقصى (' + MAX_IMAGES + ' صور).');
            return;
        }
        var added = 0;
        for (var i = 0; i < files.length && added < remaining; i++) {
            var file = files[i];
            if (!ALLOWED.includes(file.type)) {
                showError('صيغة الصورة غير مدعومة. الصيغ المسموحة: jpeg, png, jpg, webp');
                continue;
            }
            if (file.size > MAX_SIZE) {
                showError('حجم الصورة (' + (file.size / (1024*1024)).toFixed(1) + ' MB) يتجاوز الحد المسموح (4 MB)');
                continue;
            }
            selectedFiles.push(file);
            added++;
        }
        if (files.length > remaining) {
            showError('تم اختيار أول ' + remaining + ' صورة فقط. الحد الأقصى ' + MAX_IMAGES + ' صور.');
        }
        renderPreviews();
        syncInputFiles();
    }

    input.addEventListener('change', function() {
        if (this.files && this.files.length) addFiles(Array.from(this.files));
        this.value = '';
        syncInputFiles();
    });

    zone.addEventListener('dragover',  function(e){ e.preventDefault(); zone.classList.add('drag-over'); });
    zone.addEventListener('dragleave', function(e){ e.preventDefault(); zone.classList.remove('drag-over'); });
    zone.addEventListener('drop', function(e) {
        e.preventDefault();
        zone.classList.remove('drag-over');
        if (e.dataTransfer.files.length) addFiles(Array.from(e.dataTransfer.files));
    });

    document.querySelector('.add-work-form').addEventListener('submit', function() {
        syncInputFiles();
    });

    updateCounter();
})();
</script>
@endsection