@extends('backend.layout')
@section('title', $title)

@section('headerStyles')

@endsection

@section('content')
    {!! getBreadcrumbs(
               array(
               'dashboard'=>'Home',

               ''=>'Settings'
               ),'Settings'
            ) !!}

            <style type="">
                .delete_video_logo {
                    position: relative;
                    left: -23px;
                    top: -40px;
                    border-radius: 50%;
                }
                .video_logo_1{margin-left: 14px;}
 
             @media screen and (min-width: 320px) and (max-width: 767px) {
                .mo_wf { width: 100% !important;}
                  .col-12.col-md-8.mo_wf.ch_qw {
                            width: 100% !important;
                            position: inherit;
                            right: 0px;
                        }
             }
                             .col-12.col-md-8.mo_wf.ch_qw {
                    width: 100% !important;
                    position: absolute;
                    right: 0px;
                }

            </style>

    <div class="content mt-3">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">

                        @if (Session::has('flash_message'))
                            <br/>
                            <div class="alert alert-success alert-dismissable">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                <strong>{{ Session::get('flash_message' ) }}</strong>
                            </div>
                        @endif

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

                            <form method="POST" id="settings" action="{{ route('admin.settings') }}"
                                  accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="hf-email" class=" form-control-label">Title</label>
                                    </div>
                                    <div class="col-12 col-md-9">

                                        <input class="form-control" id="name" type="text"
                                               placeholder="Title"
                                               name="title"
                                               value="{{ !empty(old('title')) ? old('title') : ((($record) && ($record->title)) ? $record->title : '') }}">
                                        @if ($errors->has('title'))
                                            <span class="text-danger help-block">{{ $errors->first('title') }}</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="row form-group">
                                    <div class="col col-md-2 mo_wf">
                                        <label for="hf-email" class="form-control-label">logo</label>
                                    </div>
                                    <div class="col-md-2 mo_wf">
                                         @if(($record) && ($record->logo))
                                        <div class="logo_{{ $record->id }}">
                                            <img src="/uploads/settings/{{$record->logo}}" width="100" height="100"/>
{{--                                            <a href="#" id="{{$record->id}}"--}}
{{--                                               class="delete_logo btn btn-danger btn-xs"--}}
{{--                                               onclick="return confirm(&quot;Confirm delete?&quot;)"><i--}}
{{--                                                    class="fa fa-trash-o" aria-hidden="true"></i>Delete </a>--}}
                                        </div>
                                    @endif
                                    </div>
                                    <div class="col-12 col-md-8 mo_wf">

                                        <input class="form-control {{ (($record) && ($record->logo)) ? '' : 'logo'}}"
                                               id="logo" type="file" name="logo">


                                        <i>Note: upload images size is ...........</i>
                                    </div>
                                    @if ($errors->has('logo'))
                                        <span class="text-danger">{{ $errors->first('logo') }}</span>
                                    @endif

                                   


                                </div>
                                <div class="row form-group">
                                    <div class="col col-md-2 mo_wf">
                                        <label for="hf-email" class="form-control-label">Video logo</label>
                                    </div>
                                    <div class="co-md-2 mo_wf">
                                           @if(($record) && ($record->video_logo))
                                        <div class="video_logo_{{ $record->id }}">
                                            <img src="/uploads/settings/{{$record->video_logo}}" width="100" height="100"/>
                                            <a href="#" id="{{$record->id}}"
                                               class="delete_video_logo btn btn-danger btn-xs"
                                               onclick="return confirm(&quot;Confirm delete?&quot;)"><i
                                                    class="fa fa-trash-o f_delete" aria-hidden="true"></i> </a>
                                        </div>
                                    @endif
                                    </div>
                                    <div class="col-12 col-md-8 mo_wf">

                                        <input class="form-control {{ (($record) && ($record->video_logo)) ? '' : 'video_logo'}}"
                                               id="video_logo" type="file" name="video_logo">


                                        <i>Note: upload images size is ...........</i>
                                    </div>
                                    @if ($errors->has('video_logo'))
                                        <span class="text-danger">{{ $errors->first('video_logo') }}</span>
                                    @endif

                                 


                                </div>

                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="fa fa-dot-circle-o"></i> Submit
                                    </button>
                                    <button type="reset" class="btn btn-danger btn-sm">
                                        <i class="fa fa-ban"></i> Reset
                                    </button>
                                </div>
                            </form>
                        </div>


                    </div>
                </div>
            </div>
        </div><!-- .animated -->
    </div><!-- .content -->

@endsection
@section('footerScripts')


    <script>
        $(function () {
            $('.delete_logo').on('click', function () {
                var image = $(this).attr('id');
                if (image != '') {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        url: '/admin/ajax/deletelogo',
                        type: 'POST',
                        data: {'image': image},
                        success: function (response) {
                            $('.logo_' + image).remove();
                            $('#logo').addClass('logo');
                            imageRules();
                        }
                    });
                }
            });

      $('.delete_video_logo').on('click', function () {
                var image = $(this).attr('id');
                if (image != '') {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        url: '/admin/ajax/deletevideologo',
                        type: 'POST',
                        data: {'image': image},
                        success: function (response) {
                            $('.video_logo_' + image).remove();
                            $('#video_logo').addClass('video_logo');
                            //imageRulesForVideo();
                        }
                    });
                }
            });

            $('#settings').validate({
                ignore: [],
                errorClass: 'text-danger', // You can change the animation class for a different entrance animation - check animations page
                errorElement: 'div',
                errorPlacement: function (error, e) {
                    e.parents('.form-group').append(error);
                },
                highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                    $(e).closest('.text-danger').remove();
                },
                success: function (e) {
                    // You can use the following if you would like to highlight with green color the input after successful validation!
                    e.closest('.form-group').removeClass('has-success has-error'); // e.closest('.form-group').removeClass('has-success has-error').addClass('has-success');
                    e.closest('.text-danger').remove();
                },
                rules: {
                    title: {
                        required: true
                    }
                },
                messages: {
                    title: {
                        required: 'Please enter title'
                    }
                },
            });
            imageRules();

        });

        function imageRules() {
            $(".logo").rules("add", {
                required: true,
                messages: {
                    required: "Upload image to save"
                }
            });
        }
   function imageRulesForVideo() {
            $(".video_logo").rules("add", {
                required: true,
                messages: {
                    required: "Upload image to save"
                }
            });
        }

    </script>

@endsection
