@extends('agency.layouts.app')

@section('title', 'Özel Alanlar — '.$customer->full_name)
@section('page_title', 'Özel Alan Değerleri')

@push('styles')
<style>
:root { --cp:#6366f1; --border:#f1f5f9; }
.cfv-page { max-width:800px; margin:0 auto; }
.cfv-customer-bar {
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    border-radius:16px; padding:1.25rem 1.5rem;
    display:flex; align-items:center; gap:1rem;
    margin-bottom:1rem; color:#fff;
}
.cfv-avatar {
    width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;font-weight:800;flex-shrink:0;
}
.cfv-name { font-size:1.05rem;font-weight:800; }
.cfv-sub  { font-size:.78rem;color:rgba(255,255,255,.7);margin-top:2px; }

.cfv-card {
    background:#fff;border-radius:16px;border:1px solid var(--border);
    box-shadow:0 1px 4px rgba(0,0,0,.04);margin-bottom:1rem;overflow:hidden;
}
.cfv-card-header {
    display:flex;align-items:center;gap:.75rem;
    padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:#fafbff;
}
.cfv-card-icon { width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
.cfv-card-title { font-size:.88rem;font-weight:700;color:#0f172a; }
.cfv-card-count  { margin-left:auto;font-size:.75rem;color:#94a3b8; }

.cfv-body { padding:1.25rem; }
.cfv-fields { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem; }

.cf-field-item {}
.cf-field-label {
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:.4rem;
}
.cf-field-name { font-size:.78rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px; }
.cf-field-type { font-size:.65rem;background:#eef2ff;color:#6366f1;padding:2px 7px;border-radius:20px;font-weight:600; }
.cf-field-req  { color:#ef4444;margin-left:3px; }
.cf-help { font-size:.72rem;color:#94a3b8;margin-top:.25rem; }

/* Inputs */
.cf-input {
    width:100%;border:1.5px solid #e2e8f0;border-radius:10px;
    padding:.65rem .9rem;font-size:.875rem;color:#0f172a;
    background:#f8fafc;transition:all .2s;
}
.cf-input:focus { outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1);background:#fff; }
select.cf-input { cursor:pointer; }
textarea.cf-input { resize:vertical;height:80px; }
.cf-bool { display:flex;gap:.75rem; }
.cf-bool label { display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;font-weight:500; }
.cf-bool input[type=radio] { accent-color:#6366f1;width:16px;height:16px; }

/* Multiselect checkboxes */
.cf-multi { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem; }
.cf-multi-check {
    display:flex;align-items:center;gap:.5rem;
    background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;
    padding:.4rem .75rem;cursor:pointer;transition:all .15s;
}
.cf-multi-check:has(input:checked) { border-color:#6366f1;background:#eef2ff; }
.cf-multi-check input { accent-color:#6366f1;width:14px;height:14px; }
.cf-multi-check span { font-size:.82rem;font-weight:500; }

/* Empty fields notice */
.cfv-empty { text-align:center;padding:2.5rem;color:#94a3b8; }
.cfv-empty i { font-size:2.5rem;color:#cbd5e1;margin-bottom:.75rem; }

/* Footer */
.cfv-footer {
    background:#fff;border-top:1px solid var(--border);
    padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;
    border-radius:0 0 16px 16px;box-shadow:0 -4px 20px rgba(0,0,0,.05);
    position:sticky;bottom:0;z-index:10;
}
</style>
@endpush

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

{{-- Customer bar --}}
<div class="cfv-customer-bar">
    <div class="cfv-avatar">{{ $customer->initials }}</div>
    <div>
        <div class="cfv-name">{{ $customer->full_name }}</div>
        <div class="cfv-sub">
            {{ $customer->customer_type === 'corporate' ? '🏢 Şirket' : '👤 Kişi' }}
            @if($customer->email) · {{ $customer->email }} @endif
        </div>
    </div>
    <a href="{{ route('agency.customers.show', $customer) }}" class="ms-auto btn btn-sm" style="background:rgba(255,255,255,.15);color:#fff;border-radius:8px;border:1px solid rgba(255,255,255,.2)">
        <i class="fas fa-arrow-left me-1"></i>Müşteri Kartına Dön
    </a>
</div>

@if($definitions->isEmpty())
<div class="cfv-card">
    <div class="cfv-empty">
        <i class="fas fa-puzzle-piece d-block"></i>
        <p>Henüz özel alan tanımlanmamış.</p>
        <a href="{{ route('agency.customers.fields.index') }}" class="btn btn-sm" style="background:#eef2ff;color:#6366f1;border-radius:8px">
            <i class="fas fa-plus me-1"></i>Alan Tanımla
        </a>
    </div>
</div>
@else

<form method="POST" action="{{ route('agency.customers.field-values.update', $customer) }}" id="cfvForm">
@csrf @method('POST')

<div class="cfv-card">
    <div class="cfv-card-header">
        <div class="cfv-card-icon" style="background:#eef2ff;color:#6366f1"><i class="fas fa-puzzle-piece"></i></div>
        <div>
            <div class="cfv-card-title">Özel Alan Değerleri</div>
        </div>
        <div class="cfv-card-count">{{ $definitions->count() }} alan</div>
    </div>
    <div class="cfv-body">
        <div class="cfv-fields">
            @foreach($definitions as $def)
            @php $current = $existingValues[$def->id] ?? null; @endphp
            <div class="cf-field-item">
                <div class="cf-field-label">
                    <span class="cf-field-name">
                        {{ $def->label }}
                        @if($def->is_required)<span class="cf-field-req">*</span>@endif
                    </span>
                    <span class="cf-field-type">{{ $def->field_type_label }}</span>
                </div>

                @if($def->field_type === 'boolean')
                    <div class="cf-bool">
                        <label>
                            <input type="radio" name="custom_fields[{{ $def->id }}]" value="1" {{ $current == '1' ? 'checked' : '' }}>
                            <span>Evet</span>
                        </label>
                        <label>
                            <input type="radio" name="custom_fields[{{ $def->id }}]" value="0" {{ $current == '0' ? 'checked' : '' }}>
                            <span>Hayır</span>
                        </label>
                        <label>
                            <input type="radio" name="custom_fields[{{ $def->id }}]" value="" {{ is_null($current) ? 'checked' : '' }}>
                            <span style="color:#94a3b8">Belirtilmedi</span>
                        </label>
                    </div>

                @elseif($def->field_type === 'textarea')
                    <textarea name="custom_fields[{{ $def->id }}]" class="cf-input"
                              placeholder="{{ $def->default_value ?: '' }}"
                              {{ $def->is_required ? 'required' : '' }}>{{ $current }}</textarea>

                @elseif($def->field_type === 'select')
                    <select name="custom_fields[{{ $def->id }}]" class="cf-input" {{ $def->is_required ? 'required' : '' }}>
                        <option value="">Seçiniz</option>
                        @if($def->options)
                            @foreach($def->options as $opt)
                                <option value="{{ $opt['value'] }}" {{ $current == $opt['value'] ? 'selected' : '' }}>
                                    {{ $opt['label'] ?? $opt['value'] }}
                                </option>
                            @endforeach
                        @endif
                    </select>

                @elseif($def->field_type === 'multiselect')
                    @php $selectedMulti = $current ? (json_decode($current, true) ?? []) : []; @endphp
                    <div class="cf-multi">
                        @if($def->options)
                            @foreach($def->options as $opt)
                                <label class="cf-multi-check">
                                    <input type="checkbox" name="custom_fields[{{ $def->id }}][]"
                                           value="{{ $opt['value'] }}"
                                           {{ in_array($opt['value'], $selectedMulti) ? 'checked' : '' }}>
                                    <span>{{ $opt['label'] ?? $opt['value'] }}</span>
                                </label>
                            @endforeach
                        @endif
                    </div>

                @elseif($def->field_type === 'date')
                    <input type="date" name="custom_fields[{{ $def->id }}]" class="cf-input"
                           value="{{ $current }}" {{ $def->is_required ? 'required' : '' }}>

                @elseif(in_array($def->field_type, ['number','decimal']))
                    <input type="number" name="custom_fields[{{ $def->id }}]" class="cf-input"
                           value="{{ $current }}"
                           step="{{ $def->field_type === 'decimal' ? '0.01' : '1' }}"
                           placeholder="{{ $def->default_value ?: '0' }}"
                           {{ $def->is_required ? 'required' : '' }}>

                @elseif($def->field_type === 'email')
                    <input type="email" name="custom_fields[{{ $def->id }}]" class="cf-input"
                           value="{{ $current }}" placeholder="ornek@mail.com"
                           {{ $def->is_required ? 'required' : '' }}>

                @elseif($def->field_type === 'phone')
                    <input type="tel" name="custom_fields[{{ $def->id }}]" class="cf-input"
                           value="{{ $current }}" placeholder="+90 5xx..."
                           {{ $def->is_required ? 'required' : '' }}>

                @elseif($def->field_type === 'url')
                    <input type="url" name="custom_fields[{{ $def->id }}]" class="cf-input"
                           value="{{ $current }}" placeholder="https://"
                           {{ $def->is_required ? 'required' : '' }}>

                @else
                    <input type="text" name="custom_fields[{{ $def->id }}]" class="cf-input"
                           value="{{ $current }}" placeholder="{{ $def->default_value ?: '' }}"
                           {{ $def->is_required ? 'required' : '' }}>
                @endif

                @if($def->help_text)
                    <div class="cf-help"><i class="fas fa-info-circle me-1"></i>{{ $def->help_text }}</div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    <div class="cfv-footer">
        <a href="{{ route('agency.customers.show', $customer) }}" class="btn btn-outline-secondary" style="border-radius:10px">
            <i class="fas fa-times me-1"></i>Vazgeç
        </a>
        <button type="submit" class="btn text-white" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:10px;padding:.65rem 2rem;font-weight:600">
            <i class="fas fa-save me-1"></i>Değerleri Kaydet
        </button>
    </div>
</div>

</form>
@endif

</div>
</div>
@endsection