@extends('layouts.admin')

@section('title', __('View Home Slider'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('View Home Slider') }}</h1>
            <p class="mb-0 text-muted">{{ __('Details of the home slider') }} #{{ $homeSlider->id }}</p>
        </div>
        <div>
            <a href="{{ route('admin.home-sliders.edit', ['home_slider' => $homeSlider, 'locale' => app()->getLocale()]) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> {{ __('Edit Slider') }}
            </a>
            <a href="{{ route('admin.home-sliders.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary ml-2">
                <i class="fas fa-arrow-left"></i> {{ __('Back to Sliders') }}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Slider Details') }}</h6>
                </div>
                <div class="card-body">
                    <!-- Basic Information -->
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">{{ __('Basic Information') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <th>{{ __('ID') }}</th>
                                        <td>{{ $homeSlider->id }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Created At') }}</th>
                                        <td>{{ $homeSlider->created_at->format('Y-m-d H:i:s') }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Updated At') }}</th>
                                        <td>{{ $homeSlider->updated_at->format('Y-m-d H:i:s') }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Status') }}</th>
                                        <td>
                                            @if($homeSlider->is_published)
                                                <span class="badge badge-success">{{ __('Published') }}</span>
                                            @else
                                                <span class="badge badge-secondary">{{ __('Draft') }}</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Sort Order') }}</th>
                                        <td>{{ $homeSlider->sort_order ?? 'N/A' }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <th>{{ __('Slider Type') }}</th>
                                        <td>
                                            <span class="badge badge-info">{{ $homeSlider->slider_type ?? 'N/A' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Language') }}</th>
                                        <td>
                                            <span class="badge badge-primary">{{ $homeSlider->language ?? 'N/A' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Target Audience') }}</th>
                                        <td>
                                            <span class="badge badge-warning">{{ $homeSlider->target_audience ?? 'N/A' }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Start Date') }}</th>
                                        <td>{{ $homeSlider->start_date ? $homeSlider->start_date->format('Y-m-d H:i:s') : 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('End Date') }}</th>
                                        <td>{{ $homeSlider->end_date ? $homeSlider->end_date->format('Y-m-d H:i:s') : 'N/A' }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">{{ __('Content') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">{{ __('English') }}</h6>
                                <p><strong>{{ __('Title') }}:</strong> {{ $homeSlider->title_en ?? 'N/A' }}</p>
                                <p><strong>{{ __('Subtitle') }}:</strong> {{ $homeSlider->subtitle_en ?? 'N/A' }}</p>
                                <p><strong>{{ __('Description') }}:</strong> {{ $homeSlider->description_en ?? 'N/A' }}</p>
                                <p><strong>{{ __('Primary Button') }}:</strong> {{ $homeSlider->button_text_en ?? 'N/A' }} ({{ $homeSlider->button_link ?? 'N/A' }})</p>
                                <p><strong>{{ __('Secondary Button') }}:</strong> {{ $homeSlider->secondary_button_text_en ?? 'N/A' }} ({{ $homeSlider->secondary_button_link ?? 'N/A' }})</p>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary" dir="rtl">{{ __('Arabic') }}</h6>
                                <p><strong>{{ __('Title') }}:</strong> {{ $homeSlider->title_ar ?? 'N/A' }}</p>
                                <p><strong>{{ __('Subtitle') }}:</strong> {{ $homeSlider->subtitle_ar ?? 'N/A' }}</p>
                                <p><strong>{{ __('Description') }}:</strong> {{ $homeSlider->description_ar ?? 'N/A' }}</p>
                                <p><strong>{{ __('Primary Button') }}:</strong> {{ $homeSlider->button_text_ar ?? 'N/A' }} ({{ $homeSlider->button_link ?? 'N/A' }})</p>
                                <p><strong>{{ __('Secondary Button') }}:</strong> {{ $homeSlider->secondary_button_text_ar ?? 'N/A' }} ({{ $homeSlider->secondary_button_link ?? 'N/A' }})</p>
                            </div>
                        </div>
                    </div>

                    <!-- Design & Settings -->
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">{{ __('Design & Settings') }}</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <th>{{ __('Content Position') }}</th>
                                        <td>{{ $homeSlider->content_position ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Text Alignment') }}</th>
                                        <td>{{ $homeSlider->text_alignment ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Text Color') }}</th>
                                        <td><span style="color: {{ $homeSlider->text_color ?? '#000' }};">{{ $homeSlider->text_color ?? 'N/A' }}</span></td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Button Style') }}</th>
                                        <td>{{ $homeSlider->button_style ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Animation Type') }}</th>
                                        <td>{{ $homeSlider->animation_type ?? 'N/A' }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless">
                                    <tr>
                                        <th>{{ __('Overlay Color') }}</th>
                                        <td><span style="background-color: {{ $homeSlider->overlay_color ?? 'transparent' }}; width: 50px; height: 20px; display: inline-block;"></span> {{ $homeSlider->overlay_color ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <th>{{ __('Overlay Opacity') }}</th>
                                        <td>{{ $homeSlider->overlay_opacity ? $homeSlider->overlay_opacity * 100 . '%' : 'N/A' }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Media Preview -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Media Preview') }}</h6>
                </div>
                <div class="card-body text-center">
                    @if($homeSlider->desktopImage)
                        <img src="{{ $homeSlider->desktopImage->url }}" alt="Desktop Image" class="img-fluid mb-2" style="max-height: 200px; object-fit: cover;">
                        <p class="small text-muted">{{ __('Desktop Image') }}</p>
                    @else
                        <p class="text-muted">{{ __('No desktop image') }}</p>
                    @endif

                    @if($homeSlider->mobileImage)
                        <img src="{{ $homeSlider->mobileImage->url }}" alt="Mobile Image" class="img-fluid mb-2" style="max-height: 150px; object-fit: cover;">
                        <p class="small text-muted">{{ __('Mobile Image') }}</p>
                    @else
                        <p class="small text-muted">{{ __('No mobile image') }}</p>
                    @endif

                    @if($homeSlider->videoMedia)
                        <video class="img-fluid mb-2" style="max-height: 200px;" controls>
                            <source src="{{ $homeSlider->videoMedia->url }}" type="{{ $homeSlider->videoMedia->mime_type }}">
                            {{ __('Your browser does not support the video tag.') }}
                        </video>
                        <p class="small text-muted">{{ __('Video Media') }}</p>
                    @else
                        <p class="small text-muted">{{ __('No video media') }}</p>
                    @endif

                    @if($homeSlider->overlayImage)
                        <img src="{{ $homeSlider->overlayImage->url }}" alt="Overlay Image" class="img-fluid" style="max-height: 100px; object-fit: cover;">
                        <p class="small text-muted">{{ __('Overlay Image') }}</p>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Quick Actions') }}</h6>
                </div>
                <div class="card-body">
                    <a href="{{ route('admin.home-sliders.edit', ['home_slider' => $homeSlider, 'locale' => app()->getLocale()]) }}" class="btn btn-primary btn-block mb-2">
                        <i class="fas fa-edit"></i> {{ __('Edit') }}
                    </a>
                    <a href="{{ route('admin.home-sliders.index', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary btn-block mb-2">
                        <i class="fas fa-list"></i> {{ __('View All') }}
                    </a>
                    @if(auth()->user()->can('delete', $homeSlider))
                        <form action="{{ route('admin.home-sliders.destroy', ['home_slider' => $homeSlider, 'locale' => app()->getLocale()]) }}" method="POST" style="display: inline;" onsubmit="return confirm('{{ __('Are you sure?') }}')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-block">
                                <i class="fas fa-trash"></i> {{ __('Delete') }}
                            </button>
                        </form>
                    @endif
                </div>
            </div>

            <!-- Analytics Summary -->
            @if($homeSlider->analytics && $homeSlider->analytics->count() > 0)
                <div class="card shadow mt-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Analytics Summary') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-6 border-right">
                                <h5 class="text-primary">{{ $homeSlider->analytics->where('event_type', 'view')->count() }}</h5>
                                <p class="mb-0">{{ __('Views') }}</p>
                            </div>
                            <div class="col-6">
                                <h5 class="text-success">{{ $homeSlider->analytics->where('event_type', 'click')->count() }}</h5>
                                <p class="mb-0">{{ __('Clicks') }}</p>
                            </div>
                        </div>
                        <hr>
                        <p class="small text-muted mb-0">{{ __('Last updated: ') }}{{ $homeSlider->analytics->max('event_at')?->format('Y-m-d H:i:s') ?? 'N/A' }}</p>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection