@extends('front.layouts.app')
@section('css')

@endsection
@section('content')
<style>
    .competitor-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .competitor-img {
            width: 13rem;
            height: 13rem;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #007bff;
        }
        .vote-btn {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            transition: 0.3s;
        }
        .vote-btn:hover {
            background: #0056b3;
        }
        .video-container {
            border-radius: 12px;
            overflow: hidden;
        }
</style>
@php
$competitor = new stdClass();
$competitor->name = "محمد علي";
$competitor->image = "https://via.placeholder.com/150";
$competitor->video = "https://www.w3schools.com/html/mov_bbb.mp4";

@endphp
<div class="page inner-page-layout compitation-details">

    <div class="page-content p-0">

        <div class="compitation-wrapper lead bg-white ">

            <div class="compitation-section overview">

                <div class="container">
                    <h2 class="text-center mb-4">التصويت للمنافسين</h2>
        
                    <div class="row g-4">
        <!-- Right Section: Competitor Info -->
        <div class="col-lg-6">
            <div class="competitor-card text-center">
                <img src="https://islamicbookfairkw.com/admin_/app-assets/images/portrait/small/avatar-s-11.jpg" alt="المنافس" class="competitor-img mb-3">
                <h3 class="fw-bold">محمد علي</h3>
                <p class="text-muted">منافس موهوب يتمتع بمهارات استثنائية ويطمح للفوز.</p>
                <button class="vote-btn">التصويت لهذا المنافس</button>
            </div>
        </div>
        <!-- Left Section: Video -->
        <div class="col-lg-6">
            <div class="video-container">
                <video class="w-100 rounded" controls>
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    متصفحك لا يدعم تشغيل الفيديو.
                </video>
            </div>
        </div>

    </div>
                </div>

            </div> 


                      {{--  {!! getSettingValue('compitation') !!} --}}

        </div>

    </div><!-- page-content -->

</div> <!-- page -->


@endsection
@section('js')

@endsection