@extends('layouts.app')


@section('content')
<div class="page-header mb-4">
    <div class="row align-items-center">
        <div class="col">
            <p class="text-muted mb-0">Define a new software release</p>
        </div>
        <div class="col-auto">
            <a href="{{ route('release-center.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('release-center.store') }}" method="POST" id="releaseForm">
            @csrf
            <div class="row g-4">
                <div class="col-md-6">
                    <label class="form-label">Version <span class="text-danger">*</span></label>
                    <input type="text" name="version" class="form-control @error('version') is-invalid @enderror" 
                           placeholder="e.g., 2.1.0" value="{{ old('version') }}" required>
                    @error('version')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <small class="text-muted">Use semantic versioning (e.g., 2.1.0)</small>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Release Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" 
                           placeholder="e.g., Spring Update" value="{{ old('name') }}" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Channel <span class="text-danger">*</span></label>
                    <select name="channel" class="form-select @error('channel') is-invalid @enderror" required>
                        <option value="stable" {{ old('channel') === 'stable' ? 'selected' : '' }}>Stable</option>
                        <option value="beta" {{ old('channel') === 'beta' ? 'selected' : '' }}>Beta</option>
                        <option value="development" {{ old('channel') === 'development' ? 'selected' : '' }}>Development</option>
                    </select>
                    @error('channel')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control @error('description') is-invalid @enderror" 
                              rows="3" placeholder="Brief description of this release">{{ old('description') }}</textarea>
                </div>
                <div class="col-12">
                    <label class="form-label">Release Notes</label>
                    <textarea name="release_notes" class="form-control @error('release_notes') is-invalid @enderror" 
                              rows="5" placeholder="Detailed release notes (Markdown supported)">{{ old('release_notes') }}</textarea>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">Release Items</h5>
                <button type="button" class="btn btn-sm btn-outline-primary" id="addItem">
                    <i class="bi bi-plus-lg me-1"></i>Add Item
                </button>
            </div>

            <div id="itemsContainer">
                @if(old('items'))
                    @foreach(old('items') as $index => $item)
                        <div class="item-row border rounded p-3 mb-3 bg-light">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label small">Module</label>
                                    <input type="text" name="items[{{ $index }}][module_name]" class="form-control" value="{{ $item['module_name'] }}" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label small">Type</label>
                                    <select name="items[{{ $index }}][change_type]" class="form-select" required>
                                        <option value="Feature" {{ $item['change_type'] === 'Feature' ? 'selected' : '' }}>Feature</option>
                                        <option value="Enhancement" {{ $item['change_type'] === 'Enhancement' ? 'selected' : '' }}>Enhancement</option>
                                        <option value="Bug Fix" {{ $item['change_type'] === 'Bug Fix' ? 'selected' : '' }}>Bug Fix</option>
                                        <option value="Security" {{ $item['change_type'] === 'Security' ? 'selected' : '' }}>Security</option>
                                        <option value="Breaking Change" {{ $item['change_type'] === 'Breaking Change' ? 'selected' : '' }}>Breaking Change</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">Description</label>
                                    <input type="text" name="items[{{ $index }}][description]" class="form-control" value="{{ $item['description'] }}" required>
                                </div>
                                <div class="col-md-1">
                                    <label class="form-label d-block small">&nbsp;</label>
                                    <button type="button" class="btn btn-outline-danger btn-sm remove-item"><i class="bi bi-trash"></i></button>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>

            <div class="d-flex gap-2 mt-4">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-2"></i>Create Release</button>
                <a href="{{ route('release-center.index') }}" class="btn btn-outline-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<template id="itemTemplate">
    <div class="item-row border rounded p-3 mb-3 bg-light">
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label small">Module</label>
                <input type="text" name="items[INDEX][module_name]" class="form-control" required>
            </div>
            <div class="col-md-3">
                <label class="form-label small">Type</label>
                <select name="items[INDEX][change_type]" class="form-select" required>
                    <option value="Feature">Feature</option>
                    <option value="Enhancement">Enhancement</option>
                    <option value="Bug Fix">Bug Fix</option>
                    <option value="Security">Security</option>
                    <option value="Breaking Change">Breaking Change</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small">Description</label>
                <input type="text" name="items[INDEX][description]" class="form-control" required>
            </div>
            <div class="col-md-1">
                <label class="form-label d-block small">&nbsp;</label>
                <button type="button" class="btn btn-outline-danger btn-sm remove-item"><i class="bi bi-trash"></i></button>
            </div>
        </div>
    </div>
</template>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = {{ count(old('items', [])) }};
    const container = document.getElementById('itemsContainer');
    const template = document.getElementById('itemTemplate');

    document.getElementById('addItem').addEventListener('click', function() {
        const clone = template.content.cloneNode(true);
        const row = clone.querySelector('.item-row');
        row.querySelectorAll('[name*="INDEX"]').forEach(input => {
            input.name = input.name.replace('INDEX', itemIndex);
        });
        container.appendChild(row);
        itemIndex++;
    });

    container.addEventListener('click', function(e) {
        if (e.target.closest('.remove-item')) {
            e.target.closest('.item-row').remove();
        }
    });
});
</script>
@endpush