@extends('backend.admin.layouts.master')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid">
        <div class="pt-6 pb-4">
            <div class="container d-flex justify-content-between flex-stack">
                <div class="d-flex align-items-center me-3">
                    <span class="h-20px border-gray-200 border-start mx-2"></span>
                    <ul class="breadcrumb breadcrumb-separatorless  fs-7 my-1">
                        <li class="breadcrumb-item">
                            <a href="/admin" class="text-dark">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item text-dark">{{ $heading }}</li>
                    </ul>
                </div>
                <div>
                    <a href="#" class="btn btn-dark">Back</a>
                </div>
            </div>
        </div>
        <div class="container">
            @include('layouts.message')
            <div class="card rounded-2">
                <div class="card-header p-2 m-2 border-bottom">
                    <h5 class="mb-0 text-dark fw-bold">Preloader Settings</h5>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="preloaderEnableDisabel">
                        <label class="form-check-label" for="preloaderEnableDisabel">Preloader Enable/Disable</label>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="preloaderCacnelBtn">
                        <label class="form-check-label" for="preloaderCacnelBtn">Preloader Cacnel Button Show/hide</label>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="contentSwitch">
                        <label class="form-check-label" for="contentSwitch">Custom Image Preloader
                            Enable/Disable</label>
                    </div>
                    <form action="" method="">
                        <div id="custom_preloader" class="hidden">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="mb-2">
                                        <input type="file" class="form-control" id="custom_image">
                                        <div class="form-text text-danger">allowed image format: jpg,jpeg,png,gif.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="preloader">
                            <div class="row g-2">
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="spin"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="circle">
                                            <div id="sub-circle"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div class="facebook-load">
                                            <div id="loading"></div>
                                            <div id="loading"></div>
                                            <div id="loading"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="circle"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="circle"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="circle"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="circle"></div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="preloader-box">
                                        <div id="circle"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary mt-3">Save Change</button>
                    </form>
                    <script>
                        var contentSwitch = document.getElementById("contentSwitch");
                        var preloader = document.getElementById("preloader");
                        var custom_preloader = document.getElementById("custom_preloader");
                    
                        contentSwitch.addEventListener("change", function() {
                            if (this.checked) {
                                preloader.classList.add("hidden");
                                custom_preloader.classList.remove("hidden");
                            } else {
                                preloader.classList.remove("hidden");
                                custom_preloader.classList.add("hidden");
                            }
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .preloader-box {
        border: 1px solid #e2e2e2;
        cursor: pointer;
        width: 120px;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* spin */
    #spin {
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid blue;
        border-bottom: 5px solid blue;
        width: 64px;
        height: 64px;
        animation: spin 2s linear infinite;
    }

    /* circle */
    #circle {
        width: 64px;
        height: 64px;
        border: 1px solid blue;
        margin: auto;
        border-radius: 50%;
        position: relative;
    }

    #sub-circle {
        width: 15px;
        height: 15px;
        background: blue;
        border-radius: 50%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        margin: auto;
        animation: circle 6s linear infinite;
    }
    /* spin */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /*circle  */
    @keyframes circle {
        0% {
            transform: rotate(0deg) translate(32px) rotate(0deg);

        }

        100% {
            transform: rotate(360deg) translate(32px) rotate(-360deg);
        }
    }

    .hidden {
        display: none !important;
    }
</style>