@extends('layouts.app')

@section('title', 'Yeni Talep – ' . $category['label'])

@section('content')
    <div class="container-fluid pd-portal-page" data-force-full-nav>

        <div class="pd-hero pd-hero--sm">
            <div class="pd-hero-bg"></div>
            <div class="pd-hero-content">
                <nav class="pd-breadcrumb">
                    <a href="{{ route('admin.marketing.destek') }}">Pazarlama Destek</a>
                    <span>/</span>
                    <a
                        href="{{ route('admin.marketing.destek.category', ['category' => $category['key']]) }}">{{ $category['label'] }}</a>
                    <span>/</span>
                    <span>Yeni Talep</span>
                </nav>
                <h1 class="pd-hero-title">Yeni Talep Oluştur</h1>
            </div>
        </div>

        <div class="pd-section">
            <div class="row justify-content-center">
                <div class="col-lg-8">

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

                    <form action="{{ route('admin.marketing.destek.store') }}" method="POST" enctype="multipart/form-data"
                        class="pd-create-form">
                        @csrf

                        {{-- Kategori (hidden) --}}
                        <input type="hidden" name="category_key" value="{{ $category['key'] }}">

                        {{-- Talep Türü --}}
                        <div class="pd-form-card">
                            <div class="pd-form-card-header">
                                <div class="pd-form-card-icon"><i class="{{ $category['icon'] }}"></i></div>
                                <div>
                                    <div class="pd-form-card-label">Kategori</div>
                                    <div class="pd-form-card-value">{{ $category['label'] }}</div>
                                </div>
                            </div>

                            <div class="pd-field">
                                <label class="pd-label" for="request_type">Talep Türü <span
                                        class="text-danger">*</span></label>
                                <select class="form-select @error('request_type') is-invalid @enderror" name="request_type"
                                    id="request_type" required>
                                    <option value="">Seçiniz...</option>
                                    @foreach ($category['types'] as $t)
                                        <option value="{{ $t }}" {{ (old('request_type', $typeQuery) === $t) ? 'selected' : '' }}>
                                            {{ $t }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('request_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        {{-- Talep Detayları --}}
                        <div class="pd-form-card">
                            <div class="pd-form-section-title">Talep Detayları</div>

                            <div class="pd-field">
                                <label class="pd-label" for="summary">Başlık / Özet <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="summary" id="summary"
                                    class="form-control @error('summary') is-invalid @enderror" value="{{ old('summary') }}"
                                    placeholder="Talebi kısaca özetleyin..." required maxlength="400">
                                @error('summary')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="pd-field">
                                <label class="pd-label" for="description">Açıklama</label>
                                <textarea name="description" id="description" rows="6"
                                    class="form-control @error('description') is-invalid @enderror"
                                    placeholder="İş kapsamı, hedef kitle, özel istekler gibi detayları giriniz...">{{ old('description') }}</textarea>
                                @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        {{-- Öncelik ve Termin --}}
                        <div class="pd-form-card">
                            <div class="pd-form-section-title">Öncelik & Süre</div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="pd-field">
                                        <label class="pd-label">Öncelik <span class="text-danger">*</span></label>
                                        <div class="pd-priority-group">
                                            @foreach (['low' => ['Düşük', 'bi-arrow-down', 'text-info'], 'medium' => ['Orta', 'bi-dash', 'text-warning'], 'high' => ['Yüksek', 'bi-arrow-up', 'text-danger'], 'critical' => ['Kritik', 'bi-arrow-up-circle-fill', 'text-danger']] as $pv => [$pl, $pi, $pc])
                                                <label
                                                    class="pd-priority-opt {{ old('priority', 'medium') === $pv ? 'pd-priority-opt--active' : '' }}">
                                                    <input type="radio" name="priority" value="{{ $pv }}" {{ old('priority', 'medium') === $pv ? 'checked' : '' }}>
                                                    <i class="bi {{ $pi }} {{ $pc }}"></i>
                                                    <span>{{ $pl }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                        @error('priority')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="pd-field">
                                        <label class="pd-label" for="termin_date">Termin Tarihi</label>
                                        <input type="date" name="termin_date" id="termin_date"
                                            class="form-control @error('termin_date') is-invalid @enderror"
                                            value="{{ old('termin_date') }}" min="{{ now()->format('Y-m-d') }}" required>
                                        @error('termin_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Dosya Ekleri --}}
                        <div class="pd-form-card">
                            <div class="pd-form-section-title">Belgeler</div>
                            <p class="pd-hint">İlgili tüm belgeleri (brief, görseller, referans dosyalar) buraya yükleyin.
                            </p>

                            <div class="pd-dropzone" id="pd-dropzone">
                                <div class="pd-dropzone-inner">
                                    <i class="bi bi-cloud-arrow-up pd-dropzone-icon"></i>
                                    <div class="pd-dropzone-text">Dosyaları buraya sürükleyin veya tıklayın</div>
                                    <div class="pd-dropzone-hint">PDF, Word, Excel, PNG, JPG, ZIP – Maks. 20 MB/dosya</div>
                                </div>
                                <input type="file" name="attachments[]" id="pd-file-input" multiple
                                    accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.webp,.zip,.rar"
                                    style="position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;">
                            </div>
                            <div id="pd-file-list" class="pd-file-list"></div>
                        </div>

                        {{-- Butonlar --}}
                        <div class="d-flex gap-2 justify-content-end">
                            <a href="{{ route('admin.marketing.destek.category', ['category' => $category['key']]) }}"
                                class="btn btn-outline-secondary">İptal</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send me-1"></i>Talep Oluştur
                            </button>
                        </div>
                    </form>

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

    </div>
@endsection

@push('styles')
    <style>
        :root {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
        }

        .pd-portal-page {
            background: #f4f7fc;
            min-height: 100vh;
            padding-bottom: 3rem;
        }

        .pd-portal-page .btn-primary {
            background: var(--pd-green);
            border-color: var(--pd-green);
            color: #fff;
        }

        .pd-portal-page .btn-primary:hover,
        .pd-portal-page .btn-primary:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
            color: #fff;
        }

        .pd-portal-page .btn-outline-secondary {
            color: var(--pd-green-dark);
            border-color: #c8ddd4;
            background: #fff;
        }

        .pd-portal-page .btn-outline-secondary:hover,
        .pd-portal-page .btn-outline-secondary:focus {
            color: var(--pd-green-dark);
            border-color: #afcfc1;
            background: var(--pd-green-light);
        }

        .pd-hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #0d3b2d 0%, #145a46 60%, #1a7a5e 100%);
            padding: 2rem 2rem 2.5rem;
            margin-bottom: 2rem;
            border-radius: 0 0 2rem 2rem;
        }

        .pd-hero--sm {
            padding: 1.5rem 2rem 2rem;
        }

        .pd-hero-bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, .07) 0%, transparent 55%);
            pointer-events: none;
        }

        .pd-hero-content {
            position: relative;
        }

        .pd-breadcrumb {
            font-size: .8rem;
            color: rgba(255, 255, 255, .6);
            margin-bottom: .5rem;
        }

        .pd-breadcrumb a {
            color: rgba(255, 255, 255, .75);
            text-decoration: none;
        }

        .pd-breadcrumb a:hover {
            color: #fff;
        }

        .pd-breadcrumb span {
            margin: 0 .4rem;
        }

        .pd-hero-title {
            font-size: 1.4rem;
            font-weight: 800;
            color: #fff;
            margin: 0;
        }

        .pd-section {
            padding: 0 1.5rem;
        }

        /* Form cards */
        .pd-form-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .pd-form-card-header {
            display: flex;
            align-items: center;
            gap: .85rem;
            margin-bottom: 1.25rem;
        }

        .pd-form-card-icon {
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            border-radius: .75rem;
            background: var(--pd-green-light);
            color: var(--pd-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .pd-form-card-label {
            font-size: .75rem;
            color: #64748b;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .pd-form-card-value {
            font-weight: 700;
            color: #0f172a;
        }

        .pd-form-section-title {
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 1rem;
        }

        .pd-field {
            margin-bottom: 1rem;
        }

        .pd-label {
            font-size: .85rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: .35rem;
            display: block;
        }

        .pd-hint {
            font-size: .82rem;
            color: #64748b;
            margin-bottom: .75rem;
        }

        /* Priority */
        .pd-priority-group {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
        }

        .pd-priority-opt {
            display: flex;
            align-items: center;
            gap: .35rem;
            border: 1.5px solid #e2e8f0;
            border-radius: .6rem;
            padding: .4rem .8rem;
            cursor: pointer;
            font-size: .85rem;
            font-weight: 600;
            transition: border-color .15s ease, background .15s ease;
        }

        .pd-priority-opt input {
            display: none;
        }

        .pd-priority-opt:hover {
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }

        .pd-priority-opt--active {
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }

        /* Dropzone */
        .pd-dropzone {
            position: relative;
            border: 2px dashed #cbd5e1;
            border-radius: .75rem;
            padding: 2rem;
            text-align: center;
            transition: border-color .2s ease, background .2s ease;
            background: #f8fafc;
            cursor: pointer;
        }

        .pd-dropzone:hover,
        .pd-dropzone.drag-over {
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }

        .pd-dropzone-icon {
            font-size: 2.5rem;
            color: #94a3b8;
            display: block;
            margin-bottom: .5rem;
        }

        .pd-dropzone:hover .pd-dropzone-icon {
            color: var(--pd-green);
        }

        .pd-dropzone-text {
            font-weight: 600;
            color: #374151;
        }

        .pd-dropzone-hint {
            font-size: .8rem;
            color: #94a3b8;
            margin-top: .25rem;
        }

        /* File list */
        .pd-file-list {
            display: flex;
            flex-direction: column;
            gap: .4rem;
            margin-top: .6rem;
        }

        .pd-file-item {
            display: flex;
            align-items: center;
            gap: .6rem;
            padding: .4rem .65rem;
            border: 1px solid #e2e8f0;
            border-radius: .5rem;
            background: #fff;
            font-size: .82rem;
            color: #374151;
        }

        .pd-file-item i {
            color: var(--pd-green);
        }

        .pd-file-item-name {
            flex: 1 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pd-file-item-size {
            color: #94a3b8;
            white-space: nowrap;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            // Priority toggle
            document.querySelectorAll('.pd-priority-opt').forEach(function (label) {
                label.addEventListener('click', function () {
                    document.querySelectorAll('.pd-priority-opt').forEach(function (l) { l.classList.remove('pd-priority-opt--active'); });
                    label.classList.add('pd-priority-opt--active');
                });
            });

            // File input
            var input = document.getElementById('pd-file-input');
            var list = document.getElementById('pd-file-list');
            var zone = document.getElementById('pd-dropzone');

            function formatSize(bytes) {
                if (bytes < 1024) return bytes + ' B';
                if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
                return (bytes / 1048576).toFixed(1) + ' MB';
            }

            function renderFiles(files) {
                list.innerHTML = '';
                Array.from(files).forEach(function (f) {
                    var div = document.createElement('div');
                    div.className = 'pd-file-item';
                    div.innerHTML = '<i class="bi bi-paperclip"></i><span class="pd-file-item-name">' + f.name + '</span><span class="pd-file-item-size">' + formatSize(f.size) + '</span>';
                    list.appendChild(div);
                });
            }

            if (input) {
                input.addEventListener('change', function () { renderFiles(this.files); });
            }

            if (zone) {
                zone.addEventListener('dragover', function (e) { e.preventDefault(); zone.classList.add('drag-over'); });
                zone.addEventListener('dragleave', function () { zone.classList.remove('drag-over'); });
                zone.addEventListener('drop', function (e) {
                    e.preventDefault();
                    zone.classList.remove('drag-over');
                    if (e.dataTransfer && e.dataTransfer.files.length) {
                        input.files = e.dataTransfer.files;
                        renderFiles(e.dataTransfer.files);
                    }
                });
            }
        })();
    </script>
@endpush