@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="fw-bolder text-center">Settings</h1>
    <form method="POST" action="{{ route('settings.update') }}" enctype="multipart/form-data">
        @csrf
        <div class="row justify-content-center align-items-end mb-3">
            <div class="col-md-4">
                <div class="mb-3 text-center">
                    <label for="app-logo" class="mb-2">
                        <span class="text-center fw-bold">Logo Login</span>
                        <div class="text-center" >
                            <img id="preview-input-logo" src="{{ asset('storage/' . settings('app.logo')) }}" class="img-fluid img-thumbnail" style="max-width:150px; max-height:150px;">
                        </div>
                    </label>
                    <input id="app-logo" name="app[logo]" type="file"
                        class="form-control @error('app.logo') is-invalid @enderror with-image-preview" 
                        data-target="#preview-input-logo"
                    />
                    @error('app.logo')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3 text-center">
                    <label for="app-logo-header" class="mb-2">
                        <span class="text-center fw-bold">Logo Header</span>
                        <div class="text-center" >
                            <img id="preview-input-logo-header" src="{{ asset('storage/' . settings('app.logo-header')) }}" class="img-fluid img-thumbnail" style="max-width:150px; max-height:150px;">
                        </div>
                    </label>
                    <input id="app-logo-header" name="app[logo-header]" type="file"
                        class="form-control @error('app.logo-header') is-invalid @enderror with-image-preview" 
                        data-target="#preview-input-logo-header"
                    />
                    @error('app.logo-header')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3 text-center">
                    <label for="app-favicon" class="mb-2">
                        <span class="text-center fw-bold">Favicon</span>
                        <div class="text-center" >
                            <img id="preview-input-favicon" src="{{ asset('storage/' . settings('app.favicon')) }}" class="img-fluid img-thumbnail" style="max-width:150px; max-height:150px;">
                        </div>
                    </label>
                    <input id="app-favicon" name="app[favicon]" type="file"
                        class="form-control @error('app.favicon') is-invalid @enderror with-image-preview" 
                        data-target="#preview-input-favicon"
                    />
                    @error('app.favicon')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-4">

                <div class="mb-3">
                    <label for="app-title">App Title</label>
                    <input id="app-title" type="text" class="form-control @error('app.title') is-invalid @enderror" name="app[title]" value="{{ old('app.title', settings('app.title', config('app.name'))) }}"/>
                    @error('app.title')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="app-description">App Description</label>
                    <textarea id="app-description" type="text" class="form-control @error('app.description') is-invalid @enderror" name="app[description]">{{ old('app.description', settings('app.description', null)) }}</textarea>
                    @error('app.description')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <button class="btn btn-primary w-100" type="submit"><i class="fa fa-save"></i> Save</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('js')
<script>
$(()=>{
    $('.with-image-preview').on({
        change(event){
            let imageElement    = $(`${$(event.target).attr('data-target')}`);
            let files           =  event.target.files;
            if (files && files[0]) {
                let file            = files[0];
                let reader          = new FileReader();
                reader.onload = (e) => {
                    imageElement.attr('src', e.target.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });
});
</script>
@endpush