@extends('admin.layouts.app')
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                When I'M Unwell
                <small>it all here</small>
            </h1>
            <ol class="breadcrumb">
                <li><a><i class="fa fa-dashboard"></i>Home</a></li>
                <li class="active">When I'M Unwell</li>
                <li class="active">Add</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <!-- Default box -->
            <div class="box">
                <div class="box-header with-border">
                    <h4>My wheezing responds to steroids</h4>
                    @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>
                </div>

                <div class="box-body">
                    <form action="{{ route('admin.respond.store') }}" method="post" enctype="multipart/form-data"
                        id="form">
                        {{ csrf_field() }}
                        <input type="hidden" name="hiddenId" value="{{ !empty($data) ? $data->id : '' }}">

                        <div class="row">
                            <div class="col-sm-8 col-sm-offset-2">

                                <div class="form-group">Image:</label>
                                    <input type="file" id="respond_image" name="respond_image" class="form-control">
                                </div>
                                @if (!empty($data->respond_image))
                                    <div class="row">
                                        <div class="col-md-3 col-sm-6 col-xs-12">
                                            <img src="{{ asset('uploads/Respond') }}/{{ $data->respond_image }}"
                                                height="120" width="120" />
                                        </div>
                                    </div>
                                @endif
                                <!-- <div class="form-group">
                                        <label for="website">Image:</label>
                                        <input type="file" value="{{ old('wheeze_image') }}" id="wheeze_image" name="wheeze_image" class="form-control" accept="image/*">
                                    </div> -->

                                <div class="form-group">
                                    <label for="website">Description In English:</label>
                                    <textarea name="description" id="description" cols="10" rows="10" class="form-control">{{ !empty($data) ? $data->description : '' }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="website">Description In Welsh:</label>
                                    <textarea name="description_welsh" id="description_welsh" cols="10" rows="10" class="form-control">{{ !empty($data) ? $data->description_welsh : '' }}</textarea>
                                </div>


                                <div class="form-body" id="dvOuterOld_video">
                                    <input type="hidden" name="hdIdVideo" id="hdIdVideo"
                                        value="{{ count($UnwellRespondVideo) }}">
                                    @if ($UnwellRespondVideo->isEmpty())
                                        <input type="hidden" id="txtvideo_0" name="txtvideo[]" value="new">
                                        <input type="hidden" id="txtoldvideoid_0" name="txtoldvideoid[]" value="">
                                        <div class="row">
                                            <div class="col-sm-11">
                                                <div class="form-group">
                                                    <label class="control-label col-sm-5">Video Title In English
                                                    </label>
                                                    <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>
                                            <div class="col-md-1">
                                                <div class="plus-icon">
                                                    <a class="btn btn-primary" title="Add field"
                                                        onclick="fnBtnAddVideo()"
                                                        style="border-radius:20px;margin-top:23px;"><i
                                                            class="fa fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-5">Video Title In Welsh
                                            </label>
                                            <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 class="form-group">
                                            <label for="control-label col-sm-5">Video Description In English:</label>
                                            <textarea name="video_des_eng[]" id="video_des_eng_0" cols="10" rows="10" class="form-control"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label for="control-label col-sm-5">Video Description In Welsh:</label>
                                            <textarea name="video_des_welsh[]" id="video_des_welsh_0" cols="10" rows="10" class="form-control"></textarea>
                                        </div>

                                        <!-- <div class="form-group">
                                                <label class="control-label col-sm-5">Description in English</label>
                                                    <textarea name="video_des_eng[]" id="video_des_eng_0" rows="10" cols="10" class="form-control"></textarea>
                                            </div>

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

                                        <div class="form-group">
                                            <label class="control-label col-sm-5">Video Id In English
                                                <i style="color:red;">(Input Only ID)</i> </label>
                                            <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 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-sm-5">Video Id In Welsh
                                                <i style="color:red;">(Input Only ID)</i></label>
                                            <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>
                                    @else
                                        <div class="row">
                                            <div class="col-md-5">
                                            </div>
                                            <div class="col-md-6">
                                                <div class="plus-icon">
                                                    <a class="btn btn-primary"
                                                        title="Add field" onclick="fnBtnAddVideo()"
                                                        style="border-radius:10px;margin-top:23px; width:100px;"><i
                                                            class="fa fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        @foreach ($UnwellRespondVideo as $key => $value)
                                            <div class="row">
                                                <div class="col-sm-11">
                                                    <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-sm-5">Video Title In English
                                                        </label>
                                                        <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>
                                                <!-- <div class="col-md-1">
                                                    <div class="plus-icon">
                                                        <a class="btn btn-primary" title="Add field" onclick="fnBtnAddVideo()" style="border-radius:20px;margin-top:23px;" ><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;margin-top:23px;"
                                                            data-id="{{ $value->id }}"><i class="fa fa-minus"></i></a>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label col-sm-5">Video Title In Welsh
                                                </label>
                                                <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 class="form-group">
                                                <label for="control-label col-sm-5">Video Description In English:</label>
                                                <textarea name="video_des_eng[]" id="video_des_eng_{{ $key }}" cols="10" rows="10"
                                                    class="form-control">{{ $value->des_eng }}</textarea>
                                            </div>
                                            <div class="form-group">
                                                <label for="control-label col-sm-5">Video Description In Welsh:</label>
                                                <textarea name="video_des_welsh[]" id="video_des_welsh_{{ $key }}" cols="10" rows="10"
                                                    class="form-control">{{ $value->des_welsh }}</textarea>
                                            </div>

                                            <!-- <div class="form-group">
                                                    <label class="control-label col-sm-5">Description in English</label>
                                                        <textarea name="video_des_eng[]" id="video_des_eng_{{ $key }}" rows="5" cols="87">{{ $value->des_eng }}</textarea>
                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label col-sm-5">Description in Welsh</label>
                                                        <textarea name="video_des_welsh[]" id="video_des_welsh_{{ $key }}" rows="5" cols="87">{{ $value->des_welsh }}</textarea>
                                                </div> -->

                                            <div class="form-group">
                                                <label class="control-label col-sm-5">Video Id In English
                                                    <i style="color:red;">(Input Only ID)</i>
                                                </label>
                                                <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 class="form-group">
                                                <label class="control-label col-sm-5">Video Id In Welsh
                                                    <i style="color:red;">(Input Only ID)</i>
                                                </label>
                                                <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>
                                        @endforeach
                                    @endif
                                </div>

                                <div class="form-group text-right">
                                    <button type="submit" class="btn btn-success"><i class="fa fa-plus">
                                            Add</i></button>
                                </div>

                            </div>
                        </div>
                </div>
                <!-- /.box-body -->

                <!-- /.box-footer-->
            </div>
            <!-- /.box -->

        </section>
        <!-- /.content -->
    </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="row">
                <div class="col-sm-11">
                    <div class="form-group">
                        <label class="control-label col-sm-5">Video Title In English
                        </label>
                        <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>
                <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;margin-top:23px;"><i
                                class="fa fa-minus"></i></a>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-5">Video Title In Welsh
                </label>
                <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 class="form-group">
                <label for="control-label col-sm-5">Video Description In English:</label>
                <textarea name="video_des_eng[]" id="video_des_eng_{groupId}" cols="10" rows="10" class="form-control"></textarea>
            </div>
            <div class="form-group">
                <label for="control-label col-sm-5">Video Description In Welsh:</label>
                <textarea name="video_des_welsh[]" id="video_des_welsh_{groupId}" cols="10" rows="10"
                    class="form-control"></textarea>
            </div>

            <!-- <div class="form-group">
                                        <label class="control-label col-sm-5">Description in English</label>
                                        <textarea name="video_des_eng[]" id="video_des_eng_{groupId}" rows="5" cols="87"></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-sm-5">Description in Welsh</label>
                                        <textarea name="video_des_welsh[]" id="video_des_welsh_{groupId}" rows="5" cols="87"></textarea>
                                    </div> -->

            <div class="form-group">
                <label class="control-label col-sm-5">Video Id In English
                    <i style="color:red;">(Input Only ID)</i> </label>
                <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 class="form-group">
                <label class="control-label col-sm-5">Video Id In Welsh
                    <i style="color:red;">(Input Only ID)</i> </label>
                <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>



@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 (j = 0; j < V_count; j++) {
                ApplyCKEditor('video_des_eng_' + j);
                ApplyCKEditor('video_des_welsh_' + j);
            }
        }


        $('#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);

        })

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



        $('#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.respond.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!", "Respond 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");
                }
            });
        });
    </script>
@endsection