@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 ?? 'Telefon Düzenle' }}</h4></div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.phones.update', $phone->id) }}">
                        @csrf
                        @method('PUT')
                        <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', $phone->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', $phone->phone) }}">
                        </div>
                      
                        <div class="mb-3">
                            <label>Durum</label>
                            <select name="status" class="form-control">
                                <option value="1" {{ old('status', $phone->status) == 1 ? 'selected' : '' }}>Aktif</option>
                                <option value="0" {{ old('status', $phone->status) == 0 ? 'selected' : '' }}>Pasif</option>
                            </select>
                        </div>
                      
                        <div class="mb-3">
                            <label class="form-label">Ülke Mesajları</label>
                            <div id="country-messages-list">
                                @if(isset($country_messages) && count($country_messages))
                                    @foreach($country_messages as $i => $cm)
                                        <div class="row country-message-row mb-2">
                                            <div class="col-md-4 mb-2 mb-md-0">
                                                <select name="country_messages[{{ $i }}][country_code]" class="form-control">
                                                    <option value="">Ülke Seçiniz</option>
                                                    @foreach($countries as $country)
                                                        <option value="{{ $country->country_code }}" @if($cm->country_code == $country->country_code) selected @endif>{{ $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[{{ $i }}][message]" class="form-control" placeholder="Mesaj" value="{{ $cm->message }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger remove-country-message w-100">Sil</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row country-message-row mb-2">
                                        <div class="col-md-4 mb-2 mb-md-0">
                                            <select name="country_messages[${countryMessageIndex}][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[${countryMessageIndex}][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>
                                @endif
                            </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 = {{ isset($country_messages) ? count($country_messages) : 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\">
                                                <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\" >
                                        </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-primary">Güncelle</button>
                            <a href="{{ route('admin.phones.index') }}" class="btn btn-secondary">İptal</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</main>
@endsection