@extends('app')

@section('content')
    <div class="container py-5">

        <div class="row">

            <div class="col-md-7">

                <div id="projectCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2700">

                    <div class="carousel-inner">

                        @foreach ($project->images as $key => $img)
                            <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">

                                <img src="{{ asset('storage/' . $img->gambar) }}" class="d-block w-100 rounded">

                            </div>
                        @endforeach

                    </div>

                    <button class="carousel-control-prev" type="button" data-bs-target="#projectCarousel"
                        data-bs-slide="prev">

                        <span class="carousel-control-prev-icon"></span>

                    </button>

                    <button class="carousel-control-next" type="button" data-bs-target="#projectCarousel"
                        data-bs-slide="next">

                        <span class="carousel-control-next-icon"></span>

                    </button>

                </div>

            </div>

            <div class="col-md-5">

                <h2 class="mb-3">
                    {{ $project->nama_aplikasi }}
                </h2>

                <p class="text-muted">
                    {{ $project->deskripsi }}
                </p>

                <div class="mt-4">

                    <a href="{{ $project->link }}" target="_blank" class="btn btn-primary">

                        <i class="fa-solid fa-arrow-up-right-from-square"></i>
                        Buka Aplikasi

                    </a>

                    <a href="{{ route('project.index') }}" class="btn btn-secondary">

                        Kembali

                    </a>

                </div>

            </div>

        </div>

    </div>
@endsection
