@extends('admin.master')

@section('content')
<style>
    .sg-page {
        padding: 22px;
        background: #f7f8fb;
        min-height: 100vh;
        color: #5e5a79;
        font-family: inherit;
    }

    .sg-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .sg-title {
        margin: 0;
        font-size: 30px;
        font-weight: 500;
        color: #5e5a79;
        line-height: 1.1;
    }

    .sg-subtitle {
        margin: 9px 0 0;
        color: #9aa0af;
        font-size: 13px;
    }

    .sg-btn {
        border: 0;
        border-radius: 7px;
        background: #16a34a;
        color: #fff;
        font-weight: 700;
        padding: 9px 18px;
        cursor: pointer;
    }

    .sg-card {
        background: #fff;
        border: 1px solid #dfe3ea;
        border-radius: 12px;
        padding: 22px;
        margin-top: 10px;
    }

    .sg-card-title {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #5e5a79;
    }

    .sg-card-help {
        margin: 7px 0 0;
        color: #b4b8c5;
        font-size: 13px;
    }

    .sg-divider {
        height: 1px;
        background: #e7e9ef;
        margin: 18px 0;
    }

    .sg-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 18px;
        padding: 6px 0;
    }

    .sg-row + .sg-row {
        margin-top: 7px;
    }

    .sg-label {
        font-weight: 700;
        font-size: 15px;
        color: #625f7d;
    }

    .sg-help {
        margin-top: 4px;
        color: #b4b8c5;
        font-size: 13px;
    }

    .sg-field-row {
        display: grid;
        grid-template-columns: 440px 1fr;
        align-items: center;
        gap: 28px;
    }

    .sg-input {
        width: 100%;
        height: 38px;
        border: 1px solid #d7dbe5;
        border-radius: 5px;
        padding: 0 13px;
        color: #66627e;
        background: #fff;
        outline: none;
    }

    .sg-input:focus {
        border-color: #8f84f5;
        box-shadow: 0 0 0 3px
            rgba(113, 94, 245, .09);
    }

    .sg-switch {
        position: relative;
        display: inline-block;
        width: 42px;
        height: 24px;
    }

    .sg-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .sg-slider {
        position: absolute;
        inset: 0;
        background: #dedfe3;
        border-radius: 999px;
        transition: .2s;
        cursor: pointer;
    }

    .sg-slider::before {
        content: "";
        position: absolute;
        width: 17px;
        height: 17px;
        left: 4px;
        top: 3.5px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px
            rgba(0, 0, 0, .25);
        transition: .2s;
    }

    .sg-switch input:checked
        + .sg-slider {
        background: #27c875;
    }

    .sg-switch input:checked
        + .sg-slider::before {
        transform: translateX(17px);
    }

    .sg-status {
        margin-top: 14px;
        padding: 4px 0;
        background: #d7f5f8;
        color: #00b9d3;
        font-weight: 700;
        font-size: 14px;
    }

    .sg-alert {
        padding: 12px 14px;
        border-radius: 8px;
        margin-bottom: 14px;
        font-size: 14px;
    }

    .sg-alert.success {
        background: #ecfdf3;
        border: 1px solid #a7f3d0;
        color: #047857;
    }

    .sg-alert.error {
        background: #fff1f2;
        border: 1px solid #fecdd3;
        color: #be123c;
    }

    @media (max-width: 800px) {
        .sg-page {
            padding: 12px;
        }

        .sg-head {
            align-items: flex-start;
        }

        .sg-field-row {
            grid-template-columns: 1fr;
        }

        .sg-card {
            padding: 16px;
        }
    }
</style>

<div class="sg-page">
    @if(session('success'))
        <div class="sg-alert success">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="sg-alert error">
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <form
        method="POST"
        action="{{ route('admin.settings.fraud-guard.update') }}"
    >
        @csrf
        @method('PUT')

        <div class="sg-head">
            <div>
                <h1 class="sg-title">
                    Fraud Guard
                </h1>

                <p class="sg-subtitle">
                    Configure fraud detection
                    rules and blacklists
                </p>
            </div>

            <button
                class="sg-btn"
                type="submit"
            >
                Update
            </button>
        </div>

        <section class="sg-card">
            <h2 class="sg-card-title">
                Fraud Guard - Quantity Limit
            </h2>

            <p class="sg-card-help">
                Limit the maximum quantity per
                product that users can add to
                their cart. This helps prevent
                fraudulent bulk orders.
            </p>

            <div class="sg-divider"></div>

            <div class="sg-row">
                <div>
                    <div class="sg-label">
                        Old Users
                    </div>

                    <div class="sg-help">
                        Apply quantity limit to
                        users who have previous
                        orders
                    </div>
                </div>

                <label class="sg-switch">
                    <input
                        type="hidden"
                        name="old_users_enabled"
                        value="0"
                    >

                    <input
                        type="checkbox"
                        name="old_users_enabled"
                        value="1"
                        @checked(
                            old(
                                'old_users_enabled',
                                $setting
                                    ->old_users_enabled
                            )
                        )
                    >

                    <span
                        class="sg-slider"
                    ></span>
                </label>
            </div>

            <div class="sg-row">
                <div>
                    <div class="sg-label">
                        New Users
                    </div>

                    <div class="sg-help">
                        Apply quantity limit to
                        users who don't have any
                        previous orders
                    </div>
                </div>

                <label class="sg-switch">
                    <input
                        type="hidden"
                        name="new_users_enabled"
                        value="0"
                    >

                    <input
                        type="checkbox"
                        name="new_users_enabled"
                        value="1"
                        @checked(
                            old(
                                'new_users_enabled',
                                $setting
                                    ->new_users_enabled
                            )
                        )
                    >

                    <span
                        class="sg-slider"
                    ></span>
                </label>
            </div>

            <div class="sg-divider"></div>

            <div class="sg-field-row">
                <div class="sg-label">
                    Maximum Quantity Per Product
                </div>

                <div>
                    <input
                        class="sg-input"
                        type="number"
                        name="maximum_quantity_per_product"
                        min="1"
                        max="10000"
                        value="{{ old(
                            'maximum_quantity_per_product',
                            $setting->maximum_quantity_per_product
                        ) }}"
                        required
                    >

                    <div class="sg-help">
                        Maximum quantity of any
                        single product a user can
                        add to their cart
                    </div>
                </div>
            </div>

            <div class="sg-divider"></div>

            <div
                class="sg-status"
                id="fraudGuardStatus"
            >
                Current Status: Guard is
                {{ $setting->isEnabled()
                    ? 'enabled'
                    : 'disabled' }}
            </div>
        </section>
    </form>
</div>

<script>
(() => {
    const switches = [
        ...document.querySelectorAll(
            '.sg-switch input[type="checkbox"]'
        )
    ];

    const status = document.getElementById(
        'fraudGuardStatus'
    );

    function refreshStatus() {
        const enabled = switches.some(
            input => input.checked
        );

        status.textContent =
            'Current Status: Guard is '
            + (
                enabled
                    ? 'enabled'
                    : 'disabled'
            );
    }

    switches.forEach(input => {
        input.addEventListener(
            'change',
            refreshStatus
        );
    });
})();
</script>
@endsection