@extends('admin.layouts.master')

@section('title', 'Slider Details')
@section('parent_title', 'Slider')

@section('content')

<div class="d-flex justify-content-start mb-5">
    <a href="{{ route('admin.sliders.index') }}"
       class="btn btn-sm btn-light-primary">
        <i class="bi bi-arrow-left fs-4 me-1"></i>
        Back
    </a>
</div>

<div class="d-flex flex-column flex-lg-row">

    <!-- Left Side -->

    <div class="flex-lg-row-fluid me-lg-15">

        <div class="card card-flush pt-3 mb-5">

            <div class="card-header">
                <div class="card-title">
                    <h2 class="fw-bolder">
                        Slider Details
                    </h2>
                </div>
            </div>

            <div class="card-body">

                <table class="table table-row-dashed">

                    <tbody>

                        <tr>
                            <td width="200"
                                class="fw-bold text-muted">
                                Title
                            </td>

                            <td>
                                {{ $slider->title }}
                            </td>
                        </tr>

                        <tr>
                            <td class="fw-bold text-muted">
                                Subtitle
                            </td>

                            <td>
                                {{ $slider->subtitle }}
                            </td>
                        </tr>

                        <tr>
                            <td class="fw-bold text-muted">
                                Sort Order
                            </td>

                            <td>
                                {{ $slider->sort_order }}
                            </td>
                        </tr>

                        <tr>
                            <td class="fw-bold text-muted">
                                Status
                            </td>

                            <td>

                                @if($slider->status)

                                    <span class="badge badge-success">
                                        Active
                                    </span>

                                @else

                                    <span class="badge badge-danger">
                                        Inactive
                                    </span>

                                @endif

                            </td>
                        </tr>

                        <tr>
                            <td class="fw-bold text-muted">
                                Created At
                            </td>

                            <td>
                                {{ $slider->created_at->format('d M Y h:i A') }}
                            </td>
                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <!-- Right Side -->

    <div class="flex-column flex-lg-row-auto w-100 w-lg-350px">

        <div class="card card-flush pt-3">

            <div class="card-header">
                <div class="card-title">
                    <h2>Slider Preview</h2>
                </div>
            </div>

            <div class="card-body">

                <div class="text-center">

                    <img src="{{ asset($slider->image) }}"
                         class="img-fluid rounded border mb-5"
                         alt="Slider Image">

                    <h3 class="fw-bolder">
                        {{ $slider->title }}
                    </h3>

                    <p class="text-muted">
                        {{ $slider->subtitle }}
                    </p>

                    @if($slider->status)

                        <span class="badge badge-success">
                            Active Slider
                        </span>

                    @else

                        <span class="badge badge-danger">
                            Inactive Slider
                        </span>

                    @endif

                </div>

            </div>

        </div>

    </div>

</div>

@endsection