@extends('Admin.Components.layout')
@section('title')
Mrc Overview
@endsection
@section('subtitle')
@if (isset($data))
Edit Mrc Overview
@else
Add Mrc Overview
@endif
@endsection
@section('content')
<div class="container-fluid">
    <div class="row mt-2">
        <div class="col-12">
            <div class="card  p-3">
                <div class="card-body ">
                    @if ($message = Session::get('success'))
                    <div class="alert alert-success alert-block">
                        <strong>{{ $message }}</strong>
                    </div>
                    @endif
                    @if ($errors->any())
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                        </div>
                    </div>
                    @endif
                    <form action='{{ route('admin.mrc.question.store') }}' id="form" class="form-horizontal" method="post">
                        {{ csrf_field() }}
                        <input type="hidden" name="hiddenId" value="{{ !empty($data) ? $data->id : '' }}">

                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">Info for Good English
                                </label>
                                <div class="">
                                    <input type="text" id="info_good_eng" name="info_good_eng" placeholder="Enter Info for Good English" class="form-control" value="{{ !empty($data) ? $data->info_good_eng : '' }}">
                                    <label id="info_good_eng" style="color: red"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Info for Good Welsh
                                </label>
                                <div class="">
                                    <input type="text" id="info_good_welsh" name="info_good_welsh" placeholder="Enter Info for Good Welsh" class="form-control" value="{{ !empty($data) ? $data->info_good_welsh : '' }}">
                                    <label id="info_good_welsh" style="color: red"></label>
                                </div>
                            </div>
                        </div>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">Info for Bad English
                                </label>
                                <div class="">
                                    <input type="text" id="info_bad_eng" name="info_bad_eng" placeholder="Enter Info for Good English" class="form-control" value="{{ !empty($data) ? $data->info_bad_eng : '' }}">
                                    <label id="info_good_eng" style="color: red"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Info for Bad Welsh
                                </label>
                                <div class="">
                                    <input type="text" id="info_bad_welsh" name="info_bad_welsh" placeholder="Enter Info for Good Welsh" class="form-control" value="{{ !empty($data) ? $data->info_bad_welsh : '' }}">
                                    <label id="info_good_welsh" style="color: red"></label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">Description in English</label>
                            <div class="">
                                <textarea name="description" id="description">{{ !empty($data) ? $data->description : '' }}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">Description in Welsh</label>
                            <div class="">
                                <textarea name="description_welsh" id="description_welsh">{{ !empty($data) ? $data->description_welsh : '' }}</textarea>
                            </div>
                        </div>


                        <div class="form-body" id="dvOuterOld_video">
                            <input type="hidden" name="hdIdVideo" id="hdIdVideo" value="{{ count($mrcQuestionOverviewVideo) > 0 ? count($mrcQuestionOverviewVideo) - 1 : '0' }}">
                            @if ($mrcQuestionOverviewVideo->isEmpty())
                            <input type="hidden" id="txtvideo_0" name="txtvideo[]" value="new">
                            <input type="hidden" id="txtoldvideoid_0" name="txtoldvideoid[]" value="">
                            <div class="form-group">
                                <label class="control-label col-md-3">Video Title In English
                                </label>
                                <div class="">
                                    <input type="text" id="title_eng_0" name="video_title_eng[]" placeholder="Enter Video Title In English" class="form-control">
                                    <label id="title_eng_lbl_0" style="color: red"></label>
                                </div>
                                <div class="col-md-1">
                                    <div class="plus-icon">
                                        <a class="btn btn-primary fnBtnAddVideo" title="Add field"  style="border-radius:20px"><i class="bi bi-plus"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Video Title In Welsh
                                </label>
                                <div class="">
                                    <input type="text" id="title_welsh_0" name="video_title_welsh[]" placeholder="Enter Video Title In Welsh" class="form-control">
                                    <label id="title_eng_lbl_0" style="color: red"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Description in English</label>
                                <div class="">
                                    <textarea name="video_des_eng[]" id="video_des_eng_0" rows="5" cols="50"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Description in Welsh</label>
                                <div class="">
                                    <textarea name="video_des_welsh[]" id="video_des_welsh_0" rows="5" cols="50"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Id In English
                                    <i style="color:red;">(Input Only ID)</i> </label>
                                <div class="">
                                    <input type="text" id="eng_video_0" name="eng_video[]" placeholder="Enter Wistia id" class="form-control">
                                    <label id="video_eng_lbl_0" style="color: red"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Video Id In Welsh
                                    <i style="color:red;">(Input Only ID)</i></label>
                                <div class="">
                                    <input type="text" id="welsh_video_0" name="welsh_video[]" placeholder="Enter Wistia id" class="form-control">
                                    <label id="video_welsh_lbl_0" style="color: red"></label>
                                </div>
                            </div>
                            @else
                            <div class="row">
                                <div class="col-md-5">
                                </div>
                                <div class="">
                                    <div class="form-group">
                                        <div class="plus-icon">
                                            <a class="btn btn-primary fnBtnAddVideo" title="Add field"  style="border-radius:10px;margin-top:15px; width:100px;"><i class="bi bi-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @foreach ($mrcQuestionOverviewVideo as $key => $value)
                            <div class="form-group" id="dvMain_{{ $key }}">
                                <input type="hidden" id="txtvideo_{{ $key }}" name="txtvideo[]" value="old">
                                <input type="hidden" id="txtoldvideoid_{{ $key }}" name="txtoldvideoid[]" value="{{ $value->id }}">

                                <label class="control-label col-md-3">Video Title In English
                                </label>
                                <div class="">
                                    <input type="text" id="title_eng_{{ $key }}" name="video_title_eng[]" placeholder="Enter Video Title In English" class="form-control" value="{{ $value->title_eng }}">
                                    <label id="title_eng_lbl_{{ $key }}" style="color: red"></label>
                                </div>

                                <div class="col-md-1">
                                    <div class="plus-icon">
                                        <a class="remove_button btn btn-danger delete_video" title="Add field" style="border-radius:20px" data-id="{{ $value->id }}"><i class="bi bi-dash"></i></a>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Title In Welsh
                                </label>
                                <div class="">
                                    <input type="text" id="title_welsh_{{ $key }}" name="video_title_welsh[]" placeholder="Enter Video Title In Welsh" class="form-control" value="{{ $value->title_welsh }}">
                                    <label id="title_eng_lbl_{{ $key }}" style="color: red"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Description in English</label>
                                <div class="">
                                    <textarea name="video_des_eng[]" id="video_des_eng_{{ $key }}">{{ $value->des_eng }}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Description in Welsh</label>
                                <div class="">
                                    <textarea name="video_des_welsh[]" id="video_des_welsh_{{ $key }}">{{ $value->des_welsh }}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Id In English
                                    <i style="color:red;">(Input Only ID)</i>
                                </label>
                                <div class="">
                                    <input type="text" id="eng_video_{{ $key }}" name="eng_video[]" placeholder="Enter Wistia id" class="form-control" value="{{ $value->video_url_eng }}">
                                    <label id="video_eng_lbl_{{ $key }}" style="color: red"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Video Id In Welsh
                                    <i style="color:red;">(Input Only ID)</i>
                                </label>
                                <div class="">
                                    <input type="text" id="welsh_video_{{ $key }}" name="welsh_video[]" placeholder="Enter Wistia id" class="form-control" value="{{ $value->video_url_welsh }}">
                                    <label id="video_welsh_lbl_{{ $key }}" style="color: red"></label>
                                </div>
                            </div>
                            @endforeach
                            @endif
                        </div>


                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="submit" class="btn btn-success"><i class="bi bi-plus">Add</i></button>
                                </div>
                            </div>
                        </div>
                    </form>

                    {{-- video div hide- --}}
                    <div id="dvOuterMain_video" style="display: none">
                        <div class="form-body" id="dvMain_video_{groupId}">
                            <input type="hidden" id="txtvideo_{$groupId}" name="txtvideo[]" value="new">
                            <input type="hidden" id="txtoldvideoid_{groupId}" name="txtoldvideoid[]" value="">

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Title In English
                                </label>
                                <div class="">
                                    <input type="text" id="title_eng_{groupId}" name="video_title_eng[]" placeholder="Enter Video Title In English" class="form-control">
                                    <label id="title_eng_lbl_{groupId}" style="color: red"></label>
                                </div>
                                <div class="col-md-1">
                                    <div class="plus-icon">
                                        <a class="remove_button btn btn-danger fnRemoveVideo" title="Add field" data-del="{groupId}" style="border-radius:20px"><i class="bi bi-dash"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Video Title In Welsh
                                </label>
                                <div class="">
                                    <input type="text" id="title_welsh_{groupId}" name="video_title_welsh[]" placeholder="Enter Video Title In Welsh" class="form-control">
                                    <label id="title_eng_lbl_{groupId}" style="color: red"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Description in English</label>
                                <div class="">
                                    <textarea name="video_des_eng[]" id="video_des_eng_{groupId}"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Description in Welsh</label>
                                <div class="">
                                    <textarea name="video_des_welsh[]" id="video_des_welsh_{groupId}"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Video Id In English
                                    <i style="color:red;">(Input Only ID)</i> </label>
                                <div class="">
                                    <input type="text" id="eng_video_{groupId}" name="eng_video[]" placeholder="Enter Wistia id" class="form-control">
                                    <label id="video_eng_lbl_{groupId}" style="color: red"></label>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Video Id In Welsh
                                    <i style="color:red;">(Input Only ID)</i> </label>
                                <div class="">
                                    <input type="text" id="welsh_video_{groupId}" name="welsh_video[]" placeholder="Enter Wistia id" class="form-control">
                                    <label id="video_welsh_lbl_{groupId}" style="color: red"></label>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script nonce="{{ $cspNonce }}">
    var editor = ApplyCKEditor('description');

    var editor1 = ApplyCKEditor('description_welsh');


    var V_count = $("#hdIdVideo").val();
    if (V_count == "0" || V_count == 0) {

        var editor3 = ApplyCKEditor('video_des_eng_0');

        var editor4 = ApplyCKEditor('video_des_welsh_0');
    } else {

        for (jv = 0; jv <= V_count; jv++) {
            console.log(jv);
            ApplyCKEditor('video_des_eng_' + jv);

            ApplyCKEditor('video_des_welsh_' + jv);

        }
    }

    // Dynamic add Control
    $(document).on('click', '.fnBtnAddVideo', function() {

        var count = $("#hdIdVideo").val();
        count++;

        var html = $("#dvOuterMain_video").html();
        html = html.replace(/{groupId}/g, count);
        $("#dvOuterOld_video").append(html);
        $("#hdIdVideo").val(count);

        ApplyCKEditor('video_des_eng_' + count);

        ApplyCKEditor('video_des_welsh_' + count);
    });

    $('#dvOuterOld_video').on('click', '.delete_video', function() {
        var uid = $(this).attr("data-id");
        //var utype = $(this).attr("data-type");
        console.log(uid);
        swal({
            title: "Are you sure?"
            , text: "You will not be able to recover this data!"
            , type: "warning"
            , confirmButtonClass: "btn-danger"
            , confirmButtonText: "Yes, delete it!"
            , cancelButtonText: "No, cancel please!"
            , cancelButtonClass: "btn-success"
            , showCancelButton: true
            , closeOnConfirm: false
            , closeOnCancel: false
            , reverseButtons: true
        }, function(isConfirm) {
            // alert('abc');
            var url = '{{ route('admin.mrc.question.delete.video','slug') }}';
            if (isConfirm) {
                $.ajax({
                    type: 'POST'
                    , url: url.replace("slug", uid)
                    , data: {
                        id: uid
                        , _token: '{{ csrf_token() }}'
                    }
                    , success: function(data) {
                        swal("Deleted!", "MRC Test Video Has been Deleted.", "success");

                        if (data.status_code == "200") {
                            $(".confirm").click(function(event) {
                                location.reload();
                            });
                        }
                    }
                    , error: function() {
                        swal("Deleted!", "Something Went wrong deleted failed.", "error");
                    }
                });
            } else {
                swal("Cancelled", "Data is safe :)", "error");
            }
        });
    });

    // remove control
    $(document).on('click', '.fnRemoveVideo', function() {
        let intId = $(this).attr("data-del");
        $("#dvMain_video_" + intId).remove();
    });

    $("form").validate({
        rules: {
            info_good_eng: {
                required: true
            , }
            , info_good_welsh: {
                required: true
            , }
            , info_bad_eng: {
                required: true
            , }
            , info_bad_welsh: {
                required: true
            , },

        }
        , messages: {

        }
        , errorElement: "em"
        , errorPlacement: function(error, element) {
            error.addClass("help-block");
            error.insertAfter(element);
        }
        , highlight: function(element, errorClass, validClass) {
            $(element).parent("div").addClass("has-error").removeClass("has-success");
        }
        , unhighlight: function(element, errorClass, validClass) {
            $(element).parent("div").addClass("has-success").removeClass("has-error");
        }
    });

</script>
@endsection