@extends('layouts.admin_default')
    @section('content')
        <div class="content-wrapper p-0">
            <div class="flash_messages">
                @include('flash_messages.admin_message')
            </div>
            <div class="content-header row">
                <div class="content-header-left col-xl-9 col-md-12 col-12 mb-xl-2 mb-md-2 mb-1">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-start mb-0">Course</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('course.index') }}">Course</a></li>
                                    <li class="breadcrumb-item active"><a href="javascript:void(0);">Edit</a></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <section class="modern-horizontal-wizard">
                    <div class="bs-stepper wizard-modern modern-wizard-example">
                        {!! Form::open(['method'=>'PUT','route'=>['course.update', $result->id], 'files'=>true, 'class'=>'form-first FormValidate']) !!}
                            <div class="bs-stepper-header">
                                <div class="step" data-target="#general-modern" role="tab" id="general-modern-trigger">
                                    <button type="button" class="step-trigger">
                                        <span class="bs-stepper-label">
                                            <span class="bs-stepper-title">General</span>
                                        </span>
                                    </button>
                                </div>
                                <div class="line">
                                    <i data-feather="chevron-right" class="font-medium-2"></i>
                                </div>
                                <div class="step" data-target="#seo" role="tab" id="seo-trigger">
                                    <button type="button" class="step-trigger">
                                        <span class="bs-stepper-label">
                                            <span class="bs-stepper-title">Seo</span>
                                        </span>
                                    </button>
                                </div>
                                <div class="line">
                                    <i data-feather="chevron-right" class="font-medium-2"></i>
                                </div>
                                <div class="step" data-target="#multipleimage" role="tab" id="multipleimage-trigger">
                                    <button type="button" class="step-trigger">
                                        <span class="bs-stepper-label">
                                            <span class="bs-stepper-title">Images</span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                            <div class="bs-stepper-content">
                                <div id="general-modern" class="content" role="tabpanel" aria-labelledby="general-modern-trigger">
                                    <div class="row">
                                        <div class="col-xl-6 col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Course Category Name <span class="error">*</span></label>
                                                {!! Form::select('category_id', $course_category_list, $result->category_id, ['class'=>'form-select', 'placeholder' => 'Select Course Category Name']) !!}
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Course Name <span class="error">*</span></label>
                                                {!! Form::text('course_name', $result->course_name, ['class'=>'form-control']) !!}
                                            </div>
                                        </div>
                                        <div class="col-xl-12 col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Description </label>
                                                {!! Form::textarea('description', $result->description, ['class'=>'form-control ckeditor']) !!}                                                
                                            </div>
                                        </div>
                                        <div class="col-xl-12 col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Module </label>
                                                {!! Form::textarea('module', $result->module, ['class'=>'form-control ckeditor']) !!}                                                
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="last-name-column">Sort Order</label>
                                                {!! Form::text('sort_order', $result->sort_order, ['class'=>'form-control only_numbers']) !!}
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="basicSelect">Status <span class="error">*</span></label>
                                                {!! Form::select('status', status(), $result->status, ['class' => 'form-select', 'placeholder'=>'Please Select']) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="seo" class="content" role="tabpanel" aria-labelledby="seo-trigger">
                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Meta Title</label>
                                                {!! Form::text('meta_title', $result->meta_title, ['class'=>'form-control'])!!}
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Seo Url <span class="error">*</span></label>
                                                {!! Form::text('seo_url', $result->seo_url, ['class'=>'form-control'])!!}
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Meta Keyword </label>
                                                {!! Form::text('meta_keyword', $result->meta_keyword, ['class'=>'form-control'])!!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Meta Description </label>
                                                {!! Form::textarea('meta_description', $result->meta_description, ['class'=>'form-control', 'rows' => 5])!!}
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label" for="first-name-column">Schema Tag  </label>
                                                {!! Form::textarea('schema_tag', $result->schema_tag, ['class'=>'form-control', 'rows' => 5])!!}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="multipleimage" class="content" role="tabpanel" aria-labelledby="multipleimage-trigger">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 mb-1 mb-sm-0">
                                            <table id="courseimage" class="table table table-striped table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>Image</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @php 
                                                        $multiple_img_count = 0;
                                                    @endphp
                                                    @if(!empty($result->image))
                                                        @foreach(json_decode($result['image'], true) as $rtimgkey => $rtimgvalue)
                                                            <tr id="multiimage{{ $multiple_img_count }}">
                                                                <td>
                                                                    <div class="row input_image">
                                                                        <div class="col-md-8">
                                                                            <div class="input-group">
                                                                                <input type="text" name="multiple_image[{{ $multiple_img_count }}][image]" id="image{{ $multiple_img_count }}" class="form-control selected_image" aria-label="Image" aria-describedby="button-image" readonly>
                                                                                <input type="hidden" name="multiple_image[{{ $multiple_img_count }}][edit_image]" value="{{ $rtimgvalue['image'] }}">
                                                                                <div class="input-group-append">
                                                                                    <button class="btn btn-outline-secondary choose-file" type="button" data-id="image{{ $multiple_img_count }}">Choose File</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        @if(!empty($rtimgvalue['image']))
                                                                            <div class="col-xl-4 col-md-4 col-12 text-center my-2" id="image-tag">
                                                                                <img src="{{ asset('storage/'.$rtimgvalue['image']) }}" alt="" style="height:100px; width:100px">
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger" onclick="$('#multiimage{{ $multiple_img_count }}').remove()">X</button>
                                                                </td>
                                                            </tr>
                                                            @php 
                                                                $multiple_img_count++;
                                                            @endphp
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                                <tfoot>
                                                    <tr>
                                                        <td></td>
                                                        <td>
                                                            <button type="button" class="btn btn-success text-center edit-multi-image" onclick="edit_multiimage({{ $multiple_img_count + 1 }})">+</button>
                                                        </td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-1">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                        <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                        <a href="{{ route('course.index') }}" class="btn btn-outline-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    @endsection

    @push('script')
        <script>
            var edit_row_count = 0;
            function edit_multiimage(multiple_row_edit)
            {
                if(multiple_row_edit == 2)
                {
                    edit_row_count = multiple_row_edit;
                }
                else if(multiple_row_edit == 1 && edit_row_count == 0)
                {
                    edit_row_count = 1;
                }
                else if(multiple_row_edit > 2)
                {
                    edit_row_count = multiple_row_edit;
                }

                edit_row_count++;

                edit_html = `<tr id="row`+ multiple_row_edit +`">
                                <td>
                                    <div class="row input_image">
                                        <div class="col-md-8">
                                            <div class="input-group">
                                                {!! Form::text('multiple_image[`+ multiple_row_edit +`][image]', null, ['id' => 'image`+ multiple_row_edit +`', 'class' => 'form-control selected_image', 'aria-label' => 'Image', 'aria-describedby' => 'button-image', 'readonly']) !!}
                                                {!! Form::hidden('multiple_image[`+ multiple_row_edit +`][edit_image]', '', []) !!}
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary choose-file" type="button" data-id="image`+ multiple_row_edit +`">Choose File</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger text-center" onclick="$('#row`+ multiple_row_edit +`').remove()">X</button>
                                </td>
                            </tr>`;
                $('#courseimage tbody').append(edit_html);
                $('.edit-multi-image').attr('onclick','edit_multiimage("'+ edit_row_count +'")');
            }
        </script>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                $('body').on('click','.choose-file',function(event){
                    event.preventDefault();
                    inputId = $(this).data('id');
                    window.open('/file-manager/fm-button', 'fm', 'width=1400,height=800');
                });
            });

            // input
            let inputId = '';

            // set file link
            function fmSetLink($url) {
                document.getElementById(inputId).value = $url;
            }
        </script>

        <script src="{{ asset('admin/app-assets/vendors/js/forms/validation/jquery.validate.js') }}"></script>

        <script type="text/javascript">
            $('.FormValidate').validate({
                rules: {
                    "category_id": {
                        required : true,
                    },
                    "course_name": {
                        required : true,
                    },
                    "status": {
                        required : true,
                    },
                },
                messages: {
                    "category_id": {
                        required: "Please Select Course Category Name",
                    },
                    "course_name": {
                        required: "Please Enter Course Name",
                    },
                    "status": {
                        required: "Please Select Status",
                    },
                }
            });
        </script>
    @endpush