@extends('layouts.app')

@section('content')
<div class="mt-2 mb-3 d-flex justify-content-between">
    <div>
        <h1 class="title1 d-inline mr-4">Courses</h1>
        <p>List all the courses you have created.</p>
    </div>
    <div>
        <button class="btn btn-light shadow-sm px-3 border" type="button" data-toggle="modal"
            data-target="#addcourse">
            <i class="fa fa-plus"></i>
            Create New
        </button>
        <!-- Add Course Modal -->
<div class="modal fade" tabindex="-1" id="addcourse" aria-labelledby="addCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="mb-2 d-inline">Add New Course</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('addcourse') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-row">
    <div class="form-group col-md-6">
        <h6 class="">Course Category</h6>
        <select name="category" class="form-control border border-primary">
            <option value="Null">Null</option>
            @foreach ($categories as $cat)
    <option value="{{ $cat->name }}">{{ $cat->name }}</option>
@endforeach

        </select>
    </div>
    <div class="form-group col-md-6">
        <h6 class="">Course Title</h6>
        <input type="text" class="form-control border border-primary" name="title" required>
    </div>
    <div class="form-group col-md-12">
        <h6 class="">Description</h6>
        <textarea name="desc" class="form-control border border-primary" rows="4" required></textarea>
    </div>
    <div class="form-group col-md-6">
        <h6 class="">Amount {{ $settings->currency }}</h6>
        <input type="number" class="form-control border border-primary" name="amount">
        <small class="mt-2">
            The amount users can pay to get this course. If empty, the course will be available for free.
        </small>
    </div>
    <div class="form-group col-md-6">
        <h6 class="">Course Image (File)</h6>
        <input type="file" class="form-control border border-primary" name="image">
        @error('image')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>
    <div class="form-group col-md-12">
        <h6 class="">Course Image (Url)</h6>
        <input type="text" class="form-control border border-primary" name="image_url">
    </div>
    <h6>Use either file upload or URL to choose a course image. If both are entered, the file upload will be used.</h6>
</div>
<button type="submit" class="px-4 btn btn-primary">Add Course</button>

                </form>
            </div>
        </div>
    </div>
</div>

    </div>
</div>
<x-admin.alert />
<div class="mt-2 mb-5 row">
    @forelse ($courses as $course)
    <div class="col-md-4">
        <div class="card">
            <img src="{{ asset($course->image_url) }}" class="card-img-top" alt="course image">
            <div class="card-body">
                <h4 class="font-weight-bolder">
                    {{ $course->title }}
                </h4>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <a href="#" class="btn btn-primary btn-sm px-2" data-toggle="modal"
                        data-target="#editcourse{{ $course->id }}">Edit Course</a>
                    <a href="{{ route('lessons', $course->id) }}">
                        <div class="d-flex align-items-center ">
                            <i class="mr-1 fa fa-book"></i>
                            <span>
                                {{ $course->lessons->count() }}
                                {{ $course->lessons->count() > 1 ? 'Lessons' : 'Lesson' }}
                            </span>
                            <i class="fa fa-share ml-1"></i>
                        </div>
                    </a>
                </div>
                <div class="mt-3">
                    <h2 class="font-weight-bolder ">
                        {{ !$course->amount ? 'Free' : $settings->currency . $course->amount }}
                    </h2>
                </div>
                <a href="#" class="btn btn-danger btn-sm px-2 btn-block mt-3" data-toggle="modal"
                    data-target="#deletecourse{{ $course->id }}">Delete Course</a>
            </div>
        </div>
    </div>
    <!-- Edit Course Modal -->
<div class="modal fade" tabindex="-1" id="editcourse{{ $course->id }}" aria-labelledby="editCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="mb-2 d-inline">Update this Course</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               <form method="POST" action="{{ route('updatecourse') }}" enctype="multipart/form-data">
    @csrf
    @method('PATCH')
    <div class="form-row">
    <div class="form-group col-md-6">
        <h6 class="">Course Category</h6>
        <select name="category" class="form-control border border-primary">
            <option value="Null">Null</option>
          @foreach ($categories as $cat)
    <option value="{{ $cat->id }}" {{ $course->category_id == $cat->id ? 'selected' : '' }}>
        {{ $cat->name }}
    </option>
@endforeach


        </select>
    </div>
    <div class="form-group col-md-6">
        <h6 class="">Course Title</h6>
        <input type="text" class="form-control border border-primary" name="title" value="{{ $course->title }}" required>
    </div>
    <div class="form-group col-md-12">
        <h6 class="">Description</h6>
        <textarea name="desc" class="form-control border border-primary" rows="4" required>{{ $course->desc }}</textarea>
    </div>
    <div class="form-group col-md-6">
        <h6 class="">Amount {{ $settings->currency }}</h6>
        <input type="number" class="form-control border border-primary" name="amount" value="{{ $course->amount }}">
        <small class="mt-2">
            The amount users can pay to get this course. If empty, the course will be available for free.
        </small>
    </div>
    <div class="form-group col-md-6">
        <h6 class="">Course Image (File)</h6>
        <input type="file" class="form-control border border-primary" name="image">
        @error('image')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>
    <div class="form-group col-md-12">
        <h6 class="">Course Image (Url)</h6>
        <input type="text" class="form-control border border-primary" name="image_url" value="{{ $course->image_url }}">
    </div>
    <h6>Use either file upload or URL to choose a course image. If both are entered, the file upload will be used.</h6>
</div>

    <input type="hidden" name="course_id" value="{{ $course->id }}">
    <button type="submit" class="px-4 btn btn-primary">Update Course</button>
</form>

            </div>
        </div>
    </div>
</div>

    <!-- Delete Course Modal -->
<div class="modal fade" tabindex="-1" id="deletecourse{{ $course->id }}" aria-labelledby="deleteCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="mb-2 d-inline">Delete Course</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="">Are you sure you want delete this Course and its related lessons?</p>
                <a href="{{ route('deletecourse', $course->id) }}" class="btn btn-danger">DELETE</a>
            </div>
        </div>
    </div>
</div>

    @empty
    <div class="col-md-12">
        <div class="card text-center py-5">
            <h5 class="">No Course added</h5>
            <div>
                <button class="btn btn-secondary px-3" data-toggle="modal" data-target="#addcourse">Add Course</button>
            </div>
        </div>
    </div>
    @endforelse
</div>
@endsection