@extends('admin.layouts.app')

@section('title', 'গিফট কোড ম্যানেজমেন্ট')

@section('panel')

@php
    $pageTitle = 'গিফট কোড ম্যানেজমেন্ট';
    $oldBonusData = array_values(old('bonus_data', []));
@endphp

<div class="row">
    <div class="col-lg-12">

        {{-- Gift Code Create Card --}}
        <div class="card mb-4">

            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h5 class="mb-0">
                    <i class="las la-gift"></i>
                    গিফট কোড ম্যানেজমেন্ট
                </h5>
            </div>

            <form action="{{ route('admin.gift.store') }}" method="POST">
                @csrf

                <div class="card-body">

                    {{-- Success Message --}}
                    @if(session('success'))
                        <div class="alert alert--success mb-3">
                            <i class="las la-check-circle"></i>
                            {{ session('success') }}
                        </div>
                    @endif

                    {{-- Error Message --}}
                    @if($errors->any())
                        <div class="alert alert--danger mb-3">
                            <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 gift-form-list">

                        {{-- General Information --}}
                        <div class="list-group-item gift-form-item">

                            <div class="gift-section-title">
                                নতুন গিফট কোড তৈরি
                            </div>

                            <div class="gift-section-subtitle">
                                গিফট কোডের টাইটেল, কোড, ব্যবহারের সীমা এবং বোনাস নির্ধারণ করুন।
                            </div>

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

                                {{-- Title --}}
                                <div class="col-md-6">
                                    <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>

                                {{-- Code --}}
                                <div class="col-md-6">
                                    <label for="code" class="form-label fw-bold">
                                        গিফট কোড
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="code"
                                        name="code"
                                        class="form-control text-uppercase @error('code') is-invalid @enderror"
                                        value="{{ old('code') }}"
                                        placeholder="যেমন: EID2026"
                                        maxlength="100"
                                        autocomplete="off"
                                        oninput="normalizeGiftCode(this)"
                                        required
                                    >

                                    <small class="text-muted d-block mt-1">
                                        কোডে ইংরেজি অক্ষর, সংখ্যা, হাইফেন অথবা আন্ডারস্কোর ব্যবহার করুন।
                                    </small>

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

                                {{-- Total Limit --}}
                                <div class="col-md-6">
                                    <label for="total_limit" class="form-label fw-bold">
                                        মোট ব্যবহারের লিমিট
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="number"
                                        id="total_limit"
                                        name="total_limit"
                                        class="form-control @error('total_limit') is-invalid @enderror"
                                        value="{{ old('total_limit') }}"
                                        placeholder="যেমন: 10"
                                        min="1"
                                        step="1"
                                        required
                                    >

                                    <small class="text-muted d-block mt-1">
                                        সর্বোচ্চ কতজন ব্যবহারকারী এই গিফট কোডটি ব্যবহার করতে পারবে।
                                    </small>

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

                                {{-- Bonus Type --}}
                                <div class="col-md-6">
                                    <label for="bonus_type" class="form-label fw-bold">
                                        বোনাসের ধরন
                                        <span class="text--danger">*</span>
                                    </label>

                                    <select
                                        id="bonus_type"
                                        name="bonus_type"
                                        class="form-control @error('bonus_type') is-invalid @enderror"
                                        required
                                    >
                                        <option
                                            value="fixed"
                                            {{ old('bonus_type', 'fixed') === 'fixed' ? 'selected' : '' }}
                                        >
                                            ফিক্সড — সবাই একই পরিমাণ পাবে
                                        </option>

                                        <option
                                            value="tiered"
                                            {{ old('bonus_type') === 'tiered' ? 'selected' : '' }}
                                        >
                                            টায়ার — পজিশন অনুযায়ী ভিন্ন পরিমাণ
                                        </option>
                                    </select>

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

                            </div>
                        </div>

                        {{-- Bonus Amount --}}
                        <div class="list-group-item gift-form-item">

                            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                                <div>
                                    <div class="gift-section-title">
                                        বোনাসের পরিমাণ
                                    </div>

                                    <div class="gift-section-subtitle" id="bonusHelpText">
                                        ফিক্সড বোনাস হলে সবাই একই পরিমাণ পাবে।
                                    </div>
                                </div>

                                <span id="bonusTypeBadge" class="badge badge--primary">
                                    ফিক্সড
                                </span>
                            </div>

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

                                {{-- JavaScript এই অংশে ইনপুট তৈরি করবে --}}
                                <div class="col-md-4">
                                    <label class="form-label fw-bold">
                                        অ্যামাউন্ট
                                        <span class="text--danger">*</span>
                                    </label>

                                    <input
                                        type="number"
                                        name="bonus_data[]"
                                        class="form-control"
                                        placeholder="অ্যামাউন্ট"
                                        min="0"
                                        step="0.01"
                                        value="{{ $oldBonusData[0] ?? '' }}"
                                        required
                                    >
                                </div>

                            </div>

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

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

                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn--primary w-100 h-45">
                        <i class="las la-save"></i>
                        গিফট কোড সেভ করুন
                    </button>
                </div>

            </form>
        </div>

        {{-- Gift Code List --}}
        <div class="card">

            <div class="card-header">
                <h5 class="mb-0">
                    <i class="las la-list"></i>
                    সব গিফট কোড
                </h5>
            </div>

            <div class="card-body p-0">

                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle mb-0 gift-code-table">

                        <thead>
                            <tr>
                                <th class="text-center">সিরিয়াল</th>
                                <th>টাইটেল</th>
                                <th>কোড</th>
                                <th>বোনাসের ধরন</th>
                                <th>প্রোগ্রেস</th>
                                <th class="text-center">অ্যাকশন</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($giftCodes as $gift)

                                @php
                                    $currentClaims = max(0, (int) $gift->current_claims);
                                    $totalLimit = max(0, (int) $gift->total_limit);

                                    $progressPercentage = $totalLimit > 0
                                        ? min(100, max(0, ($currentClaims / $totalLimit) * 100))
                                        : 0;
                                @endphp

                                <tr>

                                    {{-- Serial --}}
                                    <td class="text-center fw-bold">
                                        {{ $loop->iteration }}
                                    </td>

                                    {{-- Title --}}
                                    <td>
                                        <strong>{{ $gift->title }}</strong>
                                    </td>

                                    {{-- Code --}}
                                    <td>
                                        <span class="gift-code-badge">
                                            {{ $gift->code }}
                                        </span>
                                    </td>

                                    {{-- Bonus Type --}}
                                    <td>
                                        @if($gift->bonus_type === 'tiered')
                                            <span class="badge badge--warning">
                                                <i class="las la-layer-group"></i>
                                                টায়ার
                                            </span>
                                        @else
                                            <span class="badge badge--primary">
                                                <i class="las la-coins"></i>
                                                ফিক্সড
                                            </span>
                                        @endif
                                    </td>

                                    {{-- Progress --}}
                                    <td>
                                        <div class="gift-progress-wrapper">

                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <small class="fw-bold">
                                                    {{ $currentClaims }}/{{ $totalLimit }}
                                                </small>

                                                <small class="text-muted">
                                                    {{ number_format($progressPercentage, 0) }}%
                                                </small>
                                            </div>

                                            <div class="progress gift-progress">
                                                <div
                                                    class="progress-bar"
                                                    role="progressbar"
                                                    style="width: {{ number_format($progressPercentage, 2, '.', '') }}%;"
                                                    aria-valuenow="{{ number_format($progressPercentage, 0) }}"
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                                ></div>
                                            </div>

                                            @if($totalLimit <= 0)
                                                <small class="text--danger d-block mt-1">
                                                    লিমিট নির্ধারণ করা হয়নি
                                                </small>
                                            @elseif($currentClaims >= $totalLimit)
                                                <small class="text--success d-block mt-1">
                                                    ব্যবহারের লিমিট পূর্ণ হয়েছে
                                                </small>
                                            @else
                                                <small class="text-muted d-block mt-1">
                                                    বাকি: {{ max(0, $totalLimit - $currentClaims) }}
                                                </small>
                                            @endif

                                        </div>
                                    </td>

                                    {{-- Actions --}}
                                    <td class="text-center">

                                        <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">

                                            @if(Route::has('admin.gift.edit'))
                                                <a
                                                    href="{{ route('admin.gift.edit', $gift->id) }}"
                                                    class="btn btn-sm btn--warning"
                                                >
                                                    <i class="las la-edit"></i>
                                                    এডিট
                                                </a>
                                            @else
                                                <button
                                                    type="button"
                                                    class="btn btn-sm btn--warning"
                                                    disabled
                                                    title="admin.gift.edit route পাওয়া যায়নি"
                                                >
                                                    <i class="las la-edit"></i>
                                                    এডিট
                                                </button>
                                            @endif

                                            @if(Route::has('admin.gift.destroy'))
                                                <form
                                                    action="{{ route('admin.gift.destroy', $gift->id) }}"
                                                    method="POST"
                                                    class="d-inline-block"
                                                    onsubmit="return confirm('আপনি কি নিশ্চিতভাবে এই গিফট কোডটি ডিলিট করতে চান?');"
                                                >
                                                    @csrf
                                                    @method('DELETE')

                                                    <button
                                                        type="submit"
                                                        class="btn btn-sm btn--danger"
                                                    >
                                                        <i class="las la-trash"></i>
                                                        ডিলিট
                                                    </button>
                                                </form>
                                            @else
                                                <button
                                                    type="button"
                                                    class="btn btn-sm btn--danger"
                                                    disabled
                                                    title="admin.gift.destroy route পাওয়া যায়নি"
                                                >
                                                    <i class="las la-trash"></i>
                                                    ডিলিট
                                                </button>
                                            @endif

                                        </div>

                                    </td>
                                </tr>

                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">

                                        <div class="empty-gift-list">
                                            <i class="las la-gift"></i>

                                            <h6 class="mt-2 mb-1">
                                                কোনো গিফট কোড তৈরি করা হয়নি
                                            </h6>

                                            <p class="text-muted mb-0">
                                                উপরের ফর্ম থেকে নতুন একটি গিফট কোড তৈরি করুন।
                                            </p>
                                        </div>

                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

                    </table>
                </div>

            </div>

            {{-- Pagination --}}
            @if(method_exists($giftCodes, 'links'))
                <div class="card-footer">
                    {{ $giftCodes->links() }}
                </div>
            @endif

        </div>

    </div>
</div>

@endsection

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

    .gift-form-item {
        padding: 18px;
        border-color: rgba(0, 0, 0, 0.06);
    }

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

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

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

    .gift-code-table {
        min-width: 900px;
    }

    .gift-code-table thead th {
        padding: 14px;
        white-space: nowrap;
        vertical-align: middle;
        font-weight: 800;
    }

    .gift-code-table tbody td {
        padding: 14px;
        vertical-align: middle;
    }

    .gift-code-badge {
        display: inline-block;
        padding: 6px 10px;
        color: #0c5460;
        background-color: #d1ecf1;
        border: 1px dashed #8ed1dc;
        border-radius: 6px;
        font-family: monospace;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.5px;
    }

    .gift-progress-wrapper {
        width: 180px;
        max-width: 100%;
    }

    .gift-progress {
        height: 8px;
        overflow: hidden;
        background-color: #e9ecef;
        border-radius: 10px;
    }

    .gift-progress .progress-bar {
        background-color: #28c76f;
        border-radius: 10px;
        transition: width 0.3s ease;
    }

    .empty-gift-list > i {
        color: #b5b5b5;
        font-size: 50px;
    }

    .tier-position-box {
        height: 100%;
        padding: 12px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        background-color: #fafafa;
    }

    .tier-position-label {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 800;
    }

    @media (max-width: 575px) {
        .card-footer .btn {
            width: 100%;
        }
    }
</style>
@endpush

@push('script')
<script>
    const oldBonusData = @json($oldBonusData);

    function normalizeGiftCode(input) {
        let value = input.value.toUpperCase();

        value = value.replace(/\s+/g, '-');
        value = value.replace(/[^A-Z0-9_-]/g, '');
        value = value.replace(/-{2,}/g, '-');
        value = value.replace(/_{2,}/g, '_');

        input.value = value;
    }

    function getCurrentBonusValues() {
        const inputs = document.querySelectorAll(
            '#dynamic_input_container input[name="bonus_data[]"]'
        );

        return Array.from(inputs).map(function (input) {
            return input.value;
        });
    }

    function createBonusInput(position, value, tiered) {
        const column = document.createElement('div');
        column.className = tiered
            ? 'col-6 col-md-4 col-lg-3'
            : 'col-md-4';

        const wrapper = document.createElement('div');

        if (tiered) {
            wrapper.className = 'tier-position-box';
        }

        const label = document.createElement('label');
        label.className = tiered
            ? 'tier-position-label'
            : 'form-label fw-bold';

        label.textContent = tiered
            ? 'পজিশন ' + position
            : 'অ্যামাউন্ট';

        const requiredMark = document.createElement('span');
        requiredMark.className = 'text--danger';
        requiredMark.textContent = ' *';

        label.appendChild(requiredMark);

        const input = document.createElement('input');
        input.type = 'number';
        input.name = 'bonus_data[]';
        input.className = 'form-control';
        input.placeholder = tiered
            ? 'পজিশন ' + position + '-এর বোনাস'
            : 'অ্যামাউন্ট';

        input.min = '0';
        input.step = '0.01';
        input.required = true;
        input.value = value ?? '';

        wrapper.appendChild(label);
        wrapper.appendChild(input);
        column.appendChild(wrapper);

        return column;
    }

    function toggleBonusFields(useOldValues = false) {
        const typeSelect = document.getElementById('bonus_type');
        const limitInput = document.getElementById('total_limit');
        const container = document.getElementById('dynamic_input_container');
        const helpText = document.getElementById('bonusHelpText');
        const typeBadge = document.getElementById('bonusTypeBadge');

        if (!typeSelect || !limitInput || !container) {
            return;
        }

        const type = typeSelect.value;
        const limit = Math.max(
            0,
            parseInt(limitInput.value, 10) || 0
        );

        const currentValues = useOldValues
            ? oldBonusData
            : getCurrentBonusValues();

        container.innerHTML = '';

        if (type === 'tiered') {
            helpText.textContent =
                'প্রতিটি ক্লেইম পজিশনের জন্য আলাদা বোনাসের পরিমাণ নির্ধারণ করুন।';

            typeBadge.className = 'badge badge--warning';
            typeBadge.textContent = 'টায়ার';

            if (limit < 1) {
                const messageColumn = document.createElement('div');
                messageColumn.className = 'col-12';

                const message = document.createElement('div');
                message.className = 'alert alert--warning mb-0';
                message.innerHTML =
                    '<i class="las la-info-circle"></i> ' +
                    'টায়ার বোনাস ইনপুট তৈরি করতে প্রথমে মোট ব্যবহারের লিমিট লিখুন।';

                messageColumn.appendChild(message);
                container.appendChild(messageColumn);

                return;
            }

            const fragment = document.createDocumentFragment();

            for (let position = 1; position <= limit; position++) {
                fragment.appendChild(
                    createBonusInput(
                        position,
                        currentValues[position - 1] ?? '',
                        true
                    )
                );
            }

            container.appendChild(fragment);
        } else {
            helpText.textContent =
                'ফিক্সড বোনাস হলে প্রত্যেক ব্যবহারকারী একই পরিমাণ বোনাস পাবে।';

            typeBadge.className = 'badge badge--primary';
            typeBadge.textContent = 'ফিক্সড';

            container.appendChild(
                createBonusInput(
                    1,
                    currentValues[0] ?? '',
                    false
                )
            );
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const typeSelect = document.getElementById('bonus_type');
        const limitInput = document.getElementById('total_limit');

        if (typeSelect) {
            typeSelect.addEventListener('change', function () {
                toggleBonusFields(false);
            });
        }

        if (limitInput) {
            limitInput.addEventListener('input', function () {
                if (
                    typeSelect &&
                    typeSelect.value === 'tiered'
                ) {
                    toggleBonusFields(false);
                }
            });
        }

        toggleBonusFields(true);
    });
</script>
@endpush