@extends('dash.layouts.app')

@section('title')
    Edit Top Brands
@endsection

@section('css')
    <style>
        .container {
            position: relative;
            width: 100%;
        }

        .image {
            opacity: 1;
            display: block;
            width: 100%;
            height: auto;
            transition: .5s ease;
            backface-visibility: hidden;
        }

        .middle {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }

        .container:hover .image {
            opacity: 0.3;
        }

        .container:hover .middle {
            opacity: 1;
        }

        .text {
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            padding: 16px 32px;
        }
    </style>
@endsection

@section('breadcrumb')

@endsection

@section('content')
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <!-- Horizontal Form -->
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">Edit Top Brands</h3>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif


                    <form action="{{route('top_brands.update',[$service->id])}}" method="post" class="form-horizontal" enctype="multipart/form-data"  data-parsley-validate>
                        @csrf
                        @method('patch')

                        <div class="box-body">
                            <div class="form-group">
                                <label for="title" class="col-sm-2 control-label">Title</label>
                                <div class="col-sm-8">
                                    <input type="text" name="title" id="title" value="{{$service->title}}" class="form-control" placeholder="Partner Title / Name" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="slug" class="col-sm-2 control-label">Slug</label>
                                <div class="col-sm-8">
                                    <input type="text" name="slug" id="slug" value="{{$service->slug}}" class="form-control" placeholder="Product  slug/url" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="url" class="col-sm-2 control-label">Sub Title</label>
                                <div class="col-sm-8">
                                    <input type="text" name="sub_title" value="{{$service->sub_title}}" class="form-control" id="" placeholder="Sub Title" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="url" class="col-sm-2 control-label">Short Description</label>
                                <div class="col-sm-8">
                                    <textarea  name="short_description" rows="5" class="form-control" placeholder="Short Description">{{$service->short_description}}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="url" class="col-sm-2 control-label">Description</label>
                                <div class="col-sm-8">
                                    <textarea id="summernote" name="description" rows="8" class="form-control">{{$service->description}}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="url" class="col-sm-2 control-label">Show on Home</label>
                                <div class="col-sm-8">
                                    <select name="is_show_on_home" class="form-control">
                                        <option value="1" {{$service->is_show_on_home == 1 ? 'selected' : ''}}>Yes</option>
                                        <option value="0" {{$service->is_show_on_home == 0 ? 'selected' : ''}}>No</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="url" class="col-sm-2 control-label">Meta Title</label>
                                <div class="col-sm-8">
                                    <input type="text" name="meta_title" value="{{$service->meta_title}}" class="form-control" id="" placeholder="Meta Title (SEO)">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="url" class="col-sm-2 control-label">Meta Description</label>
                                <div class="col-sm-8">
                                    <textarea  name="meta_description" rows="5" class="form-control" placeholder="Meta Description (SEO)">{{$service->meta_description}}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-5">
                                    <img src="{{asset($service->thumbnail)}}" width="250">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="file" class="col-sm-2 control-label">Thumbnail</label>
                                <div class="col-md-8">
                                    <input type="file" name="thumbnail" accept="image/*" class="form-control">
                                    <p class="help-block text-red">Image min width: 370 PX</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-4 col-md-offset-2">
                                    <img src="{{asset($service->before_image)}}" width="250">
                                </div>

                                <div class="col-md-5">
                                    <img src="{{asset($service->after_image)}}" width="250">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="file" class="col-sm-2 control-label">Effect</label>

                                <div class="col-md-4">
                                    <input type="file" name="before_image" accept="image/*" class="form-control">
                                    <p class="text-danger" style="font-size: 18px">Before</p>
                                </div>

                                <div class="col-md-4">
                                    <input type="file" name="after_image" accept="image/*" class="form-control">
                                    <p class="text-danger" style="font-size: 18px">After</p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="file" class="col-sm-2 control-label"></label>
                                <div class="col-md-10">
                                    <button type="submit" class="btn btn-info">Save</button>
                                    <a href="{{route('service.index')}}" class="btn btn-default">Back</a>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">


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

{{--                     <div class="row">
                        <div class="col-md-10 col-md-offset-2">
                            <div class="row margin-bottom">
                                @foreach($service->servicesImage as $key=> $services_image)
                                    <div class="col-md-3 margin-bottom">
                                        <div class="container">
                                            <img src="{{asset($services_image->thumb)}}" alt="Avatar" class="img-responsive" style="max-height: 100px">

                                            @if($services_image->is_default != 1)
                                                <div class="middle">
                                                    <a href="javascript:void(0)" onclick="$(this).confirmDelete($('#form-{{$key}}'))" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span> Remove </a>
                                                </div>
                                            @endif
                                        </div>

                                        <form method="post" role="form" id="form-{{$key}}" action="{{url('admin/service/remove-image/'.$services_image->id)}}">
                                            @csrf
                                            @method('delete')
                                        </form>
                                    </div>
                                @endforeach

                            </div>

                        </div>
                    </div> --}}
                </div>
            </div>
            <!--/.col (right) -->
        </div>
        <!-- /.row -->
    </section>
@endsection

@section('js')
    <script src="{{ asset('dash/plugins/parsley.js/dist/parsley.min.js') }}"></script>
    <script>
        $(document).ready(function () {

            $("#form").on('submit',function (e) {
                e.preventDefault();
                var data = new FormData(this);
                var formId = $("#form");
                $(this).speedPost('{{route('top_brands.update', [$service->id])}}',data);
            })
        })

    </script>
@endsection