@extends('layout')
@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">ABOUT</h4>


                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate >
                                @csrf

                                <div class="row">

                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Meta Title</label>
                                            <textarea required class="form-control" type="text" name="{{$data["META_TITLE"]["key"]}}">{{$data["META_TITLE"]["value"]}}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Meta Description</label>
                                            <textarea required class="form-control" type="text" name="{{$data["META_DESC"]["key"]}}">{{$data["META_DESC"]["value"]}}</textarea>
                                        </div>
                                    </div>

{{--                                    <div class="col-lg-6 mt-4">--}}
{{--                                        <div>--}}
{{--                                            <label class="form-label">Deskripsi Tentang Voss</label>--}}
{{--                                            <textarea required class="form-control" type="text" name="{{$data["DESC_ABOUT_VOSS"]["key"]}}">{{$data["DESC_ABOUT_VOSS"]["value"]}}</textarea>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-lg-6 mt-4">--}}
{{--                                        <div>--}}
{{--                                            <label class="form-label">Visi Voss</label>--}}
{{--                                            <textarea required class="form-control" type="text" name="{{$data["VISI"]["key"]}}">{{$data["VISI"]["value"]}}</textarea>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

{{--                                    <div class="col-lg-6 mt-4">--}}
{{--                                        <div>--}}
{{--                                            <label class="form-label">Misi Voss</label>--}}
{{--                                            <textarea required class="form-control" type="text" name="{{$data["MISI"]["key"]}}">{{$data["MISI"]["value"]}}</textarea>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}

                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Sejarah Voss</label>
                                            <textarea required class="form-control" type="text" name="{{$data["SEJARAH"]["key"]}}">{{$data["SEJARAH"]["value"]}}</textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Image Section 1</label>
                                            <div class="thumnail-upload" id="thumb-upload-sec-1" onclick="browseFile('#thumbnail-sec-1')" style="display: {{empty($data["IMG_SEC_1"]["value"]) ? 'block' : 'none'}}">
                                                <div class="text">
                                                    <i class="bx bx-upload"></i>
                                                    <p class="text-upload">Upload Image</p>
                                                </div>
                                            </div>
                                            <img onclick="browseFile('#thumbnail-sec-1')"; class="preview-image" id="preview-thumbnail-sec-1" src="{{\App\Lib\Ext::urlfront('assets/images/pages/'.$data["IMG_SEC_1"]["value"])}}" style="width: 200px; height: 120px;object-fit: cover;object-position: center;display: {{empty($data["IMG_SEC_1"]["value"]) ? 'none' : 'block'}};" />
                                            <input  id="thumbnail-sec-1" accept="image/*" class="hidden-file"  onchange="previewImage(this,'preview-thumbnail-sec-1','#thumb-upload-sec-1')"  type="file" name="{{$data["IMG_SEC_1"]["key"]}}" placeholder="Title"
                                            >
                                        </div>
                                    </div>

{{--                                    <div class="col-lg-6 mt-4">--}}
{{--                                        <div>--}}
{{--                                            <label class="form-label">Youtube ID</label>--}}
{{--                                            <textarea required class="form-control" type="text" name="{{$data["YOUTUBE_ID"]["key"]}}">{{$data["YOUTUBE_ID"]["value"]}}</textarea>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}



                                </div>



                                <diV>
                                    <button type="submit" class="btn btn-success waves-effect waves-light mt-5"
                                            style="float: right;">Simpan
                                    </button>
                                </diV>

                            </form>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->
            <hr>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title" style="float: left;">Gallery List</h4>
                            <a href="{{url('settings/page/about/gallery/add')}}" type="button"
                               class="btn btn-success waves-effect waves-light" style="float: right;">Tambah Gallery
                            </a>
                        </div>
                        <div class="card-body">
                            <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
                                <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Image</th>
                                    <th>Url</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                
                                <tbody>

                                </tbody>
                            </table>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div>

        </div> <!-- container-fluid -->
    </div>


    <!-- End Page-content -->
@endsection