@extends('layouts.master')
@section('title') @lang('translation.live_streaming') @endsection

@section('content')

    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.live_streaming')
        @endslot
        @slot('title')
            @lang('translation.live_streaming')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- form -->
    <div class="form-wrapper mb-5">
        <form id="join-form" name="join-form" method="post" action="{{url('live-streaming')}}">
        @csrf
            <div class="join-info-group d-flex align-items-end">
                <div class="form-item" style="margin-right: 20px;">
                    <label class="form-label">Channel</label>
                    <input class="form-control" id="channel" type="text" placeholder="enter channel name" name="name" required>
                </div>
                <div class="button-group">
                    <button id="host-join" type="submit" class="btn btn-primary btn-sm" style="line-height: 30px;">Join as host</button>            
                </div>          
            </div>
        </form>
    </div>

    <!-- Items Showcase -->
    <div class="row row-cols-xxl-5 row-cols-xl-4 row-cols-lg-3 row-cols-md-2 row-cols-1">
        @php
            $sound = \App\Models\User::find(auth()->user()->id)->sound != null ? asset("").\App\Models\User::find(auth()->user()->id)->sound : asset('/sounds/custom/coin.mp3');
        @endphp
        @foreach ($liveStreamings as $liveStreaming)
            <div class="col list-element">
                <div class="card explore-box card-animate ribbon-box right">
                    <div class="explore-place-bid-img" style="height: 250px;">
                        <div class="ribbon-two ribbon-two-danger"><span><i class="ri-fire-fill align-bottom"></i>Live</span></div>
                        <img src="{{ asset($liveStreaming->user->profile_picture) }}" alt="{{ $liveStreaming->user->username }}" class="card-img-top explore-img" />
                        <div class="bg-overlay"></div>
                        <div class="place-bid-btn">
                            <a href='{{ url("/live-streaming/{$liveStreaming->id}") }}' class="btn btn-success">Join</a>
                        </div>
                    </div>
                    <h5></h5>
                    <div class="card-body">
                        <h5 class="mb-1"><a href="apps-nft-item-details">{{ $liveStreaming->name }}</a></h5>
                    </div>
                    <div class="card-footer border-top border-top-dashed">
                        <div class="d-flex align-items-center">
                            <div class="fs-14">
                                <i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Host: <span class="fw-medium">{{ $liveStreaming->user->username }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>    
@endsection