@extends('appshell::layouts.private')

@section('title')
    Gift Coupon Codes
@stop

@section('content')

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

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div></div>
        <a href="{{ route('appshell.gift_coupons.create') }}" class="btn btn-primary btn-sm">+ New Code</a>
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Name</th>
                        <th>SKU</th>
                        <th>Duration</th>
                        <th>Valid From</th>
                        <th>Valid Until</th>
                        <th>Uses</th>
                        <th>Active</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                @forelse($codes as $code)
                    <tr>
                        <td><code>{{ $code->code }}</code></td>
                        <td>{{ $code->name }}</td>
                        <td>{{ $code->sku ?? '—' }}</td>
                        <td>{{ $code->gift_duration_days }} days</td>
                        <td>{{ $code->valid_from ? $code->valid_from->format('Y-m-d') : '—' }}</td>
                        <td>{{ $code->valid_until ? $code->valid_until->format('Y-m-d') : '—' }}</td>
                        <td>{{ $code->uses_count }}{{ $code->max_uses ? ' / ' . $code->max_uses : ' / ∞' }}</td>
                        <td>
                            @if($code->is_active)
                                <span class="badge badge-success">Active</span>
                            @else
                                <span class="badge badge-secondary">Inactive</span>
                            @endif
                        </td>
                        <td class="text-right text-nowrap">
                            <button type="button" class="btn btn-sm btn-outline-info js-gen-coupon"
                                data-code="{{ $code->code }}"
                                data-name="{{ $code->name }}"
                                data-sku="{{ $code->sku ?? '' }}"
                                data-duration="{{ $code->gift_duration_days }}"
                                data-valid-from="{{ $code->valid_from ? $code->valid_from->format('M j, Y') : '' }}"
                                data-valid-until="{{ $code->valid_until ? $code->valid_until->format('M j, Y') : '' }}">
                                Generate HTML
                            </button>
                            <a href="{{ route('appshell.gift_coupons.edit', $code) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                            @if($code->uses_count === 0)
                            <form method="POST" action="{{ route('appshell.gift_coupons.destroy', $code) }}" class="d-inline"
                                  onsubmit="return confirm('Delete coupon code {{ $code->code }}?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Delete</button>
                            </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center text-muted py-4">No coupon codes yet.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>

            @if($codes->hasPages())
                <div class="mt-3">{{ $codes->links() }}</div>
            @endif
        </div>
    </div>

{{-- ── Coupon HTML Generator Modal ──────────────────────────────── --}}
<div class="modal fade" id="couponModal" tabindex="-1" role="dialog" aria-labelledby="couponModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="couponModalLabel">Generate Coupon HTML</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                {{-- Color picker --}}
                <div class="mb-3 d-flex align-items-center">
                    <span class="mr-3 font-weight-bold small text-muted text-uppercase" style="letter-spacing:.05em;">Colour</span>
                    @foreach([
                        ['#2980b9', '#ebf5fb', 'Blue'],
                        ['#c0392b', '#fdedec', 'Red'],
                        ['#27ae60', '#eafaf1', 'Green'],
                        ['#8e44ad', '#f5eef8', 'Purple'],
                        ['#d35400', '#fef5e7', 'Orange'],
                        ['#2c3e50', '#f0f3f4', 'Dark'],
                    ] as [$main, $light, $label])
                    <button type="button"
                        class="js-color-swatch btn btn-sm mr-1"
                        data-main="{{ $main }}"
                        data-light="{{ $light }}"
                        title="{{ $label }}"
                        style="width:28px;height:28px;padding:0;border-radius:50%;background:{{ $main }};border:3px solid transparent;outline:none;">
                    </button>
                    @endforeach
                </div>

                {{-- Live preview --}}
                <div id="couponPreview" class="mb-4" style="background:#f8f9fa;padding:24px;border-radius:8px;"></div>

                {{-- HTML output --}}
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <small class="text-muted font-weight-bold text-uppercase" style="letter-spacing:.05em;">HTML</small>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="copyHtmlBtn">Copy</button>
                </div>
                <textarea id="couponHtml" class="form-control" rows="8"
                          style="font-family:monospace;font-size:12px;resize:vertical;"
                          readonly></textarea>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@stop

@push('footer-scripts')
<script>
(function () {
    var couponData  = {};
    var activeColor = { main: '#2980b9', light: '#ebf5fb' };

    // ── Build the coupon HTML string ─────────────────────────────
    function buildCoupon(data, color) {
        var productLine = data.sku
            ? data.name
            : (data.name ? data.name + ' &mdash; Choose Any Product' : 'Choose Any Product');

        var validLine = '';
        if (data.validFrom && data.validUntil) {
            validLine = '<div style="color:#888;font-size:12px;margin-top:6px;">Valid ' + data.validFrom + ' &ndash; ' + data.validUntil + '</div>';
        } else if (data.validUntil) {
            validLine = '<div style="color:#888;font-size:12px;margin-top:6px;">Valid until ' + data.validUntil + '</div>';
        } else if (data.validFrom) {
            validLine = '<div style="color:#888;font-size:12px;margin-top:6px;">Valid from ' + data.validFrom + '</div>';
        }

        return [
            '<div style="',
            '  font-family:Georgia,\'Times New Roman\',serif;',
            '  border:3px dashed ' + color.main + ';',
            '  border-radius:16px;',
            '  padding:36px 48px;',
            '  max-width:520px;',
            '  margin:0 auto;',
            '  background:linear-gradient(145deg,' + color.light + ' 0%,#ffffff 100%);',
            '  text-align:center;',
            '  position:relative;',
            '  box-sizing:border-box;',
            '">',

            // Notch circles
            '<div style="position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:#f8f9fa;border-radius:50%;border:3px dashed ' + color.main + ';"></div>',
            '<div style="position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:#f8f9fa;border-radius:50%;border:3px dashed ' + color.main + ';"></div>',

            // Header label
            '<div style="color:' + color.main + ';font-size:11px;letter-spacing:4px;text-transform:uppercase;font-weight:bold;font-family:Arial,sans-serif;margin-bottom:10px;">GIFT SUBSCRIPTION</div>',

            // Product name
            '<div style="font-size:17px;font-weight:bold;color:#2c3e50;font-family:Arial,sans-serif;margin-bottom:18px;">' + productLine + '</div>',

            // Divider
            '<div style="border-top:1px dashed ' + color.main + ';margin:0 0 18px;opacity:0.5;"></div>',

            // Coupon code
            '<div style="font-family:\'Courier New\',Courier,monospace;font-size:38px;font-weight:bold;color:' + color.main + ';letter-spacing:7px;background:' + color.light + ';padding:14px 28px;border-radius:8px;display:inline-block;margin-bottom:18px;border:1px solid ' + color.main + ';opacity:0.95;">' + data.code + '</div>',

            // Divider
            '<div style="border-top:1px dashed ' + color.main + ';margin:0 0 16px;opacity:0.5;"></div>',

            // Duration
            '<div style="color:#555;font-size:15px;font-family:Arial,sans-serif;">&#10003; FREE Access for <strong>' + data.duration + ' days</strong></div>',

            // Valid dates
            validLine,

            '</div>'
        ].join('\n');
    }

    // ── Render into modal ────────────────────────────────────────
    function render() {
        var html = buildCoupon(couponData, activeColor);
        document.getElementById('couponPreview').innerHTML = html;
        document.getElementById('couponHtml').value = html;
    }

    // ── Open modal on button click ───────────────────────────────
    document.querySelectorAll('.js-gen-coupon').forEach(function (btn) {
        btn.addEventListener('click', function () {
            couponData = {
                code:       this.dataset.code,
                name:       this.dataset.name,
                sku:        this.dataset.sku,
                duration:   this.dataset.duration,
                validFrom:  this.dataset.validFrom,
                validUntil: this.dataset.validUntil,
            };
            // Reset to first swatch (blue)
            setActiveSwatch(document.querySelector('.js-color-swatch'));
            render();
            $('#couponModal').modal('show');
        });
    });

    // ── Colour swatches ──────────────────────────────────────────
    function setActiveSwatch(el) {
        document.querySelectorAll('.js-color-swatch').forEach(function (s) {
            s.style.border = '3px solid transparent';
            s.style.transform = 'scale(1)';
        });
        el.style.border = '3px solid #333';
        el.style.transform = 'scale(1.2)';
        activeColor = { main: el.dataset.main, light: el.dataset.light };
    }

    document.querySelectorAll('.js-color-swatch').forEach(function (swatch) {
        swatch.addEventListener('click', function () {
            setActiveSwatch(this);
            render();
        });
    });

    // ── Copy button ──────────────────────────────────────────────
    document.getElementById('copyHtmlBtn').addEventListener('click', function () {
        var ta = document.getElementById('couponHtml');
        ta.select();
        document.execCommand('copy');
        this.textContent = 'Copied!';
        var btn = this;
        setTimeout(function () { btn.textContent = 'Copy'; }, 2000);
    });

    // ── Activate first swatch on page load ───────────────────────
    var firstSwatch = document.querySelector('.js-color-swatch');
    if (firstSwatch) setActiveSwatch(firstSwatch);
})();
</script>
@endpush