@extends('layouts.app')
@section('admin_content')
@push('styles')
   <style>
    .mobile-card {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    padding: 15px 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.mobile-card .fw-bold { color: #4F46E5; }
.mobile-card img { border-radius: 6px; }
    </style>
@endpush
<main class="app-main">
<div class="container-fluid">
<div class="app-content-header">Toplu Mesaj Ekle ({{ $title->title }})</div>
   
    <div class="card">
        <form action="{{ route('admin.messages.store') }}" method="POST" enctype="multipart/form-data" class="">
            @csrf
            <input type="hidden" name="titles" value="{{ $title->id }}">
            <div class="card-body">
                <div class="mb-3">
                    <label for="name" class="form-label">İsim</label>
                    <input type="text" class="form-control" name="name" id="name" >
                </div>
                <div class="mb-3">
                    <label for="image" class="form-label">Görsel Resmi</label>
                    <input type="file" class="form-control" name="image" id="image" accept="image/*">
                </div>
                <div class="mb-3">
                    <label for="message" class="form-label">Mesajınız</label>
                    <textarea class="form-control" name="message" id="message" rows="4" ></textarea>
                </div>
                <div class="mb-3">
                    <label for="country" class="form-label">Ülke</label>
                    <select class="form-select" name="country" id="country">
                            <option value="0">Bütün Ülkeler</option>
                        @foreach($countries as $country)
                            <option value="{{ $country['country_code'] }}">{{ $country['country_name'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-success">Oluştur</button>
                    <a href="{{ route('admin.titles.index') }}" class="btn btn-secondary ms-2">Geri Dön</a>
                </div>
            </div>
        </form>
    </div>  
    <hr>
    <h2 class="mt-5 mb-3">Mevcut Mesajlar</h2>
    <div class="table-responsive">
        <div class="d-none d-md-block">
    <table class="table table-bordered table-striped align-middle">
        <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>İsim</th>
                <th>Mesaj</th>
                <th>Ülke</th>
                <th>Resim</th>
                <th>Tarih</th>
                <th>Sil</th>
            </tr>
        </thead>
        <tbody>
            @forelse($messages as $msg)
            <tr>
                <td>{{ $msg->id }}</td>
                <td>{{ $msg->name }}</td>
                <td style="max-width:250px; word-break:break-word;">{{ $msg->message }}</td>
                <td>{{ $msg->country }}</td>
                <td>
                    @if($msg->image)
                        <img src="{{ asset('storage/'.$msg->image) }}" alt="Görsel" style="max-width:60px; max-height:60px;">
                    @endif
                </td>
                <td>{{ $msg->created_at }}</td>
                <td>
                    <form action="{{ route('admin.messages.destroy', $msg->id) }}" method="POST" onsubmit="return confirm('Mesajı silmek istediğinize emin misiniz?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-sm">Sil</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="text-center">Henüz mesaj yok.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Mobil kartlar -->
<div class="mobile-cards d-block d-md-none mt-3">
    @forelse($messages as $msg)
        <div class="mobile-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="fw-bold">#{{ $msg->id }}</span>
                <form action="{{ route('admin.messages.destroy', $msg->id) }}" method="POST" onsubmit="return confirm('Mesajı silmek istediğinize emin misiniz?');" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="soft-action btn btn-link p-0 m-0" title="Sil" style="background: none; border: none; color: #dc3545; font-size: 1.3rem;">🗑️</button>
                </form>
            </div>
            <div class="mb-1"><span class="fw-bold">İsim:</span> {{ $msg->name }}</div>
            <div class="mb-1"><span class="fw-bold">Mesaj:</span> <span style="word-break:break-word;">{{ $msg->message }}</span></div>
            <div class="mb-1"><span class="fw-bold">Ülke:</span> {{ $msg->country }}</div>
            @if($msg->image)
                <div class="mb-2"><img src="{{ asset('storage/'.$msg->image) }}" alt="Görsel" style="max-width:80px; max-height:80px;"></div>
            @endif
            <div class="mb-1 text-muted" style="font-size:0.95em;">{{ $msg->created_at }}</div>
        </div>
    @empty
        <div class="text-center text-muted">Henüz mesaj yok.</div>
    @endforelse
</div>

    </div>
</div>
</main>
@endsection