@extends('admin::layouts.master')

@section('title')
@lang('translation.Settings')
@endsection

@section('css')
<!-- DataTables -->
<link href="{{ URL::asset('themes/backend/custom/build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('themes/backend/custom/build/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Responsive datatable examples -->
<link href="{{ URL::asset('themes/backend/custom/build/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
Dashboard
@endslot
@slot('title')
Settings
@endslot
@endcomponent

@if ($text = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@elseif ($text = Session::get('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form id="setting" action="{{ route('admin.setting.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="favicon" class="form-label">Favicon</label> 
                                <input class="form-control" type="file" name="favicon" id="favicon" onchange="readFavURL(this);">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <img src="{{ asset(getSettingValue('favicon')) }}" id="fav-box-image" alt="" style="width: 56px; border: #ebebeb 1px solid;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="small_logo" class="form-label">Small Logo</label> 
                                <input class="form-control" type="file" name="small_logo" id="small_logo" onchange="readSmallURL(this);">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <img src="{{ asset(getSettingValue('small_logo')) }}" id="small-box-image" alt="" style="width: 56px; border: #ebebeb 1px solid;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="logo" class="form-label">Logo</label> 
                                <input class="form-control" type="file" name="logo" id="logo" onchange="readURL(this);">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <img src="{{ asset(getSettingValue('logo')) }}" id="box-image" alt="" style="width: 128px; border: #ebebeb 1px solid;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="keywords" class="form-label">Keywords</label>
                                <textarea name="keywords" class="form-control" id="keywords" placeholder="Enter Keywords">{{ getSettingValue('keywords') }}</textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea name="description" class="form-control" id="description" placeholder="Enter Keywords">{{ getSettingValue('description') }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div>
                        <button class="btn btn-primary" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- jquery-validation -->
<script src="{{ asset('themes/backend/custom/build/libs/jquery-validation/jquery.validate.min.js') }}"></script>

<script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#box-image')
                    .attr('src', e.target.result)
                    .width(128)
                    .height(128);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    function readFavURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#fav-box-image')
                    .attr('src', e.target.result)
                    .width(56)
                    .height(56);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

    function readSmallURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#small-box-image')
                    .attr('src', e.target.result)
                    .width(56)
                    .height(56);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection