@extends('admin.master')

@section('title', 'Google Analytics (GA4)')

@section('content')

<style>
    .mk-page {
        padding: 18px;
        min-height: 100vh;
        background: #f5f7f9;
    }

    .mk-head {
        margin-bottom: 18px;
    }

    .mk-head small {
        display: block;
        margin-bottom: 5px;
        color: #0f9f63;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .mk-head h1 {
        margin: 0;
        color: #182230;
        font-size: 25px;
    }

    .mk-head p {
        margin: 6px 0 0;
        color: #7a8492;
        font-size: 13px;
    }

    .mk-card {
        width: 100%;
        max-width: 900px;
        padding: 22px;
        border: 1px solid #e1e6eb;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 7px 25px rgba(15, 23, 42, .04);
    }

    .mk-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .mk-field {
        display: block;
    }

    .mk-field.full {
        grid-column: 1 / -1;
    }

    .mk-field > span {
        display: block;
        margin-bottom: 7px;
        color: #344054;
        font-size: 12px;
        font-weight: 700;
    }

    .mk-field input,
    .mk-field textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dce2e8;
        border-radius: 8px;
        outline: none;
        font-size: 13px;
    }

    .mk-field input:focus,
    .mk-field textarea:focus {
        border-color: #16a765;
        box-shadow: 0 0 0 3px rgba(22, 167, 101, .08);
    }

    .mk-switches {
        grid-column: 1 / -1;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .mk-check {
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #e1e6eb;
        border-radius: 9px;
        background: #f9fbfa;
        font-size: 12px;
        font-weight: 600;
    }

    .mk-note {
        grid-column: 1 / -1;
        padding: 12px;
        border-radius: 9px;
        background: #eefaf4;
        color: #3b6652;
        font-size: 12px;
        line-height: 1.6;
    }

    .mk-btn {
        margin-top: 18px;
        min-height: 40px;
        padding: 9px 17px;
        border: 0;
        border-radius: 8px;
        color: #fff;
        background: #109d5d;
        font-weight: 700;
        cursor: pointer;
    }

    @media(max-width: 700px) {
        .mk-page {
            padding: 10px;
        }

        .mk-card {
            padding: 15px;
        }

        .mk-grid {
            grid-template-columns: 1fr;
        }

        .mk-field.full,
        .mk-switches,
        .mk-note {
            grid-column: auto;
        }
    }
</style>

<div class="mk-page">

    <div class="mk-head">
        <small>MARKETING · GOOGLE</small>

        <h1>
            Analytics (GA4)
        </h1>

        <p>
            Browser GA4 এবং server-side Measurement Protocol configure করুন।
        </p>
    </div>

    @if(session('success'))
        <div
            style="
                margin-bottom:14px;
                padding:11px 13px;
                border-radius:8px;
                color:#08783e;
                background:#eafaf1;
            "
        >
            {{ session('success') }}
        </div>
    @endif

    <form
        method="POST"
        action="{{ route('admin.google-analytics.update') }}"
        class="mk-card"
    >
        @csrf

        <div class="mk-grid">

            <label class="mk-field">
                <span>
                    GA4 Measurement ID
                </span>

                <input
                    type="text"
                    name="measurement_id"
                    value="{{ old('measurement_id', $setting->measurement_id) }}"
                    placeholder="G-XXXXXXXXXX"
                >
            </label>

            <label class="mk-field">
                <span>
                    Measurement Protocol API Secret
                </span>

                <input
                    type="password"
                    name="api_secret"
                    value=""
                    autocomplete="new-password"
                    placeholder="{{ filled($setting->api_secret) ? 'Saved — leave blank to keep' : 'Enter API Secret' }}"
                >
            </label>

            <label class="mk-field full">
                <span>
                    Existing / Custom Tracking Code
                </span>

                <textarea
                    name="tracking_code"
                    rows="6"
                    placeholder="Optional custom GA tracking code"
                >{{ old('tracking_code', $setting->tracking_code) }}</textarea>
            </label>

            <div class="mk-switches">

                <label class="mk-check">
                    <input
                        type="checkbox"
                        name="is_browser_active"
                        value="1"
                        @checked(
                            old(
                                'is_browser_active',
                                $setting->exists
                                    ? $setting->is_browser_active
                                    : true
                            )
                        )
                    >

                    Browser Tracking
                </label>

                <label class="mk-check">
                    <input
                        type="checkbox"
                        name="is_server_active"
                        value="1"
                        @checked(
                            old(
                                'is_server_active',
                                $setting->exists
                                    ? $setting->is_server_active
                                    : true
                            )
                        )
                    >

                    Server Measurement Protocol
                </label>

            </div>

            <div class="mk-note">
                <strong>Important:</strong>
                API Secret কখনো frontend JavaScript-এ দেওয়া হবে না।
                এটি শুধু Laravel server থেকে GA4 Measurement Protocol request-এ ব্যবহার হবে।
            </div>

        </div>

        <button
            type="submit"
            class="mk-btn"
        >
            <i class="fa-solid fa-floppy-disk"></i>
            Save Analytics Settings
        </button>
    </form>

</div>

@endsection