@extends('agency.layouts.app')

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

@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; }
.error-msg { font-size:.76rem; color:#ef4444; }
.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-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 { 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); }
.cond-panel { display:none; }
.cond-panel.show { display:block; }
</style>
@endpush

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

<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">Düzenle</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
@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-3" style="border-radius:12px;font-size:.85rem"><i class="fas fa-check-circle me-2"></i>{{ session('success') }}</div>
@endif

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

<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([
                ['call','fas fa-phone','Telefon'],
                ['email','fas fa-envelope','E-posta'],
                ['meeting','fas fa-people-group','Toplantı'],
                ['booking','fas fa-calendar-check','Rezervasyon'],
                ['complaint','fas fa-exclamation-circle','Şikayet'],
                ['note','fas fa-sticky-note','Not'],
                ['sms','fas fa-sms','SMS'],
                ['task','fas fa-tasks','Görev'],
            ] as [$v,$icon,$lbl])
            @php $isSelected = old('activity_type', $activity->activity_type) === $v; @endphp
            <label class="type-btn {{ $isSelected ? 'selected' : '' }}" id="type_{{ $v }}">
                <input type="radio" name="activity_type" value="{{ $v }}" {{ $isSelected ? 'checked' : '' }}>
                <span class="type-icon"><i class="{{ $icon }}"></i></span>
                <span class="type-label">{{ $lbl }}</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', $activity->subject) }}" class="field-input">
            </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',$activity->direction)==='inbound'  ? 'selected' : '' }}>📥 Gelen</option>
                    <option value="outbound" {{ old('direction',$activity->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>
                    @foreach(['phone'=>'📞 Telefon','email'=>'✉️ E-posta','in_person'=>'🤝 Yüz Yüze','sms'=>'💬 SMS'] as $v=>$lbl)
                        <option value="{{ $v }}" {{ old('contact_method',$activity->contact_method)===$v ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </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">{{ old('description', $activity->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', $activity->activity_date?->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', $activity->scheduled_date?->format('Y-m-d\TH:i')) }}" 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', $activity->due_date?->format('Y-m-d\TH:i')) }}" 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">
                    @foreach(['pending'=>'Beklemede','in_progress'=>'Devam Ediyor','completed'=>'Tamamlandı','cancelled'=>'İptal','deferred'=>'Ertelendi'] as $v=>$lbl)
                        <option value="{{ $v }}" {{ old('status',$activity->status)===$v ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Öncelik <span class="req">*</span></label>
                <select name="priority" class="field-input">
                    @foreach(['low'=>'Düşük','normal'=>'Normal','high'=>'Yüksek','urgent'=>'🔴 Acil'] as $v=>$lbl)
                        <option value="{{ $v }}" {{ old('priority',$activity->priority)===$v ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field-group">
                <label class="field-label">Süre (dk)</label>
                <input type="number" name="duration_minutes" value="{{ old('duration_minutes', $activity->duration_minutes) }}" class="field-input" min="1">
            </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>
                    @foreach(['successful'=>'✅ Başarılı','unsuccessful'=>'❌ Başarısız','follow_up_required'=>'🔄 Takip','no_answer'=>'📵 Cevap Yok'] as $v=>$lbl)
                        <option value="{{ $v }}" {{ old('outcome',$activity->outcome)===$v ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </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',$activity->assigned_to)==$agent->id ? 'selected' : '' }}>{{ $agent->full_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

{{-- Şikayet Alanları --}}
<div class="form-card cond-panel {{ $activity->activity_type === 'complaint' ? 'show' : '' }}" 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',$activity->complaint_category) }}" class="field-input">
            </div>
            <div class="field-group">
                <label class="field-label">Şiddet Seviyesi</label>
                <select name="complaint_severity" class="field-input">
                    <option value="">Seçiniz</option>
                    @foreach(['low'=>'Düşük','medium'=>'Orta','high'=>'Yüksek','critical'=>'Kritik'] as $v=>$lbl)
                        <option value="{{ $v }}" {{ old('complaint_severity',$activity->complaint_severity)===$v ? 'selected' : '' }}>{{ $lbl }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="fg-1 mt-3">
            <div class="field-group">
                <label class="field-label">Çözüm</label>
                <textarea name="resolution" class="field-input" rows="3">{{ old('resolution', $activity->resolution) }}</textarea>
            </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">Ö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',$activity->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',$activity->requires_follow_up) ? 'checked' : '' }}>
                <span class="toggle-slider"></span>
            </label>
        </div>
        <div class="fg-1 mt-3" id="followUpDateRow" style="{{ old('requires_follow_up',$activity->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', $activity->follow_up_date?->format('Y-m-d')) }}" class="field-input" style="max-width:240px">
            </div>
        </div>
        <div class="fg-2 mt-3">
            <div class="field-group">
                <label class="field-label">Sonuç / Notlar</label>
                <textarea name="result" class="field-input" rows="3">{{ old('result', $activity->result) }}</textarea>
            </div>
            <div class="field-group">
                <label class="field-label">Sonraki Adımlar</label>
                <textarea name="next_steps" class="field-input" rows="3">{{ old('next_steps', $activity->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">{{ old('internal_notes', $activity->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">{{ old('customer_notes', $activity->customer_notes) }}</textarea>
            </div>
        </div>
    </div>
</div>

{{-- 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>Güncelle
    </button>
</div>

</div>
</form>
</div>
@endsection

@push('scripts')
<script>
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;
        document.getElementById('complaintPanel').classList.toggle('show', this.querySelector('input').value === 'complaint');
    });
});
document.getElementById('followUpToggle').addEventListener('change', function() {
    document.getElementById('followUpDateRow').style.display = this.checked ? '' : 'none';
});
</script>
@endpush