@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">About Us</div>
                            </div>
                            <form action="{{ route('about_us_store') }}" method="post" id="formSubmit"
                                enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="id" value="{{ $aboutus->id ?? '' }}">
                                <div class="card-body element-2">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <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="{{ $aboutus->title ?? '' }}" required>
                                            </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="sub_title">{{ $aboutus->sub_title ?? '' }}</textarea>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="inlineinput">Description<span class="text-danger">*</span><small
                                                        class="text-danger">(Only 417px * 469px Size, Upto
                                                        500kb)</small></label>
                                                <textarea type="text" class="form-control" placeholder="Summary"
                                                    name="sub_title">
                                                            {{ $aboutus->sub_title??'' }}
                                                        </textarea>
                                            </div>
                                        </div> --}}
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="inlineinput">Image<span><small class="text-danger mx-2">(Only
                                                            417px * 469px Size, Upto 500kb)</small></span></label>
                                                <input type="file" class="form-control d-flex" accept="image/*"
                                                    style="padding: 3.2px;" name="image"
                                                    onchange="return validate_fileupload(this)">
                                                <img src="{{ asset($aboutus->image ?? 'notImage.jpg')}}" width="auto"
                                                    height="150px" style="padding:11px">

                                            </div>
                                        </div>
                                        {{-- <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="inlineinput">About Banner Image<span><small
                                                            class="text-danger mx-2">(Only
                                                            417px * 469px Size, Upto 500kb)</small></span></label>
                                                <input type="file" class="form-control d-flex" accept="image/*"
                                                    style="padding: 3.2px;" name="image2"
                                                    onchange="return validate_fileupload(this)">
                                                <img src="{{ asset($aboutus->image2 ?? 'notImage.jpg')}}" width="auto"
                                                    height="150px" style="padding:11px">

                                            </div>
                                        </div> --}}
                                        {{-- ---------------- Specialization ---------------- --}}
                                        <div class="row col-md-12">
                                            <div class="col-lg-12">
                                                <label class="col-form-label mt-3">Specialization<span
                                                        class="text-danger">*</span></label>

                                                <div id="specialization-wrapper">
                                                    @php
                                                        $details = $aboutus ? json_decode($aboutus->description, true) : [];
                                                    @endphp
                                                    @php
                                                        $details2 = $aboutus ? json_decode($aboutus->specializations, true) : [];
                                                    @endphp

                                                    @if (!empty($details2))
                                                        @foreach ($details2 as $key => $val)
                                                            <div class="dynamic-specializationsJs row mb-2">
                                                                <div class="col-md-11">
                                                                    <input type="text" class="form-control" name="specializations[]"
                                                                        placeholder="Enter Specialization"
                                                                        value="{{ $val['title'] ?? $val }}" required>
                                                                </div>
                                                                <div class="col-md-1 d-flex align-items-end">
                                                                    @if ($key != 0)
                                                                        <button type="button"
                                                                            class="btn btn-danger remove-specialization">Remove</button>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="dynamic-specializationsJs row mb-2">
                                                            <div class="col-md-11">
                                                                <input type="text" class="form-control" name="specializations[]"
                                                                    placeholder="Enter Specialization" required>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>

                                                <button type="button" class="btn btn-success add-specialization"
                                                    style="float:right;">Add</button>
                                            </div>
                                        </div>

                                        {{-- ---------------- Feature ---------------- --}}
                                        <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="feature-wrapper">
                                                    @if (!empty($details))
                                                        @foreach ($details as $key => $val)
                                                            <div class="dynamic-featuresJs row mb-2">
                                                                <div class="col-md-11">
                                                                    <input type="text" class="form-control" name="features[]"
                                                                        placeholder="Enter Feature"
                                                                        value="{{ $val['title'] ?? $val }}" required>
                                                                </div>

                                                                <div class="col-md-1 d-flex align-items-end">
                                                                    @if ($key != 0)
                                                                        <button type="button"
                                                                            class="btn btn-danger remove-feature">Remove</button>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="dynamic-featuresJs row mb-2">
                                                            <div class="col-md-11">
                                                                <input type="text" class="form-control" name="features[]"
                                                                    placeholder="Enter Feature" required>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>

                                                <button type="button" class="btn btn-success add-feature"
                                                    style="float:right;">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