@extends('admin.layouts.app')
@section('content')
@section('css')
@endsection
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            SPO2 Overview
            <small>it all here</small>
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-dashboard"></i> Home</a></li>
        </ol>
    </section>
    @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
    <div style="margin-top: 10px" class="flash-message">
        @if (Session::has('message'))
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
        @endif
    </div>
    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="box">
            <div class="box-header with-border">
                <div class="col-sm-12">
                    <form action='{{ route('admin.spo2.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="col-md-6">
                                    <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="col-md-6">
                                    <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="col-md-6">
                                    <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="col-md-6">
                                    <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="col-md-6">
                                <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="col-md-6">
                                <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($PickFlowOverviewVIdeo) > 0 ? count($PickFlowOverviewVIdeo) - 1 : '0' }}">
                            @if ($PickFlowOverviewVIdeo->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="col-md-6">
                                        <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" title="Add field"
                                                onclick="fnBtnAddVideo()" style="border-radius:20px"><i
                                                    class="fa fa-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">Video Title In Welsh
                                    </label>
                                    <div class="col-md-6">
                                        <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="col-md-6">
                                        <textarea name="video_des_eng[]" id="video_des_eng_0"></textarea>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-3">Video Description in Welsh</label>
                                    <div class="col-md-6">
                                        <textarea name="video_des_welsh[]" id="video_des_welsh_0"></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="col-md-6">
                                        <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 class="col-md-1">
                                    <div class="plus-icon">
                                        <a class="btn btn-primary" title="Add field" onclick="fnBtnAddVideo()" style="border-radius:20px"><i class="fa fa-plus"></i></a>
                                    </div>
                                </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="col-md-6">
                                        <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="col-md-6">
                                        <div class="form-group">
                                            <div class="plus-icon">
                                                <a class="btn btn-primary"
                                                    title="Add field" onclick="fnBtnAddVideo()"
                                                    style="border-radius:10px;margin-top:15px; width:100px;"><i
                                                        class="fa fa-plus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @foreach ($PickFlowOverviewVIdeo 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="col-md-6">
                                            <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="btn btn-primary" title="Add field" onclick="fnBtnAddVideo()" style="border-radius:20px" ><i class="fa fa-plus"></i></a>
                                    </div>
                                </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="fa fa-minus"></i></a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Video Title In Welsh
                                        </label>
                                        <div class="col-md-6">
                                            <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="col-md-6">
                                            <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="col-md-6">
                                            <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="col-md-6">
                                            <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="col-md-6">
                                            <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="fa fa-plus">
                                            Add</i></button>

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

            {{-- 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="col-md-6">
                            <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="fa fa-minus"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Video Title In Welsh
                        </label>
                        <div class="col-md-6">
                            <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="col-md-6">
                            <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="col-md-6">
                            <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="col-md-6">
                            <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="col-md-6">
                            <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>

@endsection
@section('js')
<script nonce="{{ $cspNonce }}" type="text/javascript" src="{{ asset('admin_assets') }}/customjs.js"></script>

<script nonce="{{ $cspNonce }}">
    ApplyCKEditor('description');
    ApplyCKEditor('description_welsh');

    var V_count = $("#hdIdVideo").val();
    if (V_count == "0" || V_count == 0) {
        ApplyCKEditor('video_des_eng_0');
        ApplyCKEditor('video_des_welsh_0');
    } else {

        for (jv = 0; jv <= V_count; jv++) {
            ApplyCKEditor('video_des_eng_' + jv);
            ApplyCKEditor('video_des_welsh_' + jv);
        }
    }


    $('#fnBtnAddVideo').click(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");
        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.pick.flow.delete.video', ['id' => 'slug']) }}';
            if (isConfirm) {
                $.ajax({
                    type: 'POST',
                    url: url.replace("slug", uid),
                    data: {
                        id: uid,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        swal("Deleted!", "Pick Flow 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");
            }
        });
    });



    $(document).on('click', ".fnRemoveVideo", function() {
        var 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