@extends('layouts.app')

@section('page_title', 'View Photo Slider')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="card">
            <div class="card-header border-0 bg-transparent">
                <h5 class="mb-0">View Photo Slider</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" class="form-control" value="{{ $slider['title'] }}" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <input type="text" class="form-control" value="{{ $slider['description'] }}" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Type</label>
                    <input type="text" class="form-control" value="{{ $slider['type'] }}" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Image</label>
                    @if ($slider['image'])
                        <div>
                            <img src="{{ $slider['image'] }}" alt="{{ $slider['title'] }}" style="max-width: 200px; height: auto;" class="form-control-img">
                        </div>
                    @else
                        <input type="text" class="form-control" value="No image available" readonly>
                    @endif
                </div>
                <div class="mb-3">
                    <label class="form-label">Start Date</label>
                    <input type="text" class="form-control" value="{{ $slider['startDate'] }}" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">End Date</label>
                    <input type="text" class="form-control" value="{{ $slider['endDate'] }}" readonly>
                </div>
                <div class="mb-3">
                    <label class="form-label">Active</label>
                    <input type="text" class="form-control" value="{{ $slider['isActive'] ? 'Yes' : 'No' }}" readonly>
                </div>
                <div class="text-end">
                    <a href="{{ route('photo-slider') }}" class="btn btn-primary">Back</a>
                    <a href="{{ route('photo-slider.edit', $slider['photo_slider_uuid']) }}" class="btn btn-primary">Edit</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection