@extends('layouts.app')
@section('js')
    {{-- <script src="{{ asset('js/video.js') }}"></script> --}}
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 mb-5'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Youtube Queue') }}
            </h2>
        </div>
        <form action="{{route('queue.youtube.add')}}" method='post'>
        @csrf
            <div class='row mt-3'>
                <div class='col-5'>
                    <input type='text' name='url' class='form-control' placeholder='Youtube URL'/>
                </div>
                <div class='col-1'>
                    <input class="btn btn-default" type="submit" value="Add"></button>
                </div>
            </div>
        </form>
    </div>
    <div class='row mt-5'>
    <h2>Queue</h2>
    </div>
    @for ($i = 0; $i < count($urls); $i++)
        <div class='row mt-3'>
            <div class='col-1'>
                @if($urls[$i]['status'] == 'pending')
                    <i class="fa-regular fa-clock fa-spin fa-xl"></i>
                @elseif($urls[$i]['status'] == 'completed')
                    <i class="fa-solid fa-check" style="color: #3db351;"></i>
                @endif
            </div>
            <div class='col-5'>
                <a href="{{ $urls[$i]['url'] }}" target="_blank">{{ $urls[$i]['url'] }}</a>
            </div>
            <div class='col-1'>
                <form action="{{route('queue.youtube.delete')}}" method='post'>
                    <input class="btn btn-default" type="submit" value="Delete"></button>
                    @csrf
                    <input type='hidden' name='id' value='{{$urls[$i]['id']}}'/>
                </form>
            </div>
        </div>
    @endfor
    
@endsection