@extends('layouts.app')

@section('content')
<div class="content">

    @if (Session::has('err_message'))
        <div class="alert alert-danger">{{ Session::get('err_message') }}</div>
    @endif

    @if (Session::has('info'))
        <div class="alert alert-success">{{ Session::get('info') }}</div>
    @endif

    <form action="{{ route('site-setting') }}" enctype="multipart/form-data" class="container-fluid" method="POST">
        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header border-0">
                        <h3 class="card-title"><strong>Home Banner (1)</strong></h3> &nbsp; <p>Recommended : 1366x720px</p>
                        <div class="card-tools">
                            <input type="file" id="frmHomeBanner1" name="frmHomeBanner1"
                                style="visibility: hidden; width: 0px; height: 0px;">
                            <button type="button" data-handle="uploader" data-target="#frmHomeBanner1">
                                <i class="fa fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body"
                        style="height: 240px; width: 100%; background-position: center; background-image: url({{ asset('storage/banner/home_banner_1.jpeg') }}); background-size: cover;">
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header border-0">
                         <h3 class="card-title"><strong>Home Banner (2)</strong></h3> &nbsp; <p>Recommended : 1366x720px</p>
                        <div class="card-tools">
                            <input type="file" id="frmHomeBanner2" name="frmHomeBanner2"
                                style="visibility: hidden; width: 0px; height: 0px;">
                            <button type="button" data-handle="uploader" data-target="#frmHomeBanner2">
                                <i class="fa fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body"
                        style="height: 240px; width: 100%; background-position: center; background-image: url({{ asset('storage/banner/home_banner_2.jpeg') }}); background-size: cover;">
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header border-0">
                        <h3 class="card-title"><strong>Home Banner (3)</strong></h3> &nbsp; <p>Recommended : 1366x720px</p>
                        <div class="card-tools">
                            <input type="file" id="frmHomeBanner3" name="frmHomeBanner3"
                                style="visibility: hidden; width: 0px; height: 0px;">
                            <button type="button" data-handle="uploader" data-target="#frmHomeBanner3">
                                <i class="fa fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body"
                        style="height: 240px; width: 100%; background-position: center; background-image: url({{ asset('storage/banner/home_banner_3.jpeg') }}); background-size: cover;">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header border-0">
                        <h3 class="card-title"><strong>Service Banner</strong></h3> &nbsp; <p>Recommended : 950x650px</p>
                        <div class="card-tools">
                            <input type="file" id="frmServiceBanner" name="frmServiceBanner"
                                style="visibility: hidden; width: 0px; height: 0px;">
                            <button type="button" data-handle="uploader" data-target="#frmServiceBanner">
                                <i class="fa fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body"
                        style="height: 240px; width: 100%; background-position: center; background-image: url({{ asset('storage/banner/service_banner.jpeg') }}); background-size: cover;">
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header border-0">
                        <h3 class="card-title"><strong>About Banner (1)</strong></h3> &nbsp; <p>Recommended : 777x395px</p>
                        <div class="card-tools">
                            <input type="file" id="frmAboutBanner" name="frmAboutBanner"
                                style="visibility: hidden; width: 0px; height: 0px;">
                            <button type="button" data-handle="uploader" data-target="#frmAboutBanner">
                                <i class="fa fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body"
                        style="height: 240px; width: 100%; background-position: center; background-image: url({{ asset('storage/banner/about_banner.jpeg') }}); background-size: cover;">
                    </div>
                </div>
            </div>
            <!--
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header border-0">
                       <h3 class="card-title"><strong>About Banner (2)</strong></h3> &nbsp; <p>Recommended : 778x351px</p>
                        <div class="card-tools">
                            <input type="file" id="frmAboutBanner2" name="frmAboutBanner2"
                                style="visibility: hidden; width: 0px; height: 0px;">
                            <button type="button" data-handle="uploader" data-target="#frmAboutBanner2">
                                <i class="fa fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body"
                        style="height: 240px; width: 100%; background-position: center; background-image: url({{ asset('storage/banner/about_banner_2.jpeg') }}); background-size: cover;">
                    </div>
                </div>
            </div> -->
        </div>

        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><strong>Kontak Perusahaan</strong></h3>
                    </div>
                    <div class="card-body">
                            <div class="form-group">
                                <label for="address">Alamat</label>
                                <input id="address" type="text" class="form-control" name="company_address" value="{{ $item->company_address }}" placeholder="address">
                            </div>
                            <div class="form-group">
                                <label for="contactNumber">Nomor Kontak</label>
                                <input type="text" class="form-control" id="contactNumber" name="contact_number" value="{{ $item->contact_number }}" placeholder="contact">
                            </div>
                            
                            <div class="form-group">
                                <label for="contactNumber">Nomor Kontak (2)</label>
                                <input type="text" class="form-control" id="contactNumber2" name="contact_number2" value="{{ $item->contact_number2 }}" placeholder="contact number 2">
                            </div>
                            
                            <div class="form-group">
                                <label for="contactNumber">Nomor Kontak (3)</label>
                                <input type="text" class="form-control" id="contactNumber3" name="contact_number3" value="{{ $item->contact_number3 }}" placeholder="contact number 3">
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" name="email" value="{{ $item->email }}" autocomplete="off" placeholder="email">
                            </div>
                            <div class="form-group">
                                <label for="website">Website</label>
                                <input type="text" class="form-control" id="website" name="website" value="{{ $item->website }}" placeholder="website">
                            </div>
                            <div class="form-group">
                                <label for="map_embed">Map (embed URL)</label>
                                <input type="text" class="form-control" id="map_embed" name="map_embed_url" value="{{ $item->map_embed_url }}" placeholder="">
                            </div>
                             <div class="form-group">
                                <label for="map_embed">Map (embed URL) 2</label>
                                <input type="text" class="form-control" id="map_embed_2" name="map_embed_url_2" value="{{ $item->map_embed_url_2 }}" placeholder="">
                            </div>
                            <div class="form-group">
                                <label for="working_wh_1">Jam Kerja (1st line)</label>
                                <input type="text" class="form-control" id="working_wh_1" name="working_wh_1" value="{{ $item->working_wh_1 }}">
                            </div>
                            <div class="form-group">
                                <label for="working_wh_2">Jam Kerja (2nd line)</label>
                                <input type="text" class="form-control" id="working_wh_2" name="working_wh_2" value="{{ $item->working_wh_2 }}">
                            </div>
                            <div class="form-group">
                                <label for="working_wh_3">Jam Kerja (3rd line)</label>
                                <input type="text" class="form-control" id="working_wh_3" name="working_wh_3" value="{{ $item->working_wh_3 }}">
                            </div>
                            <div class="form-group">
                                <label for="facebook">Facebook</label>
                                <input type="text" class="form-control" id="facebook" name="facebook" value="{{ $item->facebook }}">
                            </div>
                            <div class="form-group">
                                <label for="instagram">Instagram</label>
                                <input type="text" class="form-control" id="instagram" name="instagram" value="{{ $item->instagram }}">
                            </div>
                            <div class="form-group">
                                <label for="twitter">Twitter</label>
                                <input type="text" class="form-control" id="twitter" name="twitter" value="{{ $item->twitter }}">
                            </div>
                            <div class="form-group">
                                <label for="twitter">Nomor Whatsapp</label>
                                <input type="text" class="form-control" id="whatsapp" name="whatsapp" value="{{ $item->whatsapp }}">
                            </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><strong>Tentang Kami</strong></h3>
                    </div>
                    <div class="card-body pad">
                        <div class="mb-3">
                            <textarea name="about_text" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">{!! $item->about_text !!}</textarea>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><strong>Tentang Kami Inggris</strong></h3>
                    </div>
                    <div class="card-body pad">
                        <div class="mb-3">
                            <textarea name="about_text2" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">{!! $item->about_text2 !!}</textarea>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title"><strong>Kata Sambutan</strong></h3>
                    </div>
                    <div class="card-body pad">
                        <div class="mb-3">
                            <textarea name="welcoming_text" class="textarea" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">{!! $item->welcoming_text !!}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-footer text-right">
                        @csrf
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('custom_style')
<link rel="stylesheet" href="{{ asset('storage/assets/plugins/summernote/summernote-bs4.css') }}">
@endpush

@push('customer_script')
<script src="{{ asset('storage/assets/plugins/summernote/summernote-bs4.min.js') }}"></script>
<script>
    $(document).ready(() => {
        $('.textarea').summernote({
            height: 240
        });

        $('[data-handle="uploader"]').click(function () {
            var _this = $(this),
                targetInput = $(_this.data('target'));
            targetInput.change(function () {
                if (this.files && this.files[0]) {
                    handleChange(_this, this.files[0]);
                }
            });

            targetInput.click();
        });

        function handleChange(el, file) {
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = function (e) {
                el.parent().parent().parent().find('.card-body')
                    .css({
                        "background-image": "url(\"" + e.target.result + "\")"
                    });
            }

        }
    });
</script>
@endpush