{{-- resources/views/admin/records/show.blade.php --}}

@extends('admin.master')

@section('title', __('Records'))

@section('styles')
    <!-- إضافة تنسيقات مخصصة -->
    <style>
        /* اللون الأساسي للداشبورد */
        :root {
            --primary-color: #621310;
            --secondary-color: #f8f9fa;
            --border-color: #e9ecef;
            --text-color: #333;
            --hover-color: #a1462e;
        }

        /* تنسيقات البطاقات */
        .card {
            border: none;
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .card-title {
            color: var(--primary-color);
            font-weight: bold;
        }

        /* تبويبات مخصصة */
        .nav-tabs-custom .nav-link.active {
            background-color: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

        .nav-tabs-custom .nav-link {
            color: var(--primary-color);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .nav-tabs-custom .nav-link:hover {
            background-color: var(--hover-color);
            color: #fff;
        }

        /* تنسيقات Timeline البديلة */
        .timeline {
            padding: 20px 0;
        }

        .timeline-item {
            position: relative;
            padding-left: 40px;
            margin-bottom: 30px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            width: 20px;
            height: 20px;
            background-color: var(--primary-color);
            border-radius: 50%;
            box-shadow: 0 0 0 4px var(--secondary-color);
        }

        .timeline-content {
            background-color: var(--secondary-color);
            padding: 15px 20px;
            border-radius: 8px;
            position: relative;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }

        .timeline-content:hover {
            background-color: #fff;
        }

        .timeline-title {
            font-size: 1.1rem;
            color: var(--primary-color);
            margin-bottom: 5px;
            font-weight: bold;
        }

        .timeline-text {
            margin: 0;
            color: var(--text-color);
        }

        /* استجابة التصميم */
        @media (max-width: 576px) {
            .timeline-item {
                padding-left: 30px;
            }

            .timeline-item::before {
                left: -10px;
            }

            .timeline-content {
                padding: 10px 15px;
            }
        }
    </style>
@endsection

@section('content')
    <!-- بداية عنوان الصفحة -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="page-title">{{ __('Records') }}</h4>
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.records.index') }}">{{ __('Records') }}</a>
                    </li>
                    <li class="breadcrumb-item active">{{ __('Show Record') }}</li>
                </ol>
            </div>
        </div>
    </div>
    <!-- نهاية عنوان الصفحة -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <!-- تبويبات حديثة -->
                    <ul class="nav nav-tabs nav-tabs-custom nav-justified mb-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#user-info" role="tab">
                                <i class="fas fa-user me-1"></i> {{ __('User Information') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#changes" role="tab">
                                <i class="fas fa-exchange-alt me-1"></i> {{ __('Changes') }}
                            </a>
                        </li>
                    </ul>
                    <!-- نهاية التبويبات -->

                    <div class="tab-content">
                        <!-- معلومات المستخدم -->
                        <div class="tab-pane fade show active" id="user-info" role="tabpanel">
                            <div class="row g-4">
                                <div class="col-md-4">
                                    <div class="card" data-aos="fade-up">
                                        <div class="card-body">
                                            <h5 class="card-title"><i class="fas fa-user me-2"></i> {{ __('Name') }}
                                            </h5>
                                            <p class="card-text">{{ old('name', $record->admin->name) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card" data-aos="fade-up" data-aos-delay="100">
                                        <div class="card-body">
                                            <h5 class="card-title"><i
                                                    class="fas fa-envelope me-2"></i> {{ __('Email') }}</h5>
                                            <p class="card-text">{{ old('email', $record->admin->email) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card" data-aos="fade-up" data-aos-delay="200">
                                        <div class="card-body">
                                            <h5 class="card-title"><i class="fas fa-phone me-2"></i> {{ __('Phone') }}
                                            </h5>
                                            <p class="card-text">{{ old('phone', $record->admin->phone) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- نهاية معلومات المستخدم -->

                        <!-- التغييرات -->
                        <div class="tab-pane fade" id="changes" role="tabpanel">
                            @php
                                $changes = json_decode($record->changes, true);
                            @endphp
                            @if($changes && is_array($changes))
                                <div class="row">
                                    @foreach($changes as $field => $change)
                                        <div class="col-md-6" data-aos="fade-right"
                                             data-aos-delay="{{ $loop->index * 100 }}">
                                            <div class="card mb-4">
                                                <div class="card-body">
                                                    <h5 class="card-title"><i
                                                            class="fas fa-edit me-2"></i>{{ ucfirst($field) }}</h5>
                                                    <p class="card-text"><strong>{{ __('Old') }}
                                                            :</strong> {{ $change['old'] ?? '-' }}</p>
                                                    <p class="card-text"><strong>{{ __('New') }}
                                                            :</strong> {{ $change['new'] ?? '-' }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-info" data-aos="fade-in">
                                    {{ __('No changes available.') }}
                                </div>
                            @endif
                        </div>
                        <!-- نهاية التغييرات -->
                    </div>
                </div> <!-- نهاية card-body -->
            </div> <!-- نهاية card-->
        </div>
    </div>
@endsection

@section('script')
    <!-- Bootstrap JS Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-q2kyKqH+Vb/8k4g5RwOWeGXz+JsM/jmHSzLRC1jpG3H4/e2uWJ+LxRAJXXbdD4aJ"
            crossorigin="anonymous"></script>

    <!-- AOS JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

    <!-- تفعيل AOS -->
    <script>
        AOS.init({
            duration: 800, // مدة الأنيميشن بالميلي ثانية
            easing: 'ease-in-out', // نوع الت easing
            once: true, // إذا كانت الأنيميشن تحدث مرة واحدة فقط أثناء التمرير
        });
    </script>

@endsection