@extends('admin.layouts.app')

@section('title', 'نظام إدارة توكنات التليجرام')

@push('styles')
<style>
:root {
            --main-color: #3498db;
            --secondary-color: #2980b9;
            --danger-color: #e74c3c;
            --success-color: #2ecc71;
        }
        
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f8f9fa;
        }
        
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: none;
        }
        
        .card-header {
            background-color: var(--main-color);
            color: white;
            border-radius: 10px 10px 0 0 !important;
        }
        
        .btn-primary {
            background-color: var(--main-color);
            border-color: var(--main-color);
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
        }
        
        .table th {
            background-color: #f1f5f9;
            font-weight: 600;
        }
        
        .action-btns .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
        
        @media (max-width: 768px) {
            .table-responsive {
                border: none;
            }
            
            .dataTables_wrapper .dataTables_filter {
                text-align: left !important;
            }
        }
</style>
@endpush

@section('content')
<div class="container py-5">
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        
        <div class="row">
            <div class="col-lg-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ isset($telegramToken) ? 'تعديل التوكن' : 'إضافة توكن جديد' }}</h5>
                        @if (isset($telegramToken))
                            <a href="{{ route('admin.telegram-token.index') }}" class="btn btn-sm btn-light">
                                <i class="fas fa-times"></i> إلغاء
                            </a>
                        @endif
                    </div>
                    <div class="card-body">
                        @if (isset($telegramToken))
                            <form action="{{ route('admin.telegram-token.update', $telegramToken->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                        @else
                            <form action="{{ route('admin.telegram-token.store') }}" method="POST">
                                @csrf
                        @endif
                            
                            <div class="mb-3">
                                <label for="token" class="form-label">توكن البوت</label>
                                <input type="text" class="form-control @error('token') is-invalid @enderror" id="token" name="token" required value="{{ old('token', isset($telegramToken) ? $telegramToken->token : '') }}">
                                @error('token')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <div class="mb-3">
                                <label for="chat_id" class="form-label">رقم المحادثة (Chat ID)</label>
                                <input type="text" class="form-control @error('chat_id') is-invalid @enderror" id="chat_id" name="chat_id" required value="{{ old('chat_id', isset($telegramToken) ? $telegramToken->chat_id : '') }}">
                                @error('chat_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> {{ isset($telegramToken) ? 'حفظ التعديلات' : 'إضافة التوكن' }}
                            </button>
                        </form>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">قائمة التوكنات</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tokensTable" class="table table-striped table-hover" style="width:100%">
                               <thead>
    <tr>
        <th>توكن البوت (Token)</th>
        <th>(Chat ID)</th>  <!-- العنوان أصبح واضحاً -->
        <th>الإجراءات</th>
    </tr>
</thead>
                                </thead>
                                <tbody>
                                    @forelse ($tokens as $token)
                                        <tr>
                                            <td>
                                                <code class="text-muted">
                                                    🔒 {{ substr($token->token, 0, 10) }}...********
                                                </code>
                                                <small class="text-danger d-block">مشفر للحماية</small>
                                            </td>
                                            <td>
                                                <span class="text-muted">{{ substr($token->chat_id, 0, 4) }}****</span>
                                            </td>
                                            <td class="action-btns">
                                                <a href="{{ route('admin.telegram-token.edit', $token->id) }}" class="btn btn-sm btn-primary">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('admin.telegram-token.destroy', $token->id) }}" method="POST" style="display:inline;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('هل أنت متأكد من حذف هذا التوكن؟')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center">لا توجد توكنات</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
  <script>
    $(document).ready(function() {
        $('#tokensTable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/ar.json'
            },
            responsive: true,
            paging: false,  
            info: false,     
            searching: false, 
            order: [[0, 'desc']]
        });
    });
</script>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
        $('#tokensTable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/ar.json'
            },
            responsive: true,
            paging: false,  
            info: false,     
            searching: false, 
            order: [[0, 'desc']]
        });
    });
</script>
@endpush