@extends('admin.layout')
@section('title', 'Boost Profile')
@section('content')

<div class="container py-4">
    <div class="row justify-content-center">
         <div class="page-titile  py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-semibold text-dark">Promotion History</h5>
            <a href="{{ route('admin.admin_promotion_history') }}" class="btn btn-sm btn-primary">
               History
            </a>
        </div>
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4" id="campaignCard">
                <div class="card-header d-flex justify-content-between align-items-center py-3">
                    <h5 class="mb-0 fw-semibold">Campaign Details 
                        <span id="specialBadge" class="badge bg-warning text-dark d-none ms-2">PRIORITY</span>
                    </h5>
                    <span class="badge bg-primary-subtle text-primary border border-primary">
                        <span id="unitCreditDisplay">1</span> Credit / <span id="unitTypeDisplay">LIKE</span>
                    </span>
                </div>

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

                    <form method="POST" action="{{ route('admin.admin_boost_profile_store') }}" id="boostForm">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Campaign Priority</label>
                            <select class="form-select" id="is_special" name="is_special">
                                <option value="0">Normal</option>
                                <option value="1">Special (Priority)</option>
                            </select>
                            <small class="text-muted">Special campaigns are processed faster.</small>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">What do you need?</label>
                            <select class="form-select" id="type" name="type" required>
                                <option value="like">Instagram Likes</option>
                                <option value="follow">Instagram Followers</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Target Instagram Username</label>
                            <input type="text" name="username" class="form-control" placeholder="e.g. janesmith" required>
                        </div>

                        <div class="mb-4" id="link_box">
                            <label class="form-label fw-semibold">Target Post/Reel URL</label>
                            <input type="url" class="form-control" name="link" id="link_input" placeholder="https://www.instagram.com/p/...">
                        </div>

                        <div class="row g-3 align-items-end mb-4">
                            <div class="col-md-7">
                                <label class="form-label fw-semibold" id="countLabel">Quantity</label>
                                <input type="number" class="form-control" name="count" id="count" min="10" value="10" required>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-semibold">Total Cost</label>
                                <div class="border rounded-3 p-2 text-center bg-light">
                                    <span class="fw-bold fs-4 text-primary" id="totalCost">10</span>
                                    <small class="text-muted d-block">CREDITS</small>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" id="submit-btn" class="btn btn-primary btn-lg">START PROMOTION</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const typeSelect = document.getElementById('type');
    const isSpecialSelect = document.getElementById('is_special');
    const linkBox = document.getElementById('link_box');
    const linkInput = document.getElementById('link_input');
    const countInput = document.getElementById('count');
    const specialBadge = document.getElementById('specialBadge');
    
    const totalCostDisplay = document.getElementById('totalCost');
    const unitCreditDisplay = document.getElementById('unitCreditDisplay');
    const unitTypeDisplay = document.getElementById('unitTypeDisplay');
    const countLabel = document.getElementById('countLabel');

    function updateUI() {
        let type = typeSelect.value;
        let qty = parseInt(countInput.value) || 0;
        let isSpecial = isSpecialSelect.value === "1";
        
        const prices = {
            'like': 1,
            'follow': 2,
        };

        let rate = prices[type] || 1;
        unitCreditDisplay.innerText = rate;
        unitTypeDisplay.innerText = type.toUpperCase();
        countLabel.innerText = `Quantity (${type.charAt(0).toUpperCase() + type.slice(1)}s)`;
        totalCostDisplay.innerText = qty * rate;
        
        if (type === 'follow') {
            linkBox.style.display = 'none';
            linkInput.required = false;
        } else {
            linkBox.style.display = 'block';
            linkInput.required = true;
        }

        if(isSpecial) {
            specialBadge.classList.remove('d-none');
        } else {
            specialBadge.classList.add('d-none');
        }
    }

    typeSelect.addEventListener('change', updateUI);
    isSpecialSelect.addEventListener('change', updateUI);
    countInput.addEventListener('input', updateUI);
    
    updateUI();
</script>


<script>
document.getElementById('boostForm').addEventListener('submit', function() {
    let btn = document.getElementById('submit-btn');
    btn.disabled = true;
    btn.innerText = 'Processing...';
});
</script>
@endsection