@extends('layouts.admin')

@section('content')
<div class="row">
    <div class="col-md-3 col-xl-2">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">{{ $title }}</h5>
            </div>

            <div class="list-group list-group-flush" role="tablist">
                <a class="list-group-item list-group-item-action active" 
                data-bs-toggle="list" 
                href="#general" role="tab" aria-selected="true">
                General
                </a>
                <a class="list-group-item list-group-item-action" 
                data-bs-toggle="list" href="#password" role="tab" 
                aria-selected="false" tabindex="-1">
                Email
                </a>
                <a class="list-group-item list-group-item-action" 
                data-bs-toggle="list" href="#social-media" role="tab" 
                aria-selected="false" tabindex="-1">
                Social Media
                </a>
                
            </div>
        </div>
    </div>

    <div class="col-md-9 col-xl-10">
        <div class="tab-content">
    
           
                <div class="tab-pane fade active show" id="general" role="tabpanel">
                    <form action="{{ isset($settings_en) ? route('settings.update', $settings_en->setting_id) : route('settings.store_general') }}" 
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @if (isset($settings_en))
                            @method('PUT')
                        @endif
                        <div class="row">
                        
                            <div class="col-md-8">
                                <div class="card">
                                    <div class="card-header">                        
                                        <h5 class="card-title mb-0">General info</h5>
                                        <div class="card-header">
                                            <ul class="nav nav-tabs card-header-tabs pull-right" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link active" 
                                                    data-bs-toggle="tab" 
                                                    href="#tab-1" 
                                                    aria-selected="false" 
                                                    role="tab" tabindex="-1">En</a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link" 
                                                    data-bs-toggle="tab" 
                                                    href="#tab-2" 
                                                    aria-selected="true" 
                                                    role="tab">Id</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="tab-content"> 

                                            <div class="tab-pane fade active show" id="tab-1" role="tabpanel">
                                                <div class="card-body">                                           
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label for="inputname" class="form-label">Name</label>
                                                            <input type="text" class="form-control" name="set_name_en" id="inputName" 
                                                                value="{{ isset($set_name_en) ? $set_name_en->value : old('set_name_en') }}"
                                                                placeholder="Name">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputTagline" class="form-label">Tagline</label>
                                                            <textarea rows="2" class="form-control" name="set_tagline_en" id="inputTagline"
                                                            placeholder="Tell something about yourself">{{ isset($set_tagline_en) ? $set_tagline_en->value : old('set_tagline_en') }}</textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputGreeting" class="form-label">Greeting</label>
                                                            <textarea rows="2" class="form-control" name="set_greeting_en" id="inputGreeting"
                                                            placeholder="Tell something about yourself">{{ isset($set_greeting_en) ? $set_greeting_en->value : old('set_greeting_en') }}</textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputAddress" class="form-label">Address</label>
                                                            <textarea rows="2" class="form-control" name="set_address_en" id="inputAddress"
                                                            placeholder="Tell something about yourself">{{ isset($set_address_en) ? $set_address_en->value : old('set_address_en') }}</textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputPhone" class="form-label">Phone</label>
                                                            <input type="text" class="form-control" name="set_phone_en" id="inputPhone" 
                                                                value="{{ isset($set_phone_en) ? $set_phone_en->value : old('set_phone_en') }}"
                                                                placeholder="Phone">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputEmail" class="form-label">Email</label>
                                                            <input type="text" class="form-control" name="set_email_en" id="inputEmail" 
                                                                value="{{ isset($set_email_en) ? $set_email_en->value : old('set_email_en') }}"
                                                                placeholder="Email">
                                                        </div>
                                                    </div>                                                                          
                                                </div>
                                            </div>

                                            <div class="tab-pane fade" id="tab-2" role="tabpanel">
                                                <div class="card-body">                                            
                                                    <div class="col-md-12">
                                                        <div class="mb-3">
                                                            <label for="inputname" class="form-label">Name</label>
                                                            <input type="text" class="form-control" name="set_name_id" id="inputName" 
                                                                value="{{ isset($set_name_id) ? $set_name_id->value : old('set_name_id') }}"
                                                                placeholder="Name">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputTagline" class="form-label">Tagline</label>
                                                            <textarea rows="2" class="form-control" name="set_tagline_id" id="inputTagline" 
                                                            placeholder="Tell something about yourself">{{ isset($set_tagline_id) ? $set_tagline_id->value : old('set_tagline_id') }}</textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputGreeting" class="form-label">Greeting</label>
                                                            <textarea rows="2" class="form-control" name="set_greeting_id" id="inputGreeting"
                                                            placeholder="Tell something about yourself">{{ isset($set_greeting_id) ? $set_greeting_id->value : old('set_greeting_id') }}</textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputAddress" class="form-label">Address</label>
                                                            <textarea rows="2" class="form-control" name="set_address_id" id="inputAddress"
                                                            placeholder="Tell something about yourself">{{ isset($set_address_id) ? $set_address_id->value : old('set_address_id') }}</textarea>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputPhone" class="form-label">Phone</label>
                                                            <input type="text" class="form-control" name="set_phone_id" id="inputPhone" 
                                                                value="{{ isset($set_phone_id) ? $set_phone_id->value : old('set_phone_id') }}"
                                                                placeholder="Phone">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="inputEmail" class="form-label">Email</label>
                                                            <input type="text" class="form-control" name="set_email_id" id="inputEmail" 
                                                                value="{{ isset($set_email_id) ? $set_email_id->value : old('set_email_id') }}"
                                                                placeholder="Email">
                                                        </div>
                                                    </div>                                           
                                                </div>
                                            </div>

                                        </div>
                                    </div>                    
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card card-primary">
                                    <!-- /.card-header -->
                                    <div class="card-body">
                                       	
                                        <div class="mb-3">
                                            <label><strong>Logo</strong></label>	
                                            <img id="preview" src="{{ isset($set_logo) ? asset('storage/'.$set_logo->value) : asset('storage/'.old('set_logo')) }}" class="rounded-circle img-responsive mt-2" width="auto" height="128"> 
                                            <label class="form-label w-100">File input</label>
                                            <input type="file" name="set_logo" id="upload" onchange="previewImage(event)">
                                            <input type="hidden" name="logo_old" value="{{ isset($set_logo) ? $set_logo->value : old('set_logo') }}" readonly>
                                            <small class="form-text text-muted">For best results, use an image at least 128px by 128px in .jpg format</small>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label><strong>Logo Sticky</strong></label>	
                                            <img id="previewLogoSticky" src="{{ isset($set_logo_sticky) ? asset('storage/'.$set_logo_sticky->value) : asset('storage/'.old('set_logo_sticky')) }}" class="rounded-circle img-responsive mt-2" width="auto" height="80"> 
                                            <label class="form-label w-100">File input</label>
                                            <input type="file" name="set_logo_sticky" id="uploadLogoSticky" onchange="preview_sticky(event)">
                                            <input type="hidden" name="logo_sticky_old" value="{{ isset($set_logo_sticky) ? $set_logo_sticky->value : old('set_logo_sticky') }}" readonly>
                                            <small class="form-text text-muted">For best results, use an image at least 128px by 128px in .jpg format</small>
                                        </div>

                                        <div class="mb-3">
                                            <label><strong>Favicon</strong></label>	
                                            <img id="previewFavicon" src="{{ isset($set_favicon) ? asset('storage/'.$set_favicon->value) : asset('storage/'.old('set_favicon')) }}" class="rounded-circle img-responsive mt-2" width="auto" height="28"> 
                                            <label class="form-label w-100">File input</label>
                                            <input type="file" name="set_favicon" id="uploadLogoSticky" onchange="preview_favicon(event)">
                                            <input type="hidden" name="favicon_old" value="{{ isset($set_favicon) ? $set_favicon->value : old('set_favicon') }}" readonly>
                                            <small class="form-text text-muted">For best results, use an image at least 28px by 28px in .jpg format</small>
                                        </div>

                                        <button type="submit" class="btn btn-primary">Save changes</button>      
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>

           
            <!--  -->

            <div class="tab-pane fade" id="password" role="tabpanel">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">SMTP Server</h5>

                        <form>
                            <div class="mb-3">
                                <label for="mail_host" class="form-label">MAIL_HOST</label>
                                <input type="text" class="form-control" id="mail_host">
                            </div>
                            <div class="mb-3">
                                <label for="mail_port" class="form-label">MAIL_PORT</label>
                                <input type="text" class="form-control" id="mail_port">
                            </div>
                            <div class="mb-3">
                                <label for="mail_username" class="form-label">MAIL_USERNAME</label>
                                <input type="text" class="form-control" id="mail_username">
                            </div>
                            <div class="mb-3">
                                <label for="mail_password" class="form-label">MAIL_PASSWORD</label>
                                <input type="password" class="form-control" id="mail_password">
                            </div>
                            <div class="mb-3">
                                <label for="mail_from_address" class="form-label">MAIL_FROM_ADDRESS</label>
                                <input type="text" class="form-control" id="mail_from_address">
                            </div>

                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </form>

                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="social-media" role="tabpanel">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Social Media info</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('settings.store_sosmed') }}" 
                            method="POST" enctype="multipart/form-data">
                            @csrf
                                @method('POST')                            
                            <div class="mb-3">
                                <label for="inputInstagram" class="form-label">Instagram</label>
                                <input type="text" class="form-control" id="inputInstagram" name="set_instagram"
                                value="{{ isset($set_instagram) ? $set_instagram->value : old('set_instagram') }}"
                                placeholder="Instagram">
                            </div>
                            <div class="mb-3">
                                <label for="inputLinkedIn" class="form-label">LinkedIn</label>
                                <input type="text" class="form-control" id="inputLinkedIn" name="set_linkedin"
                                value="{{ isset($set_linkedin) ? $set_linkedin->value : old('set_linkedin') }}"
                                placeholder="LinkedIn">
                            </div>
                            <div class="mb-3">
                                <label for="inputFacebook" class="form-label">Facebook</label>
                                <input type="text" class="form-control" id="inputFacebook" name="set_facebook"
                                value="{{ isset($set_facebook) ? $set_facebook->value : old('set_facebook') }}"
                                placeholder="Facebook">
                            </div>
                           
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </form>

                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<script>
    function previewImage(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('preview').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

<script>
    function preview_sticky(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('previewLogoSticky').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

<script>
    function preview_favicon(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            document.getElementById('previewFavicon').src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

@endsection