@extends('layouts.app')

@section('title', 'Create Commission Item - ISP ERP System')

@section('page-title', 'Create Commission Item')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-plus me-2"></i>
                                Create Commission Item
                            </h3>
                            <p class="mb-0 opacity-75">Add a new commission item for bandwidth services</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('commission-items.bulk.create') }}" class="btn btn-success btn-custom">
                                <i class="fas fa-table me-2"></i>Bulk Create
                            </a>
                            <a href="{{ route('commission-items.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to List
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Form -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('commission-items.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="sub_tag_id" class="form-label font-weight-bold">
                                    <i class="fas fa-tag me-1"></i>Sub Tag
                                </label>
                                <select class="form-control @error('sub_tag_id') is-invalid @enderror" 
                                        id="sub_tag_id" name="sub_tag_id" required>
                                    <option value="">Select Sub Tag</option>
                                    @foreach($subTags as $subTag)
                                        <option value="{{ $subTag->id }}" 
                                                data-sub-tag-name="{{ strtoupper(preg_replace('/[^A-Za-z0-9]/', '', $subTag->name)) }}" 
                                                {{ old('sub_tag_id') == $subTag->id ? 'selected' : '' }}>
                                            {{ $subTag->name }} ({{ $subTag->tag->name ?? 'N/A' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('sub_tag_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="bandwidth_item_id" class="form-label font-weight-bold">
                                    <i class="fas fa-network-wired me-1"></i>Bandwidth Item
                                </label>
                                <select class="form-control @error('bandwidth_item_id') is-invalid @enderror" 
                                        id="bandwidth_item_id" name="bandwidth_item_id" required>
                                    <option value="">Select Bandwidth Item</option>
                                    @foreach($bandwidthItems as $bandwidthItem)
                                        <option value="{{ $bandwidthItem->id }}" 
                                                data-item-name="{{ strtoupper(preg_replace('/[^A-Za-z0-9]/', '', $bandwidthItem->name)) }}" 
                                                {{ old('bandwidth_item_id') == $bandwidthItem->id ? 'selected' : '' }}>
                                            {{ $bandwidthItem->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('bandwidth_item_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="item_code" class="form-label font-weight-bold">
                                    <i class="fas fa-barcode me-1"></i>Item Code
                                </label>
                                <input type="text" 
                                       class="form-control @error('item_code') is-invalid @enderror" 
                                       id="item_code" name="item_code" 
                                       value="{{ old('item_code') }}" 
                                       placeholder="Optional unique code" 
                                       maxlength="50">
                                @error('item_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Auto-generated based on Sub Tag and Bandwidth Item</small>
                                <button type="button" class="btn btn-sm btn-secondary mt-1" id="generateItemCodeBtn">
                                    <i class="fas fa-sync me-1"></i>Generate Code
                                </button>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="status" class="form-label font-weight-bold">
                                    <i class="fas fa-toggle-on me-1"></i>Status
                                </label>
                                <select class="form-control @error('status') is-invalid @enderror" 
                                        id="status" name="status" required>
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="description" class="form-label font-weight-bold">
                                    <i class="fas fa-align-left me-1"></i>Description
                                </label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" name="description" 
                                          rows="4" 
                                          placeholder="Enter description...">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('commission-items.index') }}" class="btn btn-secondary">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>Create Commission Item
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const subTagSelect = document.getElementById('sub_tag_id');
    const bandwidthItemSelect = document.getElementById('bandwidth_item_id');
    const itemCodeInput = document.getElementById('item_code');
    const generateBtn = document.getElementById('generateItemCodeBtn');
    
    function generateItemCode() {
        const subTagOption = subTagSelect.options[subTagSelect.selectedIndex];
        const bandwidthItemOption = bandwidthItemSelect.options[bandwidthItemSelect.selectedIndex];
        
        if (subTagOption.value && bandwidthItemOption.value) {
            const subTagCode = subTagOption.getAttribute('data-sub-tag-name') || 'SUB';
            const itemCode = bandwidthItemOption.getAttribute('data-item-name') || 'ITEM';
            
            // Generate code: SUBTAG-ITEM (e.g., MOFIZ-GGC)
            const generatedCode = subTagCode + '-' + itemCode;
            
            // Limit to 50 characters
            const finalCode = generatedCode.substring(0, 50);
            itemCodeInput.value = finalCode;
        } else {
            itemCodeInput.value = '';
        }
    }
    
    // Auto-generate when both selects change
    subTagSelect.addEventListener('change', generateItemCode);
    bandwidthItemSelect.addEventListener('change', generateItemCode);
    
    // Manual generate button
    generateBtn.addEventListener('click', generateItemCode);
    
    // Generate on page load if values are preselected
    if (subTagSelect.value && bandwidthItemSelect.value) {
        generateItemCode();
    }
});
</script>
@endsection