@extends('admin.layouts.main')

@section('content')
<div class="page-wrapper">
    <!-- ============================================================== -->
    <!-- Container fluid  -->
    <!-- ============================================================== -->
    <div class="container-fluid">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor font-bold">{{ @$data ? 'Edit' : 'Add' }} Course</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/manager/dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{ url('/manager/courses') }}" class="text-danger">Course</a>
                        </li>
                    </ol>
                </div>
            </div>
        </div>

        @include('admin.includes.alert')

        <div class="card">
            <div class="card-body">

                <form action="{{ @$data ? url('/manager/courses/' . $data['id']  ) : url('/manager/courses') }}" method="post" enctype="multipart/form-data" data-parsley-validate>
                    @csrf

                    @if( @$data )
                    @method('PATCH')
                    @endif

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="control-label">Course Name<span class="text-danger">*</span> </label>
                            <input type="text" data-parsley-required-message="The name field is required" name="name" value="{{ old('name', @$data->name) }}" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" autocomplete="off" placeholder="Enter name" required>
                            @if ($errors->has('name'))
                            <span class="text-danger">{{ $errors->first('name') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="control-label">Course Link<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="url" name="url" value="{{ old('url', @$data['url']) }}" data-parsley-required-message="The link field is required" data-parsley-type="url" data-parsley-pattern="^https?://[\w-]+(\.[\w-]+)+(/[\w-./?%&=]*)?$" placeholder="Enter link" required>
                            @if ($errors->has('url'))
                            <span class="text-danger">{{ $errors->first('url') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="control-label">Course Image<span class="text-danger">*</span></label>
                            <div>
                                <label for="course-image" style="cursor: pointer;">
                                    <img id="previewImg" src="{{ @$data->image_url != '' ? @$data->image_url : url('assets/images/upload.jpg') }}" alt="logo" class="mb-3" id="showUpload" style="width: 150px;height: 150px">
                                </label>
                            </div>
                            <input type="file" name="image" data-parsley-required-message="The image field is required" class="form-control upload-image" id="course-image" style="display: none;" {{ @$data->image_url == null ? 'required' : '' }}>
                            @if ($errors->has('image'))
                            <span class="text-danger">{{ $errors->first('image') }}</span>
                            @endif
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="control-label">Course Type*</label>
                            <select name="type" data-parsley-required-message="The type field is required" class="form-control {{ $errors->has('type') ? 'is-invalid' : '' }}" required>
                                <option value="">Choose type</option>
                                <option value="popular" {{ @$data->type == 'popular' ? 'selected' : '' }}>Popular</option>
                                <option value="recommend" {{ @$data->type == 'recommend' ? 'selected' : '' }}>Recommend</option>
                            </select>
                            @if ($errors->has('type'))
                            <span class="text-danger">{{ $errors->first('type') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="control-label">Course Start Date<span class="text-danger">*</span> </label>
                            <input type="date" data-parsley-required-message="The start date field is required" name="start_date" value="{{ old('start_date', date('d-m-Y', strtotime(@$data->start_date))) }}" class="form-control {{ $errors->has('start_date') ? 'is-invalid' : '' }}" autocomplete="off" placeholder="Enter start date" required>
                            @if ($errors->has('start_date'))
                            <span class="text-danger">{{ $errors->first('start_date') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="control-label">Course End Date<span class="text-danger">*</span> </label>
                            <input type="date" data-parsley-required-message="The end date field is required" name="end_date" value="{{ old('end_date', @$data->end_date) }}" class="form-control {{ $errors->has('end_date') ? 'is-invalid' : '' }}" autocomplete="off" placeholder="Enter end date" required>
                            @if ($errors->has('end_date'))
                            <span class="text-danger">{{ $errors->first('end_date') }}</span>
                            @endif
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="control-label">Course Lable Name<span class="text-danger">*</span> </label>
                            <input type="text" data-parsley-required-message="The lable name field is required" name="lable_name" value="{{ old('lable_name', @$data->lable_name) }}" class="form-control {{ $errors->has('lable_name') ? 'is-invalid' : '' }}" autocomplete="off" placeholder="Enter lable name" required>
                            @if ($errors->has('lable_name'))
                            <span class="text-danger">{{ $errors->first('lable_name') }}</span>
                            @endif
                        </div>

                    </div>

                    <button class="btn btn-primary" type="submit">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
    $(".upload-image").change(function() {
        var inputFile = $(this).parent().children('div').children('label').children('img')
        var reader = new FileReader();
        reader.onload = function(e) {
            inputFile.attr('src', e.target.result);
        };
        reader.readAsDataURL(this.files[0]);
        console.log(this.files[0])
    });

    function previewFile(input) {
        var file = $("input[type=file]").get(0).files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function() {
                $("#previewImg").attr("src", reader.result);
            }
            reader.readAsDataURL(file);
        }
    }
</script>
@endpush