@extends('admin.layout.master')
@section('title', 'Setting')
@section('content')
<style>
    .image-input-placeholder {
        background-image: url({{ asset('assets/images/svg/files/blank-image.svg') }});
    }

    [data-theme="dark"] .image-input-placeholder {
        background-image: url({{ asset('assets/images/svg/files/blank-image-dark.svg') }});
    }
</style>
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin_dashboard') }}" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Setting Manager</li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Logo/Favicon</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl index-container">
            <div class="card mb-5 mb-xl-8">
                <div class="card-header border-0 pt-5 align-items-center">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3 mb-1">Logo/Favicon</span>
                    </h3>
                </div>
                <div class="card-body py-3">
                    <div class="table-responsive">
                        <table class="table table-row-dashed align-middle gs-0 gy-4">
                            <thead>
                                <tr class="fw-bold text-muted bg-light">
                                    <th class="ps-4 min-w-250px rounded-start">Constant</th>
                                    <th class="min-w-250px rounded-end">Config value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <form action="{{ route('store_logo_favicon') }}" method="post"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <tr>
                                        <td>
                                            <span
                                                class="text-dark fw-bold text-hover-primary mb-1 fs-6">Darker Logo</span>
                                        </td>
                                        <td>
                                            <span
                                                class="text-dark fw-bold text-hover-primary d-block mb-1 fs-6">
                                                <div class="card-body pt-0 ps-0">
                                                   
                                                    <div class="image-input image-input-outline image-input-placeholder mb-3"
                                                        data-kt-image-input="true">
                                                        <div class="image-input-wrapper w-150px h-150px" data-image_type="logo_image_"
                                                            style="background-image: url({{ asset('backend/images/user_profile/' . $logo->config_value) }});
                                                            background-repeat: no-repeat;
                                                            background-size: 140px;
                                                            background-position: center;">
                                                        </div>
                                                        <label
                                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                            title="Upload">
                                                            <i class="bi bi-pencil-fill fs-7"></i>
                                                            <input type="file" name="logo" id="logo" onChange="image_validation(this,event);" data-name="logo_image_"  data-image_url="{{ asset('backend/images/user_profile/' . $logo->config_value) }}"/>
                                                            <input type="hidden" name="avatar_remove" />
                                                        </label>
                                                      
                                                    </div>
                                                    <div class="text-muted fs-7">Set the image. Only *.png, *.jpg and *.jpeg
                                                        image files are accepted and size must be less than 5mb.</div>
                                                </div>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span
                                                class="text-dark fw-bold text-hover-primary mb-1 fs-6">Lighter Logo</span>
                                        </td>
                                        <td>
                                            <span class="text-dark fw-bold text-hover-primary mb-1 fs-6">
                                            <div class="card-body pt-0 ps-0">
                                               
                                                <div class="image-input image-input-outline image-input-placeholder mb-3"
                                                    data-kt-image-input="true">
                                                    <div class="image-input-wrapper w-150px h-150px" data-image_type="admin_logo_image_"
                                                    style="background-repeat: no-repeat; background-size: 140px; background-position: center;
                                                    @if($admin_logo->config_value) background-image: url({{asset("backend/images/user_profile/".$admin_logo->config_value)}}) @endif
                                                    "></div>

                                                    <label
                                                        class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                        data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                        title="Upload">
                                                        <i class="bi bi-pencil-fill fs-7"></i>
                                                        <input type="file" name="admin_logo" id="admin_logo" onChange="image_validation(this,event);" data-name="admin_logo_image_" data-image_url="{{ asset('backend/images/user_profile/' . $admin_logo->config_value) }}"/>
                                                        <input type="hidden" name="avatar_remove" />
                                                    </label>

                                                </div>
                                                @if ($errors->has('admin_logo'))
                                                    <p class="text-danger">{{ $errors->first('admin_logo') }}</p>
                                                @endif
                                                <div class="text-muted fs-7">Set the image. Only *.png, *.jpg and *.jpeg
                                                    image files are accepted and size must be less than 5mb.</div>
                                            </div>
                                        </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span
                                                class="text-dark fw-bold text-hover-primary mb-1 fs-6">Favicon</span>
                                        </td>
                                        <td>
                                            <span
                                                class="text-dark fw-bold text-hover-primary d-block mb-1 fs-6">
                                                <div class="card-body pt-0 ps-0">
                                                  
                                                    <div class="image-input image-input-outline image-input-placeholder mb-3"
                                                        data-kt-image-input="true">
                                                        <div class="image-input-wrapper w-55px h-55px" data-image_type="favicon_logo_image_" 
                                                            style="background-image: url({{ asset('backend/images/user_profile/' . $favicon->config_value) }});
                                                            background-repeat: no-repeat; background-size: 16px;                                                           
                                                            background-position: center;">
                                                        </div>
                                                        <label
                                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                                            title="Upload">
                                                            <i class="bi bi-pencil-fill fs-7"></i>
                                                            <input type="file" name="favicon" id="favicon" onChange="image_validation(this,event);" data-name="favicon_logo_image_" data-image_url="{{ asset('backend/images/user_profile/' . $favicon->config_value) }}"/>
                                                            <input type="hidden" name="avatar_remove" />
                                                        </label>
                                                      
                                                    </div>
                                                    <div class="text-muted fs-7">Set the image. Only *.png, *.jpg and *.jpeg
                                                        image files are accepted and size must be less than 5mb.</div>
                                                </div>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="4">
                                            <div class="d-flex justify-content-end">`
                                                <button type="submit" id="kt_modal_new_address_submit"
                                                    class="btn btn-primary">
                                                    <span class="indicator-label">Submit</span>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </form>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $(document).ready(function() {
            $("#createForm").validate({
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (placement) {
                        $(placement).append(error)
                    } else {
                        error.insertAfter(element);
                    }
                },
                rules: {
                    name: {
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: "Name field is required."
                    },
                },
                submitHandler: function(form) {
                    document.getElementById('kt_modal_new_address_submit').disabled = true;
                    setTimeout(() => {
                        form.submit();  
                    }, 200);
                },
                showErrors: function(errorMap, errorList) {
                    this.defaultShowErrors();
                    $('input').removeClass('error');
                },
            });
        });

        function image_validation(tag, event) {
            const fileTypeAccepted = ['image/png', 'image/jpeg', 'image/jpg'];
            
            const fileSize = tag.files[0].size / 1024 / 1024;
            const fileType = tag.files[0].type;
            
            let image_name = $(tag).attr("data-name");
            let old_image_url = $(tag).attr("data-image_url");

            let image_id = $(tag).attr("id");
            if (fileSize > 5) {
                $("#"+image_id).val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', `url('${old_image_url}')`);
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Image size should not be greater than 5MB.',
                });
            }else if(!fileTypeAccepted.includes(fileType) ){
                $("#"+image_id).val('');
                $(`div[data-image_type="${image_name}"]`).css('background-image', `url('${old_image_url}')`);
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Only .png .jpeg .jpg file format accepted.',
                });
            }else {
                return true;
            }
        }
    </script>
@endpush