@extends('admin.layout.app')
@section('content')

<div class="main-panel">
    <div class="content">
        <div class="page-inner element-1">

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Why Choose Us</div>
                        </div>
                        <form action="{{ route('why-choose-us_store') }}" method="post" id="formSubmit" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{{ $value->id??'' }}">
                            <div class="card-body element-2">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="inlineinput">Title<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Title" name="title" value="{{ $value->title??'' }}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="inlineinput">Image<span><small class="text-danger mx-2">(Only 52px * 52px Size, Upto 500KB)</small></span></label>
                                            <input type="file" class="form-control" name="image">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            @if(isset($value) && $value->image)
                                              <img src="{{asset($value->image)}}" class="img-circle mt-2" style="height: 125px; background: gray; max-width: 100%;margin: 20px;" alt="{{$value->image}}">
                                           @endif
                                        </div>
                                    </div>
                                      <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="inlineinput">Short Description<span
                                                        class="text-danger">*</span></label>
                                                <textarea type="text" rows="3" class="form-control"
                                                    placeholder="Short Description"
                                                    name="short_description">{{ $value->short_description ?? '' }}</textarea>
                                            </div>
                                    <div class="row col-md-12">
                                        <div class="col-lg-12">
                                            <label class="col-form-label mt-3">Feature <span class="text-danger">*</span></label>
                                            <div id="dynamic-field-wrapperAJS1">
                                                @php
                                                    $details = $value ? json_decode($value->description, true) : [];
                                                @endphp

                                                @if (!empty($details))
                                                    @foreach ($details as $key => $val)
                                                        <div class="dynamic-aboutsJs1 row mb-2">
                                                            <div class="col-md-4">
                                                                <input type="text" class="form-control" name="heading[]"
                                                                    placeholder="Enter heading"
                                                                    value="{{ $val['heading'] ?? $val }}" required>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                    <input type="text" class="form-control" name="details[]"
                                                                    placeholder="Enter details"
                                                                    value="{{ $val['details'] ?? $val }}" required>
                                                                </div>

                                                            <div class="col-md-1 d-flex align-items-end">
                                                                @if ($key != 0)
                                                                    <button type="button" class="btn btn-danger remove-buttonAJS1">Remove</button>
                                                                @endif
                                                            </div>

                                                        </div>
                                                    @endforeach

                                                @else
                                                    <div class="dynamic-aboutsJs1 row mb-2">
                                                        <div class="col-md-4">
                                                            <input type="text" class="form-control" name="heading[]"
                                                                    placeholder="Enter heading" required>
                                                        </div>
                                                        <div class="col-md-7">
                                                                    <input type="text" class="form-control" name="details[]"
                                                                    placeholder="Enter details" required>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            <button type="button" style="float: right;" class="btn btn-success add-buttonAJS1">Add</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-action element-2 text-center">
                                <button type="submit" name="Submit" id="loderButton" class="btn btn-primary px-5 rounded-0 btn-size-cus"><i class="fa fa-spinner fa-pulse fa-fw" id="loderIcon" style="display:none;"></i>Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @section('js')
    <script type="text/javascript">

    </script>

    @endsection