@extends('layouts.app')
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0" style="font-size: 2.5rem; color: #333; font-weight: bold;">Setting Page</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#" style="color: #666;">Setting</a></li>
                        <li class="breadcrumb-item active" aria-current="page" style="color: #333; font-weight: bold;">
                            Dashboard
                        </li>
                    </ol>
                </div>
            </div>
            <form action="{{route('admin.setting.form')}}" method="post" enctype="multipart/form-data">
                @csrf
                <section>
                    <div class="settings">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="site_title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Home
                                        Up Content</label>
                                   <textarea rows="6" class="form-control" name="home_upper_content">{{$setting->home_upper_content ?? ''}}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="site_title" style="font-size: 1.2rem; color: #555; font-weight: bold;">Site
                                        Title</label>
                                    <input type="text" class="form-control" name="site_title"
                                           value="{{$setting->site_title ?? ''}}">
                                </div>

                                <div class="form-group">
                                    <label for="company_name"
                                           style="font-size: 1.2rem; color: #555; font-weight: bold;">Company
                                        Name</label>
                                    <input type="text" class="form-control" name="company_name"
                                           value="{{$setting->company_name ?? ''}}">
                                </div>

                                <div class="form-group">
                                    <label for="fav" style="font-size: 1.2rem; color: #555; font-weight: bold;">Fav
                                        Icon</label>
                                    <input type="file" class="form-control" name="fav_icon" id="fav" onchange="previewImages(event, 'previews1')">
                                    <div id="previews1">
                                        @if ($setting->getMedia('fav_icon')->isNotEmpty())
                                            @foreach ($setting->getMedia('fav_icon') as $media)
                                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                                            @endforeach
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="logo"
                                           style="font-size: 1.2rem; color: #555; font-weight: bold;">Logo</label>
                                    <input type="file" class="form-control" name="logo" id="logo" onchange="previewImages(event, 'previews2')">
                                    <div id="previews2">
                                        @if ($setting->getMedia('logo')->isNotEmpty())
                                            @foreach ($setting->getMedia('logo') as $media)
                                                <img src="{{ $media->getUrl() }}" alt="Slider Background Image" style="max-width: 200px; margin-top: 10px;">
                                            @endforeach
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="content" style="font-size: 1.2rem; color: #555; font-weight: bold;">Side
                                        Footer Content</label>
                                    <input type="text" class="form-control" name="side_content"
                                           value="{{$setting->side_content ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="copy_right" style="font-size: 1.2rem; color: #555; font-weight: bold;">Copy
                                        Right</label>
                                    <input type="text" class="form-control" name="copy_right"
                                           value="{{$setting->copy_right ?? ''}}">
                                </div>
                            </div>


                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email"
                                           style="font-size: 1.2rem; color: #555; font-weight: bold;">Email</label>
                                    <input type="email" name="email" class="form-control"
                                           value="{{$setting->email ?? ''}}">
                                </div>

                                <div class="form-group">
                                    <label for="phone" style="font-size: 1.2rem; color: #555; font-weight: bold;">Phone
                                        Number</label>
                                    <input type="text" name="phone" class="form-control"
                                           value="{{$setting->phone ?? ''}}">
                                </div>

                                <div class="form-group">
                                    <label for="location" style="font-size: 1.2rem; color: #555; font-weight: bold;">Address</label>
                                    <input type="text" name="address" class="form-control"
                                           value="{{$setting->address ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="facebook" style="font-size: 1.2rem; color: #555; font-weight: bold;">Facebook
                                        Link</label>
                                    <input type="url" name="facebook" class="form-control"
                                           value="{{$setting->facebook ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="instagram" style="font-size: 1.2rem; color: #555; font-weight: bold;">Instagram
                                        Link</label>
                                    <input type="url" name="instagram" class="form-control"
                                           value="{{$setting->instagram ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="pinterest" style="font-size: 1.2rem; color: #555; font-weight: bold;">Pinterest
                                        Link</label>
                                    <input type="url" name="pinterest" class="form-control"
                                           value="{{$setting->pinterest ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="tiktok" style="font-size: 1.2rem; color: #555; font-weight: bold;">Tiktok
                                        Link</label>
                                    <input type="url" name="tiktok" class="form-control"
                                           value="{{$setting->tiktok ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="tiktok" style="font-size: 1.2rem; color: #555; font-weight: bold;">Google
                                        Link</label>
                                    <input type="url" name="google" class="form-control"
                                           value="{{$setting->google ?? ''}}">
                                </div>
                                <br>
                                <div class="form-group">
                                    <label for="tiktok" style="font-size: 1.2rem; color: #555; font-weight: bold;">Map</label>
                                    <input type="url" name="map" class="form-control"
                                           value="{{$setting->map ?? ''}}">
                                </div>

                            </div>
                        </div>

                    </div>
                </section>
                <button type="submit" class="btn-success">Submit</button>

            </form>

        </div>
    </div>
@endsection
@push('page_scripts')
    <script>
        function previewImages(event, containerId) {
            const input = event.target;
            const previewsContainer = document.getElementById(containerId);
            previewsContainer.innerHTML = ''; // Clear previous previews

            for (let i = 0; i < input.files.length; i++) {
                const reader = new FileReader();
                const img = document.createElement('img');
                img.style.maxWidth = '200px';
                img.style.marginTop = '10px';

                reader.onload = function() {
                    img.src = reader.result;
                }

                reader.readAsDataURL(input.files[i]);
                previewsContainer.appendChild(img);
            }
        }
    </script>

@endpush