@extends('layouts.admin')
@section('content')
    <section class="content-header">
        <label>
            Pengaturan Website
        </label>
        <ol class="breadcrumb">
            <li>
                <a href="{{ url('dashboard') }}"><i class="fa fa-line-chart"></i> Dashboard</a>
            </li>
            <li class="active">Pengaturan Website</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('updateMetaseo') }}">
                        @csrf()        
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <table class="table table-bordered table-hover" style="width: 100%">
                                        <thead class="bg-success">
                                            <tr>
                                                <th width="5%">No</th>
                                                <th width="25%">Nama Pengaturan</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td align="center">1</td>
                                                <td>Nama Website</td>
                                                <td><input type="text" class="form-control" name="title" value="{{$data->title}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">2</td>
                                                <td>Logo Desktop</td>
                                                <td align="center">
                                                    <div class="form-group">
                                                        @if ($data->logo != "")
                                                            <img src="{{ asset('storage/uploads/setting/'.$data->logo) }}" id="logo_img" width="20%"  alt="">
                                                        @else
                                                            <img src="{{ asset('assets/admin/images/no-image.png') }}" id="logo_img" width="20%"  alt=""><br>
                                                        @endif
                                                        <input type="file" name="logo" id="logo" class="form-control" style="width: 30%; margin-top: 10px; margin-bottom: 10px;">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">3</td>
                                                <td>Logo Mobile</td>
                                                <td align="center">
                                                    <div class="form-group">
                                                        @if ($data->mobile != "")
                                                            <img src="{{ asset('storage/uploads/setting/'.$data->mobile) }}" id="mobile_img" width="20%"  alt="">
                                                        @else
                                                            <img src="{{ asset('assets/admin/images/no-image.png') }}" id="mobile_img" width="20%"  alt=""><br>
                                                        @endif
                                                        <input type="file" name="mobile" id="mobile" class="form-control" style="width: 30%; margin-top: 10px; margin-bottom: 10px;">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">4</td>
                                                <td>Logo Icon</td>
                                                <td align="center">
                                                    <div class="form-group">
                                                        @if ($data->icon != "")
                                                            <img src="{{ asset('storage/uploads/setting/'.$data->icon) }}" id="icon_img" width="20%"  alt="">
                                                        @else
                                                            <img src="{{ asset('assets/admin/images/no-image.png') }}" id="icon_img" width="20%"  alt=""><br>
                                                        @endif
                                                        <input type="file" name="icon" id="icon" class="form-control" style="width: 30%; margin-top: 10px; margin-bottom: 10px;">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">5</td>
                                                <td>No.Telpon & Whatsapp</td>
                                                <td>
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control" name="phone" value="{{ $data->phone }}" placeholder="No.Telpon">
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control" name="whatsapp" value="{{ $data->whatsapp }}" placeholder="No.Whatsapp">
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center">6</td>
                                                <td>Email</td>
                                                <td><input type="text" class="form-control" name="email" value="{{$data->email}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">7</td>
                                                <td>Alamat </td>
                                                <td><textarea class="form-control" name="address" style="resize: none;height: 100px;">{{$data->address}}</textarea></td>
                                            </tr>
                                            <tr>
                                                <td align="center">8</td>
                                                <td>Meta Deskripsi</td>
                                                <td><textarea class="form-control" name="description" style="resize: none;height: 100px;">{{$data->description}}</textarea></td>
                                            </tr>
                                            <tr>
                                                <td align="center">9</td>
                                                <td>Meta Keyword</td>
                                                <td><textarea class="form-control" name="keywords" style="resize: none;height: 100px;">{{$data->keywords}}</textarea></td>
                                            </tr>
                                            <tr>
                                                <td align="center">10</td>
                                                <td>Facebook</td>
                                                <td><input type="text" class="form-control" name="facebook" value="{{$data->facebook}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">11</td>
                                                <td>Instagram</td>
                                                <td><input type="text" class="form-control" name="instagram" value="{{$data->instagram}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">12</td>
                                                <td>Twitter</td>
                                                <td><input type="text" class="form-control" name="twitter" value="{{$data->twitter}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">13</td>
                                                <td>Youtube</td>
                                                <td><input type="text" class="form-control" name="youtube" value="{{$data->youtube}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">14</td>
                                                <td>Tiktiok</td>
                                                <td><input type="text" class="form-control" name="tiktok" value="{{$data->tiktok}}"></td>
                                            </tr>
                                            <tr>
                                                <td align="center">15</td>
                                                <td>Domain</td>
                                                <td><input type="text" class="form-control" name="domain" value="{{$data->domain}}"></td>
                                            </tr>
        
                                        </tbody>
                                    </table>
                                </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() {
            $("#logo").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#logo_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
    
            $("#mobile").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#mobile_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            $("#icon").change(function() {
                const file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        $("#icon_img").attr("src", event.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

        });
    </script>
@endsection