@extends('layout.master')

@section('title', 'Mobile Apps')

@push('css')
<style>
    .app-icon {
        font-size: 3rem;
        margin-bottom: 20px;
        color: #012970;
    }
    .store-badge {
        display: inline-block;
        transition: opacity 0.2s;
    }
    .store-badge:hover {
        opacity: 0.8;
    }
    .store-badge img {
        height: 50px;
        width: auto;
    }
    .image-placeholder {
        background-color: #f8f9fa;
        border: 2px dashed #dee2e6;
        border-radius: 10px;
        height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #adb5bd;
        margin-top: 1.5rem;
    }
    .image-placeholder i {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
    .image-preview {
        border: 2px solid #dee2e6;
        border-radius: 12px;
        padding: 5px;
        margin-top: 1.5rem;
        background-color: #fff;
        overflow: hidden;
    }
    .image-preview img {
        border-radius: 8px;
        width: 100%;
        height: auto;
        display: block;
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <h5 class="page-title">Aplikasi Mudah Alih</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item active">Aplikasi Mudah Alih</li>
        </ol>
    </nav>
</div>

<section class="section">
    
    <div class="row g-4">

        <div class="col-12">    
            <div class="card text-center p-4 position-relative">
                <div class="card-body">
                    @if(Auth::user()->role_id != 4)
                    <a href="{{ route('pengurusan_web.aplikasi') }}" class="btn btn-primary btn-sm position-absolute top-0 end-0 m-3">
                        <i class="bi bi-pencil"></i> Kemaskini
                    </a>
                    @endif
                    <h1>{{ $cms['aplikasi-heading'] ?? 'Aplikasi Mudah Alih eGP' }}</h1>
                    <p>{{ $cms['aplikasi-subheading'] ?? '' }}</p>
                </div>
            </div>
        </div>

        <!-- iOS App -->
        <div class="col-lg-6">
            <div class="card app-card text-center p-4 h-100">
                <div class="card-body d-flex flex-column">
                    <div class="app-icon text-primary">
                        <i class="bi bi-apple"></i>
                    </div>
                    <h5 class="fw-bold fs-4 mb-4">Versi iOS</h5>
                    <p class="text-black-50 mb-5">
                        {{ $cms['aplikasi-ios-description'] ?? 'Dapatkan aplikasi eGP di App Store.' }}
                    </p>
                    <div class="">
                        <a href="{{ $cms['aplikasi-ios-url'] ?? '#' }}" class="store-badge" target="_blank">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" alt="Download on the App Store">
                        </a>
                    </div>
                </div>
                @if(isset($cms['aplikasi-ios-image']))
                    <div class="image-preview">
                        <img src="{{ asset('storage/' . $cms['aplikasi-ios-image']) }}" alt="iOS App Preview">
                    </div>
                @else
                    <div class="image-placeholder">
                        <i class="bi bi-image"></i>
                        <p class="mb-0">Sila muat naik gambar</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Android App -->
        <div class="col-lg-6">
            <div class="card app-card text-center p-4 h-100">
                <div class="card-body d-flex flex-column">
                    <div class="app-icon text-success">
                        <i class="bi bi-android2"></i>
                    </div>
                    <h5 class="fw-bold fs-4 mb-4">Versi Android</h5>
                    <p class="text-black-50 mb-5">
                        {{ $cms['aplikasi-android-description'] ?? 'Muat turun aplikasi eGP di Google Play Store.' }}
                    </p>
                    <div class="">
                        <a href="{{ $cms['aplikasi-android-url'] ?? '#' }}" class="store-badge" target="_blank">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" alt="Get it on Google Play">
                        </a>
                    </div>
                </div>
                @if(isset($cms['aplikasi-android-image']))
                    <div class="image-preview">
                        <img src="{{ asset('storage/' . $cms['aplikasi-android-image']) }}" alt="Android App Preview">
                    </div>
                @else
                    <div class="image-placeholder">
                        <i class="bi bi-image"></i>
                        <p class="mb-0">Sila muat naik gambar</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection