@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <label>
            Beranda
        </label>
        <ol class="breadcrumb">
            <li>
                <a href="{{ url('dashboard') }}"><i class="fa fa-line-chart"></i> Dashboard</a>
            </li>
            <li class="active">Beranda</li>
        </ol>
    </section>

    <section class="content">

        <div class="row">
            <div class="col-md-12">
                <div class="box box-success">
                    <form id="fadd" action="javascript:submitForm('fadd', '', '')" url="{{ route('updateBeranda') }}">
                        @csrf()        
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Nama Sekolah</label>
                                        <input type="text" class="form-control inp-fadd" name="name_school" value="{{$beranda->name_school}}" placeholder="Masukkan Nama Sekolah">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <center>
                                            <h4>Gambar Banner</h4>
                                            @if ($beranda->banner != "")
                                                <img src="{{ asset('storage/uploads/beranda/'.$beranda->banner) }}" id="img_banner" width="30%"  alt="">
                                            @else
                                                <img src="{{ asset('assets/admin/images/no-image.png') }}" id="img_banner" width="30%"  alt=""><br>
                                            @endif
                                            <input type="file" name="banner" id="banner" class="form-control" style="width: 30%; margin-top: 10px; margin-bottom: 10px;">
                                        </center>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Tagline</label>
                                        <textarea class="form-control" name="tag_line" id="tag_line" cols="20" rows="5">{{$beranda->tag_line}}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Visi</label>
                                        <textarea class="form-control inp-fadd" id="visi" name="visi" style="resize: none;height: 200px;">{{$beranda->visi}}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Misi</label>
                                        <textarea class="form-control inp-fadd" id="misi" name="misi" style="resize: none;height: 200px;">{{$beranda->misi}}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <center>
                                            <h4>Gambar Tentang Sekolah / Sejarah Sekolah</h4>
                                            @if ($beranda->sejarah != "")
                                                <img src="{{ asset('storage/uploads/beranda/'.$beranda->sejarah) }}" id="img_sejarah" width="30%"  alt="">
                                            @else
                                                <img src="{{ asset('assets/admin/images/no-image.png') }}" id="img_sejarah" width="30%"  alt=""><br>
                                            @endif
                                            <input type="file" name="sejarah" id="sejarah" class="form-control" style="width: 30%; margin-top: 10px; margin-bottom: 10px;">
                                        </center>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Nama Kepala Sekolah</label>
                                        <input type="text" class="form-control inp-fadd" name="kepsek" value="{{$beranda->kepsek}}" placeholder="Masukkan Nama Kepala Sekolah">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Tentang Sekolah / Sejarah Sekolah</label>
                                        <textarea class="form-control inp-fadd" id="isi_sejarah" name="isi_sejarah" style="resize: none;height: 200px;">{{$beranda->isi_sejarah}}</textarea>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Vidio Profile</label>
                                        <input type="text" class="form-control inp-fadd" name="url_vidio" value="{{$beranda->url_vidio}}" placeholder="Masukkan Alamat Vidio Profile Sekolah">
                                    </div>

                                </div>
                                <div class="col-md-12">
                                    <button class="btn btn-primary" style="width: 100%" id="btn-fadd"><li class="fa fa-save"></li> Simpan</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script>
        $(document).ready(function() {
            $("#banner").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#img_banner").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
    
            $("#sejarah").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#img_sejarah").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            tinymce.init({
                selector: 'textarea#visi',
                height: 200,
                theme: 'modern',
                menubar: false,
                //  document_base_url: DIR,
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,
                branding: false,
                plugins: ["advlist lists,link,code,table"],
                toolbar: "bold italic underline | numlist bullist | table | formatselect  | link alignleft aligncenter alignright alignjustify embed code"
            });

            tinymce.init({
                selector: 'textarea#misi',
                height: 200,
                theme: 'modern',
                menubar: false,
                //  document_base_url: DIR,
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,
                branding: false,
                plugins: ["advlist lists,link,code,table"],
                toolbar: "bold italic underline | numlist bullist | table | formatselect  | link alignleft aligncenter alignright alignjustify embed code"
            });

            tinymce.init({
                selector: 'textarea#isi_sejarah',
                height: 200,
                theme: 'modern',
                menubar: false,
                //  document_base_url: DIR,
                relative_urls: false,
                remove_script_host: false,
                convert_urls: true,
                branding: false,
                plugins: ["advlist lists,link,code,table"],
                toolbar: "bold italic underline | numlist bullist | table | formatselect  | link alignleft aligncenter alignright alignjustify embed code"
            });

        });
    </script>
@endsection