@extends('admin.layouts.app')

@section('title', 'নতুন নোটিফিকেশন')

@section('panel')

@php
    $pageTitle = 'নতুন নোটিফিকেশন';
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.notifications.index') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-arrow-left"></i>
        নোটিফিকেশন তালিকা
    </a>
@endpush

<div class="row justify-content-center">
    <div class="col-xl-9 col-lg-10">

        <div class="card">

            <div class="card-header">
                <h5 class="mb-0">
                    <i class="las la-paper-plane"></i>
                    নতুন নোটিফিকেশন তৈরি করুন
                </h5>
            </div>

            <form
                action="{{ route('admin.notifications.store') }}"
                method="POST"
                enctype="multipart/form-data"
            >
                @csrf

                <div class="card-body">

                    @if($errors->any())
                        <div class="alert alert--danger mb-4">
                            <div class="fw-bold mb-2">
                                <i class="las la-exclamation-circle"></i>
                                নিচের তথ্যগুলো সঠিকভাবে পূরণ করুন:
                            </div>

                            <ul class="mb-0 ps-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="list-group notification-form-list">

                        {{-- Content --}}
                        <div class="list-group-item notification-form-item">

                            <div class="notification-section-title">
                                নোটিফিকেশনের মূল তথ্য
                            </div>

                            <div class="notification-section-subtitle">
                                ইউজারের কাছে প্রধান শিরোনামটি বড় করে এবং তার নিচে মূল কনটেন্ট দেখানো হবে।
                            </div>

                            <div class="row g-3 mt-1">

                                <div class="col-12">
                                    <label for="title" class="form-label fw-bold">
                                        প্রধান শিরোনাম
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="title"
                                        name="title"
                                        class="form-control @error('title') is-invalid @enderror"
                                        value="{{ old('title') }}"
                                        placeholder="যেমন: গুরুত্বপূর্ণ ঘোষণা"
                                        maxlength="255"
                                        required
                                    >

                                    @error('title')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                <div class="col-12">
                                    <label for="content" class="form-label fw-bold">
                                        মূল কনটেন্ট
                                        <span class="text--danger">*</span>
                                    </label>

                                    <textarea
                                        id="content"
                                        name="content"
                                        rows="10"
                                        class="form-control @error('content') is-invalid @enderror"
                                        placeholder="নোটিফিকেশনের বিস্তারিত তথ্য লিখুন..."
                                        required
                                    >{{ old('content') }}</textarea>

                                    @error('content')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                            </div>
                        </div>

                        {{-- Image and Link --}}
                        <div class="list-group-item notification-form-item">

                            <div class="notification-section-title">
                                ছবি ও অ্যাকশন লিংক
                            </div>

                            <div class="notification-section-subtitle">
                                প্রয়োজন না হলে এই অংশগুলো খালি রাখতে পারবেন।
                            </div>

                            <div class="row g-3 mt-1">

                                <div class="col-md-6">
                                    <label for="image" class="form-label fw-bold">
                                        নোটিফিকেশন ইমেজ
                                    </label>

                                    <input
                                        type="file"
                                        id="image"
                                        name="image"
                                        class="form-control @error('image') is-invalid @enderror"
                                        accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
                                        onchange="previewNoticeImage(event)"
                                    >

                                    <small class="text-muted d-block mt-1">
                                        JPG, PNG অথবা WEBP। সর্বোচ্চ ৫ MB।
                                    </small>

                                    @error('image')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div id="imagePreviewWrapper" class="image-preview-box mt-3 d-none">
                                        <img
                                            id="imagePreview"
                                            src=""
                                            alt="Notification preview"
                                        >

                                        <button
                                            type="button"
                                            class="btn btn-outline--danger btn-sm mt-2"
                                            onclick="removeNoticeImage()"
                                        >
                                            <i class="las la-times"></i>
                                            ছবি বাতিল করুন
                                        </button>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label for="action_url" class="form-label fw-bold">
                                        অ্যাকশন লিংক
                                    </label>

                                    <input
                                        type="url"
                                        id="action_url"
                                        name="action_url"
                                        class="form-control @error('action_url') is-invalid @enderror"
                                        value="{{ old('action_url') }}"
                                        placeholder="https://example.com/page"
                                        oninput="toggleActionText()"
                                    >

                                    <small class="text-muted d-block mt-1">
                                        লিংক অবশ্যই http:// অথবা https:// দিয়ে শুরু হবে।
                                    </small>

                                    @error('action_url')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div id="actionTextWrapper" class="mt-3">
                                        <label for="action_text" class="form-label fw-bold">
                                            লিংক বাটনের লেখা
                                        </label>

                                        <input
                                            type="text"
                                            id="action_text"
                                            name="action_text"
                                            class="form-control @error('action_text') is-invalid @enderror"
                                            value="{{ old('action_text') }}"
                                            placeholder="যেমন: বিস্তারিত দেখুন"
                                            maxlength="150"
                                        >

                                        @error('action_text')
                                            <small class="text--danger fw-bold d-block mt-1">
                                                {{ $message }}
                                            </small>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                        </div>

                        {{-- Audience --}}
                        <div class="list-group-item notification-form-item">

                            <div class="notification-section-title">
                                কাদের কাছে পাঠানো হবে
                            </div>

                            <div class="notification-section-subtitle">
                                নির্দিষ্ট ইউজারকে পাঠাতে referral code ব্যবহার করুন।
                            </div>

                            <div class="row g-3 mt-1">

                                <div class="col-12">
                                    <label for="audience_type" class="form-label fw-bold">
                                        Audience
                                        <span class="text--danger">*</span>
                                    </label>

                                    <select
                                        id="audience_type"
                                        name="audience_type"
                                        class="form-control @error('audience_type') is-invalid @enderror"
                                        required
                                        onchange="toggleAudienceFields()"
                                    >
                                        @foreach($audienceOptions as $value => $label)
                                            <option
                                                value="{{ $value }}"
                                                {{ old('audience_type', 'all') === $value ? 'selected' : '' }}
                                            >
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('audience_type')
                                        <small class="text--danger fw-bold d-block mt-1">
                                            {{ $message }}
                                        </small>
                                    @enderror
                                </div>

                                {{-- Specific User --}}
                                <div id="specificUserSection" class="col-12 d-none">

                                    <div class="audience-box">

                                        <label for="referral_code" class="form-label fw-bold">
                                            ইউজারের Referral Code
                                            <span class="text--danger">*</span>
                                        </label>

                                        <div class="input-group">
                                            <input
                                                type="text"
                                                id="referral_code"
                                                name="referral_code"
                                                class="form-control @error('referral_code') is-invalid @enderror"
                                                value="{{ old('referral_code') }}"
                                                placeholder="যেমন: 123456"
                                                maxlength="50"
                                            >

                                            <button
                                                type="button"
                                                id="searchUserButton"
                                                class="btn btn--primary"
                                                onclick="searchReferralUser()"
                                            >
                                                <i class="las la-search"></i>
                                                ইউজার খুঁজুন
                                            </button>
                                        </div>

                                        @error('referral_code')
                                            <small class="text--danger fw-bold d-block mt-1">
                                                {{ $message }}
                                            </small>
                                        @enderror

                                        <div id="userSearchResult" class="mt-3"></div>

                                    </div>
                                </div>

                                {{-- Selected Users --}}
                                <div id="selectedUsersSection" class="col-12 d-none">

                                    <div class="audience-box">

                                        <label for="referral_codes" class="form-label fw-bold">
                                            একাধিক Referral Code
                                            <span class="text--danger">*</span>
                                        </label>

                                        <textarea
                                            id="referral_codes"
                                            name="referral_codes"
                                            rows="6"
                                            class="form-control @error('referral_codes') is-invalid @enderror"
                                            placeholder="প্রতিটি referral code নতুন লাইনে অথবা কমা দিয়ে লিখুন। যেমন:&#10;123456&#10;654321"
                                        >{{ old('referral_codes') }}</textarea>

                                        <small class="text-muted d-block mt-1">
                                            নতুন লাইন, কমা, space অথবা semicolon দিয়ে আলাদা করতে পারবেন।
                                        </small>

                                        @error('referral_codes')
                                            <small class="text--danger fw-bold d-block mt-1">
                                                {{ $message }}
                                            </small>
                                        @enderror

                                    </div>
                                </div>

                            </div>
                        </div>

                        {{-- Email --}}
                        <div class="list-group-item notification-form-item">

                            <div class="notification-section-title">
                                ইমেইল সেটিংস
                            </div>

                            <div class="notification-section-subtitle">
                                ওয়েবসাইটে নোটিফিকেশন সবসময় যাবে। নিচের অপশন চালু করলে ইমেইলেও যাবে।
                            </div>

                            <div class="email-option-box mt-3">

                                <label class="notification-switch">
                                    <input
                                        type="checkbox"
                                        name="send_email"
                                        value="1"
                                        {{ old('send_email') ? 'checked' : '' }}
                                    >

                                    <span class="notification-switch-slider"></span>

                                    <span class="notification-switch-label">
                                        একই নোটিফিকেশন ইউজারের ইমেইলেও পাঠান
                                    </span>
                                </label>

                            </div>
                        </div>

                    </div>
                </div>

                <div class="card-footer">
                    <div class="row g-2">

                        <div class="col-md-4">
                            <a
                                href="{{ route('admin.notifications.index') }}"
                                class="btn btn-outline--dark w-100 h-45"
                            >
                                <i class="las la-arrow-left"></i>
                                ফিরে যান
                            </a>
                        </div>

                        <div class="col-md-4">
                            <button
                                type="submit"
                                name="status"
                                value="draft"
                                class="btn btn--warning w-100 h-45"
                            >
                                <i class="las la-file"></i>
                                Draft সংরক্ষণ
                            </button>
                        </div>

                        <div class="col-md-4">
                            <button
                                type="submit"
                                name="status"
                                value="sent"
                                class="btn btn--primary w-100 h-45"
                                onclick="return confirm('আপনি কি এখনই নোটিফিকেশন পাঠাতে চান?');"
                            >
                                <i class="las la-paper-plane"></i>
                                এখনই পাঠান
                            </button>
                        </div>

                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

@endsection

@push('style')
<style>
    .notification-form-list {
        overflow: hidden;
        border-radius: 12px;
    }

    .notification-form-item {
        padding: 20px;
        border-color: rgba(0, 0, 0, 0.07);
    }

    .notification-form-item:hover {
        background-color: #fafafa;
    }

    .notification-section-title {
        font-size: 16px;
        font-weight: 900;
    }

    .notification-section-subtitle {
        margin-top: 3px;
        color: #6c757d;
        font-size: 12px;
        font-weight: 700;
    }

    .audience-box,
    .email-option-box,
    .image-preview-box {
        padding: 15px;
        border: 1px dashed rgba(0, 0, 0, 0.15);
        border-radius: 9px;
        background-color: #fafafa;
    }

    .image-preview-box img {
        display: block;
        width: 100%;
        max-width: 350px;
        max-height: 240px;
        object-fit: contain;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .notification-switch {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        cursor: pointer;
    }

    .notification-switch input {
        display: none;
    }

    .notification-switch-slider {
        position: relative;
        width: 48px;
        height: 25px;
        flex-shrink: 0;
        border-radius: 30px;
        background-color: #b7b7b7;
        transition: 0.2s;
    }

    .notification-switch-slider::before {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        content: "";
        border-radius: 50%;
        background-color: #ffffff;
        transition: 0.2s;
    }

    .notification-switch input:checked + .notification-switch-slider {
        background-color: #28c76f;
    }

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

    .notification-switch-label {
        font-weight: 800;
    }

    .found-user-card {
        padding: 14px;
        border: 1px solid rgba(40, 199, 111, 0.25);
        border-radius: 8px;
        background-color: rgba(40, 199, 111, 0.08);
    }
</style>
@endpush

@push('script')
<script>
    function toggleAudienceFields() {
        const audience = document.getElementById('audience_type').value;
        const specificSection = document.getElementById('specificUserSection');
        const selectedSection = document.getElementById('selectedUsersSection');
        const referralCode = document.getElementById('referral_code');
        const referralCodes = document.getElementById('referral_codes');

        specificSection.classList.add('d-none');
        selectedSection.classList.add('d-none');

        referralCode.required = false;
        referralCodes.required = false;

        if (audience === 'specific') {
            specificSection.classList.remove('d-none');
            referralCode.required = true;
        }

        if (audience === 'selected') {
            selectedSection.classList.remove('d-none');
            referralCodes.required = true;
        }
    }

    function toggleActionText() {
        const actionUrl = document.getElementById('action_url');
        const actionText = document.getElementById('action_text');

        actionText.required = actionUrl.value.trim() !== '';
    }

    async function searchReferralUser() {
        const referralCodeInput = document.getElementById('referral_code');
        const resultBox = document.getElementById('userSearchResult');
        const button = document.getElementById('searchUserButton');
        const referralCode = referralCodeInput.value.trim();

        if (!referralCode) {
            resultBox.innerHTML =
                '<div class="alert alert--warning mb-0">Referral code লিখুন।</div>';

            return;
        }

        button.disabled = true;
        button.innerHTML = '<i class="las la-spinner la-spin"></i> খোঁজা হচ্ছে';

        resultBox.innerHTML =
            '<div class="text-muted">ইউজার খোঁজা হচ্ছে...</div>';

        try {
            const searchUrl = @json(route('admin.notifications.search-user'));

            const response = await fetch(
                searchUrl + '?referral_code=' + encodeURIComponent(referralCode),
                {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                }
            );

            const data = await response.json();

            if (!response.ok || !data.success) {
                throw new Error(data.message || 'ইউজার পাওয়া যায়নি।');
            }

            const user = data.user;

            const wrapper = document.createElement('div');
            wrapper.className = 'found-user-card';

            const name = document.createElement('div');
            name.className = 'fw-bold mb-1';
            name.textContent = user.name || 'নাম নেই';

            const details = document.createElement('div');
            details.className = 'small text-muted';

            details.textContent =
                'Referral: ' + user.referral_code +
                ' | Mobile: ' + (user.mobile || 'নেই') +
                ' | Email: ' + (user.email || 'নেই') +
                ' | Status: ' + user.status_text;

            wrapper.appendChild(name);
            wrapper.appendChild(details);

            resultBox.innerHTML = '';
            resultBox.appendChild(wrapper);
        } catch (error) {
            resultBox.innerHTML = '';

            const alertBox = document.createElement('div');
            alertBox.className = 'alert alert--danger mb-0';
            alertBox.textContent = error.message;

            resultBox.appendChild(alertBox);
        } finally {
            button.disabled = false;
            button.innerHTML =
                '<i class="las la-search"></i> ইউজার খুঁজুন';
        }
    }

    function previewNoticeImage(event) {
        const input = event.target;
        const wrapper = document.getElementById('imagePreviewWrapper');
        const preview = document.getElementById('imagePreview');

        if (!input.files || !input.files[0]) {
            wrapper.classList.add('d-none');
            preview.src = '';
            return;
        }

        const file = input.files[0];
        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/webp'
        ];

        if (!allowedTypes.includes(file.type)) {
            input.value = '';
            wrapper.classList.add('d-none');
            preview.src = '';

            alert('শুধুমাত্র JPG, PNG অথবা WEBP ইমেজ নির্বাচন করুন।');
            return;
        }

        const reader = new FileReader();

        reader.onload = function (loadEvent) {
            preview.src = loadEvent.target.result;
            wrapper.classList.remove('d-none');
        };

        reader.readAsDataURL(file);
    }

    function removeNoticeImage() {
        document.getElementById('image').value = '';
        document.getElementById('imagePreview').src = '';
        document.getElementById('imagePreviewWrapper').classList.add('d-none');
    }

    document.addEventListener('DOMContentLoaded', function () {
        toggleAudienceFields();
        toggleActionText();
    });
</script>
@endpush