@extends('agency.layouts.app')

@section('title', 'Döviz Kurları ve Para Birimleri')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex align-items-center gap-3 mb-2">
                <a href="{{ route('agency.settings') }}" class="btn btn-outline-secondary btn-sm px-3 py-2" style="border-radius: 12px; border-color: #e2e8f0; font-weight: 600;">
                    <i class="fas fa-arrow-left me-1"></i> Ayarlara Dön
                </a>
                <div class="settings-icon-wrapper ms-2">
                    <i class="fas fa-money-bill-wave text-warning"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Döviz Kurları ve Para Birimleri</h1>
                    <p class="text-muted mb-0">Sistem genelinde kullanılacak para birimlerini ve kurlarını yönetin.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row g-4">
        <div class="col-12">
            <div class="settings-card shadow-sm h-100" style="background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03);">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="fw-bold text-dark mb-0">Tanımlı Döviz Listesi</h4>
                        <button type="button" class="btn btn-sm btn-primary fw-bold py-2 px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#addCurrencyModal" style="border-radius: 10px; background: linear-gradient(135deg, #4f46e5, #3730a3); border: none;">
                            <i class="fas fa-plus me-1"></i> Yeni Para Birimi Ekle
                        </button>
                    </div>

                    <form action="{{ route('agency.settings.currencies.bulk-update') }}" method="POST">
                        @csrf
                        <div class="table-responsive">
                            <table class="table align-middle table-hover">
                                <thead class="table-light">
                                    <tr style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;">
                                        <th style="width: 120px;">Kod</th>
                                        <th style="width: 120px;">Sembol</th>
                                        <th>Kur Değeri (1 Döviz = X TRY)</th>
                                        <th style="width: 120px;" class="text-center">Varsayılan</th>
                                        <th style="width: 120px;" class="text-center">Aktif</th>
                                        <th style="width: 100px;" class="text-end">İşlemler</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($currencies as $curr)
                                        <tr>
                                            <td class="fw-bold text-dark" style="font-size: 0.95rem;">{{ $curr->code }}</td>
                                            <td class="fw-bold text-muted" style="font-size: 0.95rem;">{{ $curr->symbol }}</td>
                                            <td>
                                                <div class="input-group input-group-sm" style="max-width: 250px;">
                                                    <input type="number" name="rates[{{ $curr->id }}]" step="any" min="0.0001" class="form-control fw-bold" value="{{ (float)$curr->exchange_rate }}" {{ $curr->is_base ? 'readonly' : '' }} required style="border-radius: 6px 0 0 6px;">
                                                    <span class="input-group-text small text-muted" style="border-radius: 0 6px 6px 0;">TRY (₺)</span>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                @if($curr->is_base)
                                                    <span class="badge bg-soft-success text-success fw-bold px-2 py-1" style="font-size: 0.7rem; border-radius: 6px; background-color: rgba(16, 185, 129, 0.1);">Ana Para</span>
                                                @else
                                                    <span class="text-muted small">—</span>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <div class="form-check form-switch d-inline-block">
                                                    <input class="form-check-input" type="checkbox" name="active[]" value="{{ $curr->id }}" {{ $curr->is_active ? 'checked' : '' }} {{ $curr->is_base ? 'disabled' : '' }}>
                                                </div>
                                            </td>
                                            <td class="text-end">
                                                @if(!$curr->is_base)
                                                    <button type="button" class="btn btn-link btn-sm text-danger p-0 shadow-none border-0" onclick="deleteCurrency({{ $curr->id }})" title="Sil">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                @else
                                                    <span class="text-muted small">—</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center text-muted py-4">Para birimi tanımlanmamış.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        @if($currencies->isNotEmpty())
                            <div class="d-flex justify-content-end mt-3">
                                <button type="submit" class="btn btn-sm btn-warning text-white fw-bold py-2 px-4 shadow-sm" style="border-radius: 10px; background: linear-gradient(135deg, #d97706, #b45309); border: none;">
                                    <i class="fas fa-save me-1"></i> Para Birimlerini ve Kurları Güncelle
                                </button>
                            </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Currency Modal -->
<div class="modal fade" id="addCurrencyModal" tabindex="-1" aria-labelledby="addCurrencyModalLabel" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
            <div class="modal-header border-0 bg-light py-3" style="border-radius: 20px 20px 0 0;">
                <h5 class="modal-title fw-bold text-dark" id="addCurrencyModalLabel"><i class="fas fa-plus-circle text-primary me-2"></i>Yeni Para Birimi Ekle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('agency.settings.currencies.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Döviz Kodu (örn: USD, CHF) *</label>
                        <input type="text" name="code" class="form-control" placeholder="USD" required maxlength="3" style="border-radius: 8px;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Sembolü (örn: $, £) *</label>
                        <input type="text" name="symbol" class="form-control" placeholder="$" required maxlength="5" style="border-radius: 8px;">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Kur Değeri (1 Döviz = X TRY) *</label>
                        <input type="number" name="exchange_rate" step="any" min="0.0001" class="form-control" placeholder="1.0000" required style="border-radius: 8px;">
                    </div>
                    <div class="mb-3 form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active" id="curr_active" checked value="1">
                        <label class="form-check-label small fw-bold text-muted" for="curr_active">Aktif Para Birimi</label>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_base" id="curr_base" value="1">
                        <label class="form-check-label small fw-bold text-muted" for="curr_base">Varsayılan (Base) Para Birimi</label>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light py-3" style="border-radius: 0 0 20px 20px;">
                    <button type="button" class="btn btn-sm btn-light fw-bold px-3 py-2" data-bs-dismiss="modal" style="border-radius: 8px;">Vazgeç</button>
                    <button type="submit" class="btn btn-sm btn-primary fw-bold px-4 py-2" style="border-radius: 8px; background: linear-gradient(135deg, #4f46e5, #3730a3); border: none;">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<form id="delete-currency-form" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<script>
    function deleteCurrency(id) {
        Swal.fire({
            title: 'Emin misiniz?',
            text: "Bu para birimini silmek istediğinize emin misiniz?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Evet, Sil!',
            cancelButtonText: 'Vazgeç'
        }).then((result) => {
            if (result.isConfirmed) {
                const form = document.getElementById('delete-currency-form');
                form.action = `/agency/settings/currencies/${id}`;
                form.submit();
            }
        });
    }
</script>

<style>
    .settings-icon-wrapper {
        width: 54px;
        height: 54px;
        background: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
    }
    .fw-800 { font-weight: 800; }
    .header-divider {
        height: 3px;
        width: 60px;
        background: linear-gradient(to right, var(--bs-primary), transparent);
        border-radius: 10px;
    }
    .bg-soft-warning { background-color: rgba(217, 119, 6, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-primary { background-color: rgba(99, 102, 241, 0.1); }
</style>
@endsection