@extends('layouts.app')
@section('admin_content')
<main class="app-main">
<div class="container-fluid">
<div class="app-content-header"></div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header"><h4>{{ $pageTitle ?? 'Yeni Telefon Ekle' }}</h4></div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.phones.store') }}">
                        @csrf
                        <div class="mb-3">
                            <label>Başlık</label>
                            <select name="titles" class="form-control" required>
                                <option value="">Başlık Seçiniz</option>
                                @foreach($titles as $title)
                                    <option value="{{ $title->id }}" {{ old('titles') == $title->id ? 'selected' : '' }}>{{ $title->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Numara</label>
                            <input type="text" name="phone" class="form-control" required value="{{ old('phone') }}">
                        </div>
                        
                        <div class="mb-3">
                            <label>Durum</label>
                            <select name="status" class="form-control">
                                <option value="1" {{ old('status', 1) == 1 ? 'selected' : '' }}>Aktif</option>
                                <option value="0" {{ old('status') == 0 ? 'selected' : '' }}>Pasif</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Ülke Mesajları</label>
                            <div id="country-messages-list">
                                <div class="row country-message-row mb-2">
                                    <div class="col-md-4 mb-2 mb-md-0">
                                        <select name="country_messages[0][country_code]" class="form-control">
                                            <option value="">Ülke Seçiniz</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->country_code }}">{{ $country->country_name }} ({{ $country->country_code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-2 mb-md-0">
                                        <input type="text" name="country_messages[0][message]" class="form-control" placeholder="Mesaj">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger remove-country-message w-100">Sil</button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-info mt-2" id="add-country-message">+ Ülke Mesajı Ekle</button>
                        </div>
                        <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            let countryMessageIndex = 1;
                            document.getElementById('add-country-message').addEventListener('click', function() {
                                const list = document.getElementById('country-messages-list');
                                const row = document.createElement('div');
                                row.className = 'row country-message-row mb-2';
                                row.innerHTML = `
                                    <div class="col-md-4 mb-2 mb-md-0">
                                        <select name="country_messages[${countryMessageIndex}][country_code]" class="form-control" required>
                                            <option value="">Ülke Seçiniz</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->country_code }}">{{ $country->country_name }} ({{ $country->country_code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-2 mb-md-0">
                                        <input type="text" name="country_messages[${countryMessageIndex}][message]" class="form-control" placeholder="Mesaj" required>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger remove-country-message w-100">Sil</button>
                                    </div>
                                `;
                                list.appendChild(row);
                                countryMessageIndex++;
                            });
                            document.getElementById('country-messages-list').addEventListener('click', function(e) {
                                if(e.target.classList.contains('remove-country-message')) {
                                    const rows = document.querySelectorAll('.country-message-row');
                                    if(rows.length > 1) {
                                        e.target.closest('.country-message-row').remove();
                                    }
                                }
                            });
                        });
                        </script>

                        <button type="submit" class="btn btn-success">Kaydet</button>
                        <a href="{{ route('admin.phones.index') }}" class="btn btn-secondary">İptal</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</main>
@endsection