@extends('agency.layouts.app')

@section('title', 'Yeni Aktivite – ' . $customer->full_name)
@section('page_title', 'Yeni Aktivite')

@push('styles')
<style>
:root {
    --cp:#6366f1; --cp-light:#eef2ff;
    --text-main:#0f172a; --text-muted:#64748b; --border:#f1f5f9;
}

.form-wrap { max-width:880px; margin:0 auto; }

.form-card {
    background:#fff; border-radius:16px; border:1px solid var(--border);
    box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:1.25rem; overflow:hidden;
}
.form-section-header {
    display:flex; align-items:center; gap:.85rem;
    padding:1rem 1.5rem; border-bottom:1px solid var(--border);
    background:linear-gradient(to right,#fafbff,#fff);
}
.form-section-icon {
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.form-section-title { font-size:.9rem; font-weight:700; color:var(--text-main); }
.form-section-body { padding:1.5rem; }

.fg-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.fg-1 { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(max-width:640px) { .fg-2, .fg-3 { grid-template-columns:1fr; } }

.field-group { display:flex; flex-direction:column; gap:.35rem; }
.field-label { font-size:.78rem; font-weight:600; color:#475569; }
.field-label .req { color:#ef4444; margin-left:2px; }
.field-input {
    border:1.5px solid #e2e8f0; border-radius:10px; padding:.55rem .85rem;
    font-size:.87rem; color:var(--text-main); background:#fafbff;
    outline:none; transition:border .2s, box-shadow .2s; width:100%;
}
.field-input:focus { border-color:var(--cp); box-shadow:0 0 0 3px rgba(99,102,241,.1); background:#fff; }
.field-error { border-color:#ef4444 !important; }
.field-help { font-size:.74rem; color:#94a3b8; }
.error-msg { font-size:.76rem; color:#ef4444; }

/* Aktivite tipi seçici */
.type-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.6rem; }
.type-btn {
    position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem;
    padding:.85rem .5rem; border-radius:12px; border:2px solid #e2e8f0;
    background:#fafbff; cursor:pointer; transition:all .2s; text-align:center;
}
.type-btn:hover { border-color:#c7d2fe; background:#eef2ff; }
.type-btn.selected { border-color:var(--cp); background:var(--cp-light); }
.type-btn input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.type-icon { font-size:1.4rem; }
.type-label { font-size:.74rem; font-weight:600; color:var(--text-muted); }
.type-btn.selected .type-label { color:var(--cp); }

/* Toggle switch */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid #f8fafc; }
.toggle-row:last-child { border-bottom:none; }
.toggle-lbl { font-size:.84rem; font-weight:600; color:var(--text-main); }
.toggle-desc { font-size:.74rem; color:var(--text-muted); }
.toggle-switch { position:relative; width:46px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
    position:absolute; inset:0; background:#e2e8f0; border-radius:999px; cursor:pointer;
    transition:.3s;
}
.toggle-slider:before {
    content:''; position:absolute; left:2px; bottom:2px;
    width:20px; height:20px; background:#fff; border-radius:50%; transition:.3s;
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background:var(--cp); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }

/* Form footer */
.form-footer {
    background:#fff; border-radius:16px; border:1px solid var(--border);
    padding:1.25rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* Conditional panels */
.cond-panel { display:none; }
.cond-panel.show { display:block; }
</style>
@endpush

@section('content')
<div class="container-fluid">

{{-- Breadcrumb --}}
<div class="d-flex align-items-center gap-2 mb-3" style="font-size:.83rem;color:#94a3b8">
    <a href="{{ route('agency.customers.index') }}" style="color:#6366f1;text-decoration:none;font-weight:600"><i class="fas fa-users me-1"></i>Müşteriler</a>
    <i class="fas fa-chevron-right" style="font-size:10px"></i>
    <a href="{{ route('agency.customers.show', $customer) }}" style="color:#6366f1;text-decoration:none;font-weight:600">{{ $customer->full_name }}</a>
    <i class="fas fa-chevron-right" style="font-size:10px"></i>
    <a href="{{ route('agency.customers.activities.index', $customer) }}" style="color:#6366f1;text-decoration:none;font-weight:600">Aktiviteler</a>
    <i class="fas fa-chevron-right" style="font-size:10px"></i>
    <span style="color:#0f172a;font-weight:600">Yeni Aktivite</span>
</div>

@if($errors->any())
    <div class="alert alert-danger border-0 shadow-sm mb-3" style="border-radius:12px;font-size:.85rem">
        <ul class="mb-0 ps-3">@foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach</ul>
    </div>
@endif

<form method="POST" action="{{ route('agency.customers.activities.store', $customer) }}" id="actForm">
@csrf

<div class="form-wrap">

{{-- ── Aktivite Tipi ───────────────────── --}}
<div class="form-card">
    <div class="form-section-header">
        <div class="form-section-icon" style="background:#eef2ff;color:#6366f1"><i class="fas fa-tag"></i></div>
        <div class="form-section-title">Aktivite Türü <span style="color:#ef4444">*</span></div>
    </div>
    <div class="form-section-body">
        <div class="type-picker">
            @foreach(\App\Enums\ActivityType::cases() as $type)
            <label class="type-btn {{ old('activity_type')===$type->value ? 'selected' : '' }}" id="type_{{ $type->value }}">
                <input type="radio" name="activity_type" value="{{ $type->value }}" {{ old('activity_type')===$type->value ? 'checked' : '' }}>
                <span class="type-icon"><i class="fas {{ strtok($type->icon(), ' ') }}"></i></span>
                <span class="type-label">{{ $type->label() }}</span>
            </label>
            @endforeach
        </div>
        @error('activity_type')<div class="error-msg mt-2">{{ $message }}</div>@enderror
    </div>
</div>

{{-- ── Genel Bilgiler ──────────────────── --}}
<div class="form-card">
    <div class="form-section-header">
        <div class="form-section-icon" style="background:#d1fae5;color:#10b981"><i class="fas fa-info-circle"></i></div>
        <div class="form-section-title">Genel Bilgiler</div>
    </div>
    <div class="form-section-body">
        <div class="fg-1">
            <div class="field-group">
                <label class="field-label">Konu / Başlık</label>
                <input type="text" name="subject" value="{{ old('subject') }}" class="field-input" placeholder="Aktivite konusunu yazın…">
            </div>
        </div>
        <div class="fg-2 mt-3">
            <div class="field-group">
                <label class="field-label">Yön</label>
                <select name="direction" class="field-input">
                    <option value="">Seçiniz</option>
                    <option value="inbound"  {{ old('direction')==='inbound'  ? 'selected' : '' }}>📥 Gelen</option>
                    <option value="outbound" {{ old('direction')==='outbound' ? 'selected' : '' }}>📤 Giden</option>
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">İletişim Kanalı</label>
                <select name="contact_method" class="field-input">
                    <option value="">Seçiniz</option>
                    <option value="phone"     {{ old('contact_method')==='phone'     ? 'selected' : '' }}>📞 Telefon</option>
                    <option value="email"     {{ old('contact_method')==='email'     ? 'selected' : '' }}>✉️ E-posta</option>
                    <option value="in_person" {{ old('contact_method')==='in_person' ? 'selected' : '' }}>🤝 Yüz Yüze</option>
                    <option value="sms"       {{ old('contact_method')==='sms'       ? 'selected' : '' }}>💬 SMS</option>
                </select>
            </div>
        </div>
        <div class="fg-1 mt-3">
            <div class="field-group">
                <label class="field-label">Açıklama</label>
                <textarea name="description" class="field-input" rows="4" placeholder="Aktivite detaylarını yazın…">{{ old('description') }}</textarea>
            </div>
        </div>
    </div>
</div>

{{-- ── Zaman & Durum ───────────────────── --}}
<div class="form-card">
    <div class="form-section-header">
        <div class="form-section-icon" style="background:#fef3c7;color:#f59e0b"><i class="fas fa-calendar-alt"></i></div>
        <div class="form-section-title">Zaman & Durum</div>
    </div>
    <div class="form-section-body">
        <div class="fg-3">
            <div class="field-group">
                <label class="field-label">Aktivite Tarihi</label>
                <input type="datetime-local" name="activity_date" value="{{ old('activity_date', now()->format('Y-m-d\TH:i')) }}" class="field-input">
            </div>
            <div class="field-group">
                <label class="field-label">Planlanan Tarih</label>
                <input type="datetime-local" name="scheduled_date" value="{{ old('scheduled_date') }}" class="field-input">
            </div>
            <div class="field-group">
                <label class="field-label">Son Tarih</label>
                <input type="datetime-local" name="due_date" value="{{ old('due_date') }}" class="field-input">
            </div>
        </div>
        <div class="fg-3 mt-3">
            <div class="field-group">
                <label class="field-label">Durum <span class="req">*</span></label>
                <select name="status" class="field-input">
                    <option value="pending"     {{ old('status','pending')==='pending'     ? 'selected' : '' }}>Beklemede</option>
                    <option value="in_progress" {{ old('status')==='in_progress' ? 'selected' : '' }}>Devam Ediyor</option>
                    <option value="completed"   {{ old('status')==='completed'   ? 'selected' : '' }}>Tamamlandı</option>
                    <option value="cancelled"   {{ old('status')==='cancelled'   ? 'selected' : '' }}>İptal</option>
                    <option value="deferred"    {{ old('status')==='deferred'    ? 'selected' : '' }}>Ertelendi</option>
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Öncelik <span class="req">*</span></label>
                <select name="priority" class="field-input">
                    <option value="low"    {{ old('priority','normal')==='low'    ? 'selected' : '' }}>Düşük</option>
                    <option value="normal" {{ old('priority','normal')==='normal' ? 'selected' : '' }}>Normal</option>
                    <option value="high"   {{ old('priority')==='high'   ? 'selected' : '' }}>Yüksek</option>
                    <option value="urgent" {{ old('priority')==='urgent' ? 'selected' : '' }}>🔴 Acil</option>
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Süre (dk)</label>
                <input type="number" name="duration_minutes" value="{{ old('duration_minutes') }}" class="field-input" min="1" placeholder="örn: 15">
            </div>
        </div>
        <div class="fg-2 mt-3">
            <div class="field-group">
                <label class="field-label">Sonuç</label>
                <select name="outcome" class="field-input">
                    <option value="">Seçiniz</option>
                    <option value="successful"         {{ old('outcome')==='successful'         ? 'selected' : '' }}>✅ Başarılı</option>
                    <option value="unsuccessful"       {{ old('outcome')==='unsuccessful'       ? 'selected' : '' }}>❌ Başarısız</option>
                    <option value="follow_up_required" {{ old('outcome')==='follow_up_required' ? 'selected' : '' }}>🔄 Takip Gerekli</option>
                    <option value="no_answer"          {{ old('outcome')==='no_answer'          ? 'selected' : '' }}>📵 Cevap Yok</option>
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Atanan Temsilci</label>
                <select name="assigned_to" class="field-input">
                    <option value="">Seçiniz</option>
                    @foreach($agents as $agent)
                        <option value="{{ $agent->id }}" {{ old('assigned_to')==$agent->id ? 'selected' : '' }}>{{ $agent->full_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

{{-- ── Şikayet Alanları (conditional) ─── --}}
<div class="form-card cond-panel" id="complaintPanel">
    <div class="form-section-header">
        <div class="form-section-icon" style="background:#fee2e2;color:#dc2626"><i class="fas fa-exclamation-circle"></i></div>
        <div class="form-section-title">Şikayet Detayları</div>
    </div>
    <div class="form-section-body">
        <div class="fg-2">
            <div class="field-group">
                <label class="field-label">Şikayet Kategorisi</label>
                <input type="text" name="complaint_category" value="{{ old('complaint_category') }}" class="field-input" placeholder="örn: Geç Teslimat">
            </div>
            <div class="field-group">
                <label class="field-label">Şiddet Seviyesi</label>
                <select name="complaint_severity" class="field-input">
                    <option value="">Seçiniz</option>
                    <option value="low"      {{ old('complaint_severity')==='low'      ? 'selected' : '' }}>Düşük</option>
                    <option value="medium"   {{ old('complaint_severity')==='medium'   ? 'selected' : '' }}>Orta</option>
                    <option value="high"     {{ old('complaint_severity')==='high'     ? 'selected' : '' }}>Yüksek</option>
                    <option value="critical" {{ old('complaint_severity')==='critical' ? 'selected' : '' }}>Kritik</option>
                </select>
            </div>
        </div>
    </div>
</div>

{{-- ── Takip & Notlar ──────────────────── --}}
<div class="form-card">
    <div class="form-section-header">
        <div class="form-section-icon" style="background:#ede9fe;color:#8b5cf6"><i class="fas fa-flag"></i></div>
        <div class="form-section-title">Takip & Notlar</div>
    </div>
    <div class="form-section-body">
        <div class="toggle-row">
            <div><div class="toggle-lbl">Önemli Aktivite</div><div class="toggle-desc">Bu aktiviteyi öncelikli olarak işaretle</div></div>
            <label class="toggle-switch">
                <input type="hidden" name="is_important" value="0">
                <input type="checkbox" name="is_important" value="1" {{ old('is_important') ? 'checked' : '' }}>
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="toggle-row">
            <div><div class="toggle-lbl">Takip Gerekiyor</div><div class="toggle-desc">Belirtilen tarihte kontrol edilsin</div></div>
            <label class="toggle-switch">
                <input type="hidden" name="requires_follow_up" value="0">
                <input type="checkbox" name="requires_follow_up" value="1" id="followUpToggle" {{ old('requires_follow_up') ? 'checked' : '' }}>
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="fg-1 mt-3" id="followUpDateRow" style="{{ old('requires_follow_up') ? '' : 'display:none' }}">
            <div class="field-group">
                <label class="field-label">Takip Tarihi</label>
                <input type="date" name="follow_up_date" value="{{ old('follow_up_date') }}" class="field-input" style="max-width:240px">
            </div>
        </div>
        <div class="fg-2 mt-3">
            <div class="field-group">
                <label class="field-label">Sonuç / Ne Konuşuldu?</label>
                <textarea name="result" class="field-input" rows="3" placeholder="Aktivite sonucunu yazın…">{{ old('result') }}</textarea>
            </div>
            <div class="field-group">
                <label class="field-label">Sonraki Adımlar</label>
                <textarea name="next_steps" class="field-input" rows="3" placeholder="Yapılacaklar…">{{ old('next_steps') }}</textarea>
            </div>
        </div>
        <div class="fg-2 mt-3">
            <div class="field-group">
                <label class="field-label">Dahili Notlar</label>
                <textarea name="internal_notes" class="field-input" rows="3" placeholder="Sadece personele görünür…">{{ old('internal_notes') }}</textarea>
            </div>
            <div class="field-group">
                <label class="field-label">Müşteri Notları</label>
                <textarea name="customer_notes" class="field-input" rows="3" placeholder="Müşterinin söyledikleri…">{{ old('customer_notes') }}</textarea>
            </div>
        </div>
    </div>
</div>

{{-- ── Form Footer ─────────────────────── --}}
<div class="form-footer">
    <a href="{{ route('agency.customers.activities.index', $customer) }}" class="btn btn-outline-secondary" style="border-radius:10px">
        <i class="fas fa-times me-1"></i>İptal
    </a>
    <button type="submit" class="btn text-white" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;padding:.65rem 2.5rem;font-weight:700;box-shadow:0 4px 14px rgba(99,102,241,.4)">
        <i class="fas fa-save me-2"></i>Aktiviteyi Kaydet
    </button>
</div>

</div><!-- form-wrap -->
</form>
</div>
@endsection

@push('scripts')
<script>
// Aktivite tipi seçici
document.querySelectorAll('.type-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('selected'));
        this.classList.add('selected');
        this.querySelector('input[type=radio]').checked = true;
        toggleConditionalPanels(this.querySelector('input').value);
    });
});

function toggleConditionalPanels(type) {
    document.getElementById('complaintPanel').classList.toggle('show', type === 'complaint');
}

// İlk yüklemede
const checkedType = document.querySelector('input[name=activity_type]:checked');
if (checkedType) toggleConditionalPanels(checkedType.value);

// Takip tarihi
document.getElementById('followUpToggle').addEventListener('change', function() {
    document.getElementById('followUpDateRow').style.display = this.checked ? '' : 'none';
});
</script>
@endpush