@extends('layouts.app')

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

@section('page-title', 'Bulk Create Commission Items')

@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>
                                Bulk Create Commission Items
                            </h3>
                            <p class="mb-0 opacity-75">Add multiple commission items with prices for all sub-tags</p>
                        </div>
                        <div class="d-flex gap-2">
                            <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>

    <!-- Bulk 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

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <form action="{{ route('commission-items.store-bulk') }}" method="POST" id="bulkCreateForm">
                        @csrf
                        
                        <!-- Date Field -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label for="effective_month" class="form-label font-weight-bold">
                                    <i class="fas fa-calendar me-1"></i>Effective Month
                                </label>
                                <input type="date" 
                                       class="form-control @error('effective_month') is-invalid @enderror" 
                                       id="effective_month" 
                                       name="effective_month" 
                                       value="{{ old('effective_month', date('Y-m-01')) }}" 
                                       required>
                                @error('effective_month')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">Select the effective month for pricing</small>
                            </div>
                        </div>

                        <!-- Bulk Items Table -->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="bulkItemsTable">
                                <thead class="table-primary">
                                    <tr>
                                        <th class="text-center" style="vertical-align: middle;">Item Name</th>
                                        @foreach($subTags as $subTag)
                                            @php
                                                // Check if any bandwidth item has existing data for this sub tag
                                                $hasAnyData = false;
                                                foreach($bandwidthItems as $bwItem) {
                                                    $priceKey = $bwItem->id . '_' . $subTag->id;
                                                    if (isset($existingPrices[$priceKey])) {
                                                        $hasAnyData = true;
                                                        break;
                                                    }
                                                }
                                            @endphp
                                            <th class="text-center" style="vertical-align: middle;">
                                                <input class="form-check-input sub-tag-checkbox" 
                                                       type="checkbox" 
                                                       id="sub_tag_checkbox_{{ $subTag->id }}" 
                                                       data-sub-tag-id="{{ $subTag->id }}"
                                                       {{ $hasAnyData ? 'checked' : '' }}
                                                       style="display: inline-block; margin-right: 5px; vertical-align: middle;">
                                                <span style="vertical-align: middle;">{{ $subTag->name }}</span>
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($bandwidthItems as $bandwidthItem)
                                        <tr>
                                            <td>
                                                <strong>{{ $bandwidthItem->name }}</strong>
                                                <input type="hidden" name="items[{{ $loop->index }}][bandwidth_item_id]" value="{{ $bandwidthItem->id }}">
                                            </td>
                                            @foreach($subTags as $subTag)
                                                @php
                                                    $priceKey = $bandwidthItem->id . '_' . $subTag->id;
                                                    $existingPrice = $existingPrices[$priceKey] ?? null;
                                                    $lastPrice = $existingPrice ? number_format($existingPrice->price, 2, '.', '') : '';
                                                    $hasExistingData = $existingPrice !== null;
                                                @endphp
                                                <td class="sub-tag-column {{ $hasExistingData ? '' : 'disabled' }}" data-sub-tag-id="{{ $subTag->id }}">
                                                    <input type="number" 
                                                           class="form-control form-control-sm price-input" 
                                                           name="items[{{ $loop->parent->index }}][prices][{{ $subTag->id }}][price]" 
                                                           value="{{ $lastPrice }}"
                                                           step="0.01" 
                                                           min="0" 
                                                           placeholder="0.00"
                                                           data-sub-tag="{{ $subTag->id }}"
                                                           data-item-index="{{ $loop->parent->index }}"
                                                           {{ $hasExistingData ? '' : 'disabled' }}>
                                                    <input type="hidden" name="items[{{ $loop->parent->index }}][prices][{{ $subTag->id }}][sub_tag_id]" value="{{ $subTag->id }}">
                                                    @if($existingPrice)
                                                        <small class="text-muted d-block" style="font-size: 0.7rem;">
                                                            Last: {{ $existingPrice->effective_month ? \Carbon\Carbon::parse($existingPrice->effective_month)->format('M Y') : 'N/A' }}
                                                        </small>
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <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 Items
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
#bulkItemsTable {
    font-size: 0.9rem;
}

#bulkItemsTable th {
    white-space: nowrap;
    min-width: 120px;
}

/* Fixed Item Name column */
#bulkItemsTable th:first-child,
#bulkItemsTable td:first-child {
    position: sticky;
    left: 0;
    background-color: #0d6efd;
    color: white;
    z-index: 10;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

#bulkItemsTable td:first-child {
    background-color: white;
    color: #212529;
    z-index: 9;
}

#bulkItemsTable .price-input {
    width: 100px;
}

#bulkItemsTable td {
    vertical-align: middle;
    background-color: white;
}

#bulkItemsTable .sub-tag-column.disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: #f5f5f5;
}

#bulkItemsTable .sub-tag-column.disabled .price-input {
    background-color: #e9ecef;
    cursor: not-allowed;
}

#bulkItemsTable .form-check {
    margin-bottom: 0;
}

#bulkItemsTable .form-check-input {
    cursor: pointer;
}

/* Ensure table container allows horizontal scroll */
.table-responsive {
    overflow-x: auto;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize columns based on checkbox state
    document.querySelectorAll('.sub-tag-checkbox').forEach(function(checkbox) {
        const subTagId = checkbox.getAttribute('data-sub-tag-id');
        const columns = document.querySelectorAll(`.sub-tag-column[data-sub-tag-id="${subTagId}"]`);
        
        if (!checkbox.checked) {
            // Disable unchecked columns
            columns.forEach(function(col) {
                if (!col.querySelector('.price-input').value) {
                    col.classList.add('disabled');
                    const input = col.querySelector('.price-input');
                    if (input) {
                        input.disabled = true;
                    }
                }
            });
        }
    });
    
    // Handle checkbox toggle for sub-tag columns
    document.querySelectorAll('.sub-tag-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const subTagId = this.getAttribute('data-sub-tag-id');
            const columns = document.querySelectorAll(`.sub-tag-column[data-sub-tag-id="${subTagId}"]`);
            
            if (this.checked) {
                // Enable column
                columns.forEach(function(col) {
                    col.classList.remove('disabled');
                    const input = col.querySelector('.price-input');
                    if (input) {
                        input.disabled = false;
                    }
                });
            } else {
                // Disable column
                columns.forEach(function(col) {
                    col.classList.add('disabled');
                    const input = col.querySelector('.price-input');
                    if (input) {
                        input.disabled = true;
                        input.value = ''; // Clear value when disabled
                    }
                });
            }
        });
    });
    
    // Add copy functionality - copy price from first enabled sub-tag to others
    document.querySelectorAll('tbody tr').forEach(function(row) {
        const priceInputs = row.querySelectorAll('.price-input:not([disabled])');
        if (priceInputs.length > 0) {
            const firstPriceInput = priceInputs[0];
            firstPriceInput.addEventListener('blur', function() {
                const price = this.value;
                if (price && confirm('Copy this price to all other enabled sub-tags for this item?')) {
                    row.querySelectorAll('.price-input:not([disabled])').forEach(function(input) {
                        if (input !== firstPriceInput) {
                            input.value = price;
                        }
                    });
                }
            });
        }
    });
    
    // On form submit, only include checked sub-tags
    document.getElementById('bulkCreateForm').addEventListener('submit', function(e) {
        document.querySelectorAll('.sub-tag-checkbox').forEach(function(checkbox) {
            if (!checkbox.checked) {
                const subTagId = checkbox.getAttribute('data-sub-tag-id');
                // Remove inputs for unchecked sub-tags
                document.querySelectorAll(`input[name*="[prices][${subTagId}]"]`).forEach(function(input) {
                    input.remove();
                });
            }
        });
    });
});
</script>
@endsection