@extends('admin.masterv2')
@section('styleSheet')
    <!-- BEGIN PAGE LEVEL STYLES -->

    <!-- END PAGE LEVEL STYLES -->
@endsection
@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="{{route('home')}}">Dashboard</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="{{route('homePage')}}">Home Page</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Service</a>
                    </li>
                </ul>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                    <form  class="custom form needs-validation" id="homeServiceForm" method="POST" action="{{ route('homeServicePage') }}" enctype="multipart/form-data" name="service" novalidate>
                        @csrf
                        <div class="row form-group">
                            <label class="col-md-2 control-label">Image:</label>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input type="file" name="image" accept="image/*" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
                                   
                                </div>
                                <p></p>
                                <div class="alert alert-primary d-flex align-items-center" role="alert">
                                    <div>
                                        <i class="fa fa-info-circle"></i> Best size image 256px X 256px, image icon tranparent .png file
                                    </div>
                                  </div>
                                {{-- <div class="fileinput fileinput-new" data-provides="fileinput">

                                    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>

                                    <div>
                                                                    <span class="btn default btn-file">
                                                                        <span class="fileinput-new">Select image </span>
                                                                        <span class="fileinput-exists">Change </span>
                                                                        <input type="file" class="form-control" name="image" placeholder="" accept="image/*">
                                                                    </span>
                                        <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput">Remove </a>
                                    </div>
                                </div> --}}

                                @if(!empty($homeService))
                                    <input type="hidden" class="form-control" name="home_service_id" value="{{$homeService->home_service_id}}" placeholder="">
                                @endif

                            </div>
                            @if(!empty($homeService->image))

                                <div class="col-md-4 text-center">
                                    <img src="{{asset('storage/uploads/pages/home/'.$homeService->image)}}" style="width: 200px; height: 150px;">
                                    <p>Current Image</p>
                                </div>
                            @endif

                        </div>
                        <div class="row form-group">
                            <label class="col-md-2 control-label">Title: <span class="required">
                                                        * </span>
                            </label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" name="title" value="{{!empty($homeService) ? $homeService->title : ''}}" placeholder="Page Title" autocomplete="off" required />
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-md-2 control-label">Short Description:
                            </label>
                            <div class="col-md-10">
                                <textarea class="form-control" name="shortDescription">{{!empty($homeService->shortDescription) ? $homeService->shortDescription : ''}}</textarea>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-md-2 control-label">Url:
                            </label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" name="url" value="{{!empty($homeService->url) ? $homeService->url : ''}}" placeholder="Page end url" autocomplete="off">
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="col-md-2 control-label">Status: <span class="required">
                                                        * </span>
                            </label>
                            <div class="col-md-4">
                                <select class="form-control input-medium select2me"
                                        data-placeholder="Status..." name="status">
                                    <option value=""></option>
                                    <option value="Y" {{!empty($homeService->status) && $homeService->status == 'Y' ? 'selected' : ''}}>Show</option>
                                    <option value="N" {{!empty($homeService->status) && $homeService->status == 'N' ? 'selected' : ''}}>Inactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <label class="control-label col-md-2"><input type="checkbox" class="icheck" {{!empty($homeService->aboutShow) && $homeService->aboutShow == 'Y' ? 'checked' : ''}}
                                data-checkbox="icheckbox_flat-grey"
                                                                         name="aboutShow" value="Y">
                                About </label>
                            <div class="col-md-10">
                                                <textarea class="ckeditor form-control" name="about"
                                                          rows="4">{{!empty($homeService->about) ? $homeService->about : ''}}</textarea>
                            </div>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-success" style="float: right">Save</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
    </div>
@endsection

@section('customJs')
<script>
            $(document).ready(function () {
    $("#homeServiceForm").validate({
        rules: {
            title: {
                required: true,
            },
        },
        messages: {
            title: {
                required: "Title is required",
            },
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        // errorPlacement: function (error, element) {
        //     error.addClass("invalid-feedback"); // Bootstrap's error class
        //     element.closest(".form-group").append(error);
        // },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            // Add 'was-validated' class to trigger Bootstrap validation
            form.classList.add('was-validated');
            form.submit(); // Perform the default form submission
        }
    });
});
</script>    
@endsection

@section('documentJquery')
 //   ComponentsFormTools.init();
@endsection