@extends('layouts.app')

@section('title', 'Hedefler')

@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Hedefler</h6>
        <ul class="d-flex align-items-center gap-2">
            <li class="fw-medium">
                <a href="{{ route('dashboard') }}" class="d-flex align-items-center gap-1 hover-text-primary">
                    <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                    Dashboard
                </a>
            </li>
            <li>-</li>
            <li class="fw-medium">Hedefler</li>
        </ul>
    </div>

    <div class="kmc-goals">
        <!-- Summary Cards -->
        <div class="kmc-goals__summary">
            <div class="kmc-goals__summary-card kmc-goals__summary-card--primary">
                <div class="kmc-goals__summary-icon">
                    <iconify-icon icon="solar:target-bold"></iconify-icon>
                </div>
                <div class="kmc-goals__summary-content">
                    <span class="kmc-goals__summary-label">Toplam Hedef</span>
                    <span class="kmc-goals__summary-value">{{ number_format($hedefler->sum('hedef_tutar'), 0, ',', '.') }} ₺</span>
                </div>
            </div>
            <div class="kmc-goals__summary-card kmc-goals__summary-card--success">
                <div class="kmc-goals__summary-icon">
                    <iconify-icon icon="solar:check-circle-bold"></iconify-icon>
                </div>
                <div class="kmc-goals__summary-content">
                    <span class="kmc-goals__summary-label">Gerçekleşen</span>
                    <span class="kmc-goals__summary-value">{{ number_format($hedefler->sum('gerceklesen_tutar'), 0, ',', '.') }} ₺</span>
                </div>
            </div>
            <div class="kmc-goals__summary-card kmc-goals__summary-card--info">
                <div class="kmc-goals__summary-icon">
                    <iconify-icon icon="solar:chart-2-bold"></iconify-icon>
                </div>
                <div class="kmc-goals__summary-content">
                    <span class="kmc-goals__summary-label">Ortalama Gerçekleşme</span>
                    <span class="kmc-goals__summary-value">%{{ $hedefler->count() > 0 ? number_format($hedefler->avg('yuzde'), 1) : 0 }}</span>
                </div>
            </div>
            <div class="kmc-goals__summary-card kmc-goals__summary-card--warning">
                <div class="kmc-goals__summary-icon">
                    <iconify-icon icon="solar:calendar-bold"></iconify-icon>
                </div>
                <div class="kmc-goals__summary-content">
                    <span class="kmc-goals__summary-label">Aktif Hedef</span>
                    <span class="kmc-goals__summary-value">{{ $hedefler->count() }} Adet</span>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="kmc-goals__grid">
            <!-- Left Panel: Form -->
            <div class="kmc-goals__form-panel" id="goalFormPanel">
                <div class="kmc-goals__form-header">
                    <h6 class="kmc-goals__form-title" id="formTitle">
                        <iconify-icon icon="solar:add-circle-bold"></iconify-icon>
                        <span>Yeni Hedef Ekle</span>
                    </h6>
                    <button type="button" class="kmc-goals__form-close" id="closeFormBtn" style="display: none;">
                        <iconify-icon icon="mdi:close"></iconify-icon>
                    </button>
                </div>

                <form action="{{ route('hedefler.store') }}" method="POST" id="goalForm" class="kmc-goals__form">
                    @csrf
                    <input type="hidden" name="_method" id="formMethod" value="POST">
                    <input type="hidden" name="hedef_id" id="hedefId" value="">

                    <div class="kmc-goals__form-group">
                        <label class="kmc-goals__form-label">Hedef Tipi</label>
                        <div class="kmc-goals__form-chips" id="tipChips">
                            <label class="kmc-goals__chip kmc-goals__chip--active">
                                <input type="radio" name="tip" value="kurumsal" checked>
                                <iconify-icon icon="solar:buildings-outline"></iconify-icon>
                                <span>Kurumsal</span>
                            </label>
                            <label class="kmc-goals__chip">
                                <input type="radio" name="tip" value="satisci">
                                <iconify-icon icon="solar:user-outline"></iconify-icon>
                                <span>Satışçı</span>
                            </label>
                            <label class="kmc-goals__chip">
                                <input type="radio" name="tip" value="brans">
                                <iconify-icon icon="solar:layers-outline"></iconify-icon>
                                <span>Branş</span>
                            </label>
                        </div>
                    </div>

                    <div class="kmc-goals__form-group" id="satisciField" style="display: none;">
                        <label class="kmc-goals__form-label">Satışçı Seçin</label>
                        <select name="satisci_id" id="satisciSelect" class="kmc-goals__form-select">
                            <option value="">Satışçı seçiniz...</option>
                            @foreach($satiscilar as $satisci)
                                <option value="{{ $satisci->id }}">{{ $satisci->ad_soyad }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="kmc-goals__form-group" id="bransField" style="display: none;">
                        <label class="kmc-goals__form-label">Branş Seçin</label>
                        <select name="brans_id" id="bransSelect" class="kmc-goals__form-select">
                            <option value="">Branş seçiniz...</option>
                            @foreach($branslar as $brans)
                                <option value="{{ $brans->id }}">{{ $brans->ad }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="kmc-goals__form-row">
                        <div class="kmc-goals__form-group">
                            <label class="kmc-goals__form-label">Yıl</label>
                            <select name="yil" class="kmc-goals__form-select">
                                @for($y = date('Y') + 1; $y >= date('Y') - 2; $y--)
                                    <option value="{{ $y }}" {{ $y == $yil ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="kmc-goals__form-group">
                            <label class="kmc-goals__form-label">Ay</label>
                            <select name="ay" class="kmc-goals__form-select">
                                <option value="">Yıllık Hedef</option>
                                @for($m = 1; $m <= 12; $m++)
                                    <option value="{{ $m }}">{{ $m }}. Ay</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div class="kmc-goals__form-row">
                        <div class="kmc-goals__form-group">
                            <label class="kmc-goals__form-label">Hedef Tutar (₺)</label>
                            <div class="kmc-goals__form-input-wrapper">
                                <iconify-icon icon="solar:dollar-minimalistic-outline"></iconify-icon>
                                <input type="number" name="hedef_tutar" class="kmc-goals__form-input" placeholder="0" step="0.01" required>
                            </div>
                        </div>
                        <div class="kmc-goals__form-group">
                            <label class="kmc-goals__form-label">Hedef Adet</label>
                            <div class="kmc-goals__form-input-wrapper">
                                <iconify-icon icon="solar:box-outline"></iconify-icon>
                                <input type="number" name="hedef_adet" class="kmc-goals__form-input" placeholder="0" min="0">
                            </div>
                        </div>
                    </div>

                    <div class="kmc-goals__form-actions">
                        <button type="button" class="kmc-goals__btn kmc-goals__btn--secondary" id="resetFormBtn">
                            <iconify-icon icon="solar:refresh-outline"></iconify-icon>
                            Sıfırla
                        </button>
                        <button type="submit" class="kmc-goals__btn kmc-goals__btn--primary">
                            <iconify-icon icon="solar:check-circle-outline"></iconify-icon>
                            <span id="submitBtnText">Hedef Ekle</span>
                        </button>
                    </div>
                </form>
            </div>

            <!-- Right Panel: Table -->
            <div class="kmc-goals__table-panel">
                <div class="kmc-goals__table-header">
                    <div class="kmc-goals__table-title">
                        <iconify-icon icon="solar:clipboard-list-bold"></iconify-icon>
                        <span>Hedef Listesi</span>
                        <span class="kmc-goals__table-count">{{ $hedefler->count() }} kayıt</span>
                    </div>
                    <div class="kmc-goals__table-filters">
                        <a href="{{ route('hedefler.index', ['tip' => 'kurumsal', 'yil' => $yil]) }}"
                           class="kmc-goals__filter {{ $tip === 'kurumsal' ? 'kmc-goals__filter--active' : '' }}">
                            Kurumsal
                        </a>
                        <a href="{{ route('hedefler.index', ['tip' => 'satisci', 'yil' => $yil]) }}"
                           class="kmc-goals__filter {{ $tip === 'satisci' ? 'kmc-goals__filter--active' : '' }}">
                            Satışçı
                        </a>
                        <a href="{{ route('hedefler.index', ['tip' => 'brans', 'yil' => $yil]) }}"
                           class="kmc-goals__filter {{ $tip === 'brans' ? 'kmc-goals__filter--active' : '' }}">
                            Branş
                        </a>
                        <select class="kmc-goals__year-select" onchange="window.location.href='{{ route('hedefler.index') }}?tip={{ $tip }}&yil=' + this.value">
                            @for($y = date('Y') + 1; $y >= date('Y') - 2; $y--)
                                <option value="{{ $y }}" {{ $y == $yil ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                </div>

                <div class="kmc-goals__table-wrapper">
                    <table class="kmc-goals__table">
                        <thead>
                            <tr>
                                <th>Tip</th>
                                <th>Detay</th>
                                <th>Dönem</th>
                                <th>Hedef</th>
                                <th>Gerçekleşen</th>
                                <th>İlerleme</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($hedefler as $hedef)
                                <tr class="kmc-goals__row" data-hedef="{{ json_encode($hedef) }}">
                                    <td>
                                        <span class="kmc-goals__type kmc-goals__type--{{ $hedef->tip }}">
                                            @if($hedef->tip === 'kurumsal')
                                                <iconify-icon icon="solar:buildings-bold"></iconify-icon>
                                            @elseif($hedef->tip === 'satisci')
                                                <iconify-icon icon="solar:user-bold"></iconify-icon>
                                            @else
                                                <iconify-icon icon="solar:layers-bold"></iconify-icon>
                                            @endif
                                            {{ ucfirst($hedef->tip) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="kmc-goals__detail">
                                            {{ $hedef->satisci->ad_soyad ?? ($hedef->brans->ad ?? 'Kurumsal Hedef') }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="kmc-goals__period">
                                            <iconify-icon icon="solar:calendar-outline"></iconify-icon>
                                            {{ $hedef->ay ? $hedef->ay . '/' . $hedef->yil : $hedef->yil . ' Yıllık' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="kmc-goals__amount">{{ number_format($hedef->hedef_tutar, 0, ',', '.') }} ₺</span>
                                    </td>
                                    <td>
                                        <span class="kmc-goals__amount kmc-goals__amount--success">{{ number_format($hedef->gerceklesen_tutar, 0, ',', '.') }} ₺</span>
                                    </td>
                                    <td>
                                        <div class="kmc-goals__progress">
                                            <div class="kmc-goals__progress-bar">
                                                <div class="kmc-goals__progress-fill kmc-goals__progress-fill--{{ $hedef->yuzde >= 100 ? 'success' : ($hedef->yuzde >= 70 ? 'primary' : 'warning') }}"
                                                     style="width: {{ min(100, $hedef->yuzde) }}%"></div>
                                            </div>
                                            <span class="kmc-goals__progress-text">%{{ number_format($hedef->yuzde, 1) }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="kmc-goals__actions">
                                            <button type="button" class="kmc-goals__action kmc-goals__action--edit"
                                                    onclick="editGoal({{ json_encode($hedef) }})" title="Düzenle">
                                                <iconify-icon icon="solar:pen-bold"></iconify-icon>
                                            </button>
                                            <form action="{{ route('hedefler.destroy', $hedef->id) }}" method="POST" style="display: inline;"
                                                  onsubmit="return confirm('Bu hedefi silmek istediğinize emin misiniz?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="kmc-goals__action kmc-goals__action--delete" title="Sil">
                                                    <iconify-icon icon="solar:trash-bin-trash-bold"></iconify-icon>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">
                                        <div class="kmc-goals__empty">
                                            <iconify-icon icon="solar:target-outline" class="kmc-goals__empty-icon"></iconify-icon>
                                            <p class="kmc-goals__empty-text">Bu kriterlere uygun hedef bulunamadı</p>
                                            <p class="kmc-goals__empty-hint">Sol panelden yeni hedef ekleyebilirsiniz</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        // Chip selection for goal type
        document.querySelectorAll('.kmc-goals__chip input').forEach(input => {
            input.addEventListener('change', function() {
                document.querySelectorAll('.kmc-goals__chip').forEach(chip => {
                    chip.classList.remove('kmc-goals__chip--active');
                });
                this.parentElement.classList.add('kmc-goals__chip--active');

                const tip = this.value;
                const satisciField = document.getElementById('satisciField');
                const bransField = document.getElementById('bransField');

                satisciField.style.display = (tip === 'satisci' || tip === 'produktor') ? 'block' : 'none';
                bransField.style.display = tip === 'brans' ? 'block' : 'none';
            });
        });

        // Reset form
        document.getElementById('resetFormBtn').addEventListener('click', function() {
            const form = document.getElementById('goalForm');
            form.reset();
            form.action = "{{ route('hedefler.store') }}";
            document.getElementById('formMethod').value = 'POST';
            document.getElementById('hedefId').value = '';
            document.getElementById('formTitle').innerHTML = '<iconify-icon icon="solar:add-circle-bold"></iconify-icon><span>Yeni Hedef Ekle</span>';
            document.getElementById('submitBtnText').textContent = 'Hedef Ekle';
            document.getElementById('closeFormBtn').style.display = 'none';

            document.querySelectorAll('.kmc-goals__chip').forEach(chip => {
                chip.classList.remove('kmc-goals__chip--active');
            });
            document.querySelector('.kmc-goals__chip input[value="kurumsal"]').parentElement.classList.add('kmc-goals__chip--active');

            document.getElementById('satisciField').style.display = 'none';
            document.getElementById('bransField').style.display = 'none';
        });

        // Edit goal function
        function editGoal(hedef) {
            const form = document.getElementById('goalForm');
            form.action = "{{ url('hedefler') }}/" + hedef.id;
            document.getElementById('formMethod').value = 'PUT';
            document.getElementById('hedefId').value = hedef.id;
            document.getElementById('formTitle').innerHTML = '<iconify-icon icon="solar:pen-bold"></iconify-icon><span>Hedef Düzenle</span>';
            document.getElementById('submitBtnText').textContent = 'Güncelle';
            document.getElementById('closeFormBtn').style.display = 'flex';

            // Set tip
            document.querySelectorAll('.kmc-goals__chip').forEach(chip => {
                chip.classList.remove('kmc-goals__chip--active');
                if (chip.querySelector('input').value === hedef.tip) {
                    chip.classList.add('kmc-goals__chip--active');
                    chip.querySelector('input').checked = true;
                }
            });

            // Show/hide fields based on tip
            document.getElementById('satisciField').style.display = (hedef.tip === 'satisci' || hedef.tip === 'produktor') ? 'block' : 'none';
            document.getElementById('bransField').style.display = hedef.tip === 'brans' ? 'block' : 'none';

            // Set values
            if (hedef.satisci_id) document.getElementById('satisciSelect').value = hedef.satisci_id;
            if (hedef.brans_id) document.getElementById('bransSelect').value = hedef.brans_id;
            form.querySelector('select[name="yil"]').value = hedef.yil;
            form.querySelector('select[name="ay"]').value = hedef.ay || '';
            form.querySelector('input[name="hedef_tutar"]').value = hedef.hedef_tutar;
            form.querySelector('input[name="hedef_adet"]').value = hedef.hedef_adet || '';

            // Scroll to form on mobile
            document.getElementById('goalFormPanel').scrollIntoView({ behavior: 'smooth' });
        }

        // Close form (reset to add mode)
        document.getElementById('closeFormBtn').addEventListener('click', function() {
            document.getElementById('resetFormBtn').click();
        });
    </script>
    @endpush
@endsection