@extends('_inc/base')

@section('content')
    <section class="p--7">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    @include('_inc/admin_dashboard_top')
                    <div class="card" style="margin-bottom: 30px;">
                        <div class="card-body">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade active show" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
                                    @if (count($courses) > 0)
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="text-center">
                                                    <h4>Showing all your courses ({{ count($courses) }})</h4>
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                @foreach($courses as $course)
                                                    <a href="{{ site_url().'course/'.$course['permlink'] }}">
                                                        <div class="course-card">
                                                            <div class="card-content">
                                                                <div class="row">
                                                                    <div class="col-lg-4 no-left no-right">
                                                                        <img src="{{ base_url(). 'img/courses/covers/'.$course['meta_data']['cover_img'] }}">
                                                                    </div>
                                                                    <div class="col-lg-6">
                                                                        <p class="card-title"><b>{{ $course['title'] }}</b></p>
                                                                        @if($course['category'] == 'business')
                                                                            <span class="badge badge-pill badge-warning">{{ $course['category'] }}</span>
                                                                        @elseif($course['category'] == 'programming')
                                                                            <span class="badge badge-pill badge-primary">{{ $course['category'] }}</span>
                                                                        @elseif($course['category'] == 'design')
                                                                            <span class="badge badge-pill badge-success">{{ $course['category'] }}</span>
                                                                        @endif
                                                                        <div style="display: inline-block;" class="star-rating small-star">
                                                                            <span class="fa fa-star-o" data-rating="1"></span>
                                                                            <span class="fa fa-star-o" data-rating="2"></span>
                                                                            <span class="fa fa-star-o" data-rating="3"></span>
                                                                            <span class="fa fa-star-o" data-rating="4"></span>
                                                                            <span class="fa fa-star-o" data-rating="5"></span>
                                                                            <input type="hidden" class="rating-value" value="{{ $course['meta_data']['rating'] }}">
                                                                        </div>
                                                                        <small class="text-muted"> {{ $course['meta_data']['videos_count'] }} Videos</small><br>
                                                                        <small>{{ $course['description'] }}</small><br>
                                                                    </div>
                                                                    <div class="col-lg-2">
                                                                        <p class="card-title pull-right">${{ number_format($course['cost'],2,'.',',') }}</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </a>
                                                @endforeach
                                            </div>
                                        </div>
                                    @else
                                        <div class="text-center p-4">
                                            <a>
                                                <img src="https://png.icons8.com/color/150/3498db/saving-book.png">
                                            </a>
                                            <p>You have not added any course yet</p>
                                        </div>
                                    @endif
                                </div>
                                <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <form method="post" action="{{ site_url().'admin/add_course' }}">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <input type="text" name="title" class="form-control" placeholder="Title of course">
                                                        </div>
                                                        <div class="form-group">
                                                            <input type="number" min="1" max="100000" step="0.01" name="amount" class="form-control" placeholder="Cost of course in $">
                                                        </div>
                                                        <div class="form-group">
                                                            <div class="custom-control custom-radio mb-3">
                                                                <input required name="category" value="programming" class="custom-control-input" id="customRadio1" checked="" type="radio">
                                                                <label class="custom-control-label" for="customRadio1">Programming</label>
                                                            </div>
                                                            <div class="custom-control custom-radio mb-3">
                                                                <input required name="category" value="design" class="custom-control-input" id="customRadio2" type="radio">
                                                                <label class="custom-control-label" for="customRadio2">Design</label>
                                                            </div>
                                                            <div class="custom-control custom-radio mb-3">
                                                                <input required name="category" value="web" class="custom-control-input" id="customRadio3" type="radio">
                                                                <label class="custom-control-label" for="customRadio3">Web design</label>
                                                            </div>
                                                            <div class="custom-control custom-radio mb-3">
                                                                <input required name="category" value="business" class="custom-control-input" id="customRadio4" type="radio">
                                                                <label class="custom-control-label" for="customRadio4">Business development</label>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <small>Key things they will learn</small>
                                                            <div class="__key_topics">

                                                            </div>
                                                            <div class="form-group">
                                                                <input type="text" id="title" class="form-control" placeholder="Title of key topic">
                                                            </div>
                                                            <div class="form-group">
                                                                <textarea id="body" class="form-control" rows="3" placeholder="Description of key topic" maxlength="150"></textarea>
                                                            </div>
                                                            <label class="upload-label special-label __add_key_topic">Add what to learn</label>
                                                        </div>
                                                        <div class="form-group">
                                                            <textarea required name="description" class="form-control" rows="3" placeholder="Course description" maxlength="110"></textarea>
                                                        </div>
                                                        <div class="form-group">
                                                            <textarea required name="body" class="form-control" rows="15" placeholder="Course body"></textarea>
                                                        </div>
                                                        <div class="form-group">
                                                            <button type="submit" class="btn btn-success w-100">
                                                                <span class="nav-link-inner--text">Save Course</span>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <small>Course cover photo</small>
                                                                <img id="courseCover" class="w-100" src="{{ base_url().'img/no-image.png' }}">
                                                                <input type="file" id="cover" data-type="image" class="inputfile"/>
                                                                <label for="cover" class="upload-label">Choose a file</label><br>
                                                                <input name="course_cover" value="" type="hidden">
                                                                <div class="progress-wrapper">
                                                                    <div class="progress-success">
                                                                        <div class="progress-label">
                                                                            <span class="progresss">* only images with max size of 500 kb</span>
                                                                        </div>
                                                                        <div class="progress-percentage">
                                                                            <span class="progress-percent"></span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="progress">
                                                                        <div class="progress-bar bg-default" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <small>Course Intro Video</small><br>
                                                                <img class="w-100" src="{{ base_url().'img/no-video.png' }}">
                                                                <input type="file" id="intro" class="inputfile" data-type="video"/>
                                                                <label for="intro" class="upload-label">Choose a file</label><br>
                                                                <input name="course_intro" value="" type="hidden">
                                                                <div class="progress-wrapper">
                                                                    <div class="progress-success">
                                                                        <div class="progress-label">
                                                                            <span class="progresss">* only images with max size of 5 mb</span>
                                                                        </div>
                                                                        <div class="progress-percentage">
                                                                            <span class="progress-percent"></span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="progress">
                                                                        <div class="progress-bar bg-default" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{ csrf_field() }}
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection