@extends('layouts.admin')

@section('content')
    <!--App-Content-->
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <div class="row" style="border: 2px;border-radius: 7px; width:820px; height:500px; background-color:gray; position: relative; top:50px">
                <iframe style="margin-top:10px;" width="520" height="460" src="https://www.youtube.com/embed/o0XbHvKxw7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="row" style="float: right; border: 2px;border-radius: 7px; width:255px; height:500auto;background-color:gray; position: relative; bottom:450px">
                <div class="card" style="background-color: black; width:245px; height:200px; margin:5px">
                    <div style="width:230px; height:150px; margin:5px; background-color:rgb(128, 13, 13); border-radius: 5px;position: relative; right:10px"></div>
                    <div style="width:245px: height:30px; margin:5px;">
                        <label>Video Name ... </label>
                        <button style="width: 100px; height:35px; border-radius: 5px; position: absolute; right: 6px; bottom: 5px"><a href="{{ route('watchrecord') }}">View Course</a></button>
                    </div>
                </div>
                <div class="card" style="background-color: black; width:245px; height:200px; margin:5px">
                    <div style="width:230px; height:150px; margin:5px; background-color:rgb(128, 13, 13); border-radius: 5px;position: relative; right:10px"></div>
                    <div style="width:245px: height:30px; margin:5px;">
                        <label>Video Name ... </label>
                        <button style="width: 100px; height:35px; border-radius: 5px; position: absolute; right: 6px; bottom: 5px"><a href="{{ route('watchrecord') }}">View Course</a></button>
                    </div>
                </div>
                <div class="card" style="background-color: black; width:245px; height:200px; margin:5px">
                    <div style="width:230px; height:150px; margin:5px; background-color:rgb(128, 13, 13); border-radius: 5px;position: relative; right:10px"></div>
                    <div style="width:245px: height:30px; margin:5px;">
                        <label>Video Name ... </label>
                        <button style="width: 100px; height:35px; border-radius: 5px; position: absolute; right: 6px; bottom: 5px"><a href="{{ route('watchrecord') }}">View Course</a></button>
                    </div>
                </div>
                <div class="card" style="background-color: black; width:245px; height:200px; margin:5px; position: relative">
                    <i style="font-size: 150px; z-index: 10; position: absolute; left:50px; bottom: 7px" class="mdi mdi-lock"></i>
                    <div style="width:230px; height:150px; margin:5px; background-color:rgb(128, 13, 13); border-radius: 5px;position: relative; right:10px"></div>
                        <div style="width:245px: height:30px; margin:5px;">
                        <label>Video Name ... </label>
                        <button style="width: 100px; height:35px; border-radius: 5px; position: absolute; right: 6px; bottom: 5px"><a href="{{ route('watchrecord') }}">Pay Video</a></button>
                    </div>
                </div>
            </div>
        </div>

    </div>


@endsection
{{-- <script>
    function activeInActive(idVal, activeValue){
        $.ajax({
            url: "{{ url('zoom_active') }}",
            method: "GET",
            data: {
                id: idVal,
                active: activeValue,
            },
            success: function(result){
                console.log(result);
            }
        });
    }
</script> --}}
@section('admin-js')
    {{-- <script>
        $(document).ready(function() {
            // Get Record data using it's id
            jQuery('body').on('click', '.edit', function() {
                var t_id = $(this).val();
                $.get('/staff/teacher/type/' + t_id, function(data) {
                    jQuery('#t_id').val(data.ttyid);
                    jQuery('#typeName').val(data.ttyname);
                    jQuery('#submit').val("update");
                    jQuery('#typeform').attr('action', '/staff/teacher/type/' + t_id)
                })
            });

        })
    </script> --}}
@endsection