@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <!-- row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Course</h4>
                    </div>
                    <div class="card-body">
                        <div class="basic-form">
                            <div id="response"></div>
                            <form class="form-valide-with-icon needs-validation" id='course'>
                                <div class="mb-3">
                                    <label class="form-label">Select course Category</label>
                                    <select class="form-control wide" name="course_category_id" id="course_category_id">
                                        <option>Select course Category</option>
                                    </select>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">code</label>
                                    <div class="col-sm-12">
                                        <input type="number" name="code" class="form-control" placeholder="code">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">name</label>
                                    <div class="col-sm-12">
                                        <input type="text" name="name" class="form-control" placeholder="name">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="col-sm-3 col-form-label">Description</label>
                                    <textarea class="form-control" rows="4" id="description" name="description"></textarea>
                                </div>
                                <label class="col-sm-3 col-form-label">Image</label>
                                <div class="input-group">
                                    <div class="form-file">
                                        <input type="file" name="image" accept="image/*" class="form-file-input form-control">
                                    </div>
                                </div>
                                <fieldset class="mb-3 mt-3">
                                    <div class="row">
                                        <label class="col-form-label col-sm-3 pt-0">Status</label>
                                        <div class="col-sm-9">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="status" value="free" checked="">
                                                <label class="form-check-label">
                                                    Free
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="status" value="paid">
                                                <label class="form-check-label">
                                                    Paid
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">price</label>
                                    <div class="col-sm-12">
                                        <input type="number" name="price" class="form-control" placeholder="price">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">duration</label>
                                    <div class="col-sm-12">
                                        <input type="number" name="duration" class="form-control" placeholder="duration">
                                    </div>
                                </div>
                                <button type="submit" class="btn me-2 btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var token = sessionStorage.getItem('token');
        var url = "{{ env('APP_URL') }}";

        function displayCategoryData() {

            $.ajax({
                type: "GET",
                url: url + "/list-course-category",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function(msg) {
                    console.log(msg);
                    if (msg.success) {
                        var json = msg.data;
                        var row = '';
                        $.each(json, function(index, obj) {
                            row += "<option value='" + obj.id + "'>" + obj.name + "</option>";
                        });
                        $("#course_category_id").append(row);
                    } else if (msg.message == 'User is not Authenticated.') {
                        window.location = url + "/login-view";
                    } else {
                        $('#response').html("<div class='alert alert-danger'>" + msg.message +
                            "</div>");
                    }
                }
            });

        }

        $('#course').submit(function(event) {
            event.preventDefault();

            // var formData = $(this).serialize();
            var formData = new FormData(this);

            $.ajax({
                url: url + "/create-course",
                type: 'POST',
                data: formData,
                success: function(data) {
                    console.log(data);
                    if (data.success) {
                        $('form#course').trigger("reset");
                        window.location = url + "/list-course-view";
                    } else {
                        $('#response').html("<div class='alert alert-danger'>" + data
                            .message + "</div>");
                    }
                },
                cache: false,
                contentType: false,
                processData: false
            });
        });
        $(document).ready(function() {
            displayCategoryData();
        });
    </script>
@endsection