@extends('admin.layouts.app')
@section('title','Why Us Points')
@section('page-title','Why MUVR Labs — Bullet Points')
@section('content')
<form method="POST" action="{{ route('admin.why-us.save') }}">
    @csrf
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card-admin p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="fw-700" style="font-size:.88rem">Why Us Points</div>
                    <button type="button" class="btn btn-sm" style="background:#eff6ff;color:#1d4ed8;border:none" onclick="addPoint()"><i class="bi bi-plus me-1"></i>Add Point</button>
                </div>
                <div id="points-container">
                    @foreach($points as $i => $point)
                    <div class="point-row p-3 mb-2 rounded" style="background:#f8fafc;border:1px solid #e2e8f0">
                        <input type="hidden" name="points[{{ $i }}][id]" value="{{ $point->id }}">
                        <div class="mb-2">
                            <label class="form-label">Heading</label>
                            <input type="text" name="points[{{ $i }}][heading]" class="form-control form-control-sm" value="{{ $point->heading }}">
                        </div>
                        <div class="d-flex gap-2 align-items-end">
                            <div class="flex-grow-1">
                                <label class="form-label">Description</label>
                                <input type="text" name="points[{{ $i }}][description]" class="form-control form-control-sm" value="{{ $point->description }}">
                            </div>
                            <button type="button" class="btn btn-sm mb-0" style="background:#fee2e2;color:#991b1b;border:none;height:32px" onclick="this.closest('.point-row').remove()"><i class="bi bi-x"></i></button>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card-admin p-4">
                <button type="submit" class="btn btn-admin w-100">Save Points</button>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
let ptCount = {{ $points->count() }};
function addPoint() {
    const i = ptCount++;
    const div = document.createElement('div');
    div.className = 'point-row p-3 mb-2 rounded';
    div.style = 'background:#f8fafc;border:1px solid #e2e8f0';
    div.innerHTML = `<div class="mb-2"><label class="form-label">Heading</label><input type="text" name="points[${i}][heading]" class="form-control form-control-sm" placeholder="Heading"></div>
    <div class="d-flex gap-2 align-items-end"><div class="flex-grow-1"><label class="form-label">Description</label><input type="text" name="points[${i}][description]" class="form-control form-control-sm" placeholder="Description"></div>
    <button type="button" class="btn btn-sm mb-0" style="background:#fee2e2;color:#991b1b;border:none;height:32px" onclick="this.closest('.point-row').remove()"><i class="bi bi-x"></i></button></div>`;
    document.getElementById('points-container').appendChild(div);
}
</script>
@endpush
@endsection