@extends('layouts.app')

@section('title', 'Add Bandwidth Item Prices')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-plus-circle mr-2"></i>Add Bandwidth Item Prices (Multiple)
                </h1>
                <a href="{{ route('reseller.bandwidth-item-cost-prices.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>Back to List
                </a>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <strong>Please correct the following errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    @endif

    <!-- Bulk Create Form -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-list mr-2"></i>Add Prices for Multiple Bandwidth Items
                    </h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('reseller.bandwidth-item-cost-prices.store') }}" method="POST" id="bulkPriceForm">
                        @csrf
                        
                        <!-- Common Fields -->
                        <div class="row mb-4 bg-light p-3 rounded">
                            <div class="col-md-4">
                                <div class="form-group mb-0">
                                    <label for="effective_date">Effective Month <span class="text-danger">*</span></label>
                                    <input type="month" 
                                           name="effective_date" 
                                           id="effective_date" 
                                           class="form-control" 
                                           value="{{ old('effective_date', date('Y-m')) }}"
                                           required>
                                    <small class="form-text text-muted">This month will apply to all items</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-0">
                                    <label for="common_status">Status <span class="text-danger">*</span></label>
                                    <select name="common_status" id="common_status" class="form-control" required>
                                        <option value="active" {{ old('common_status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('common_status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    <small class="form-text text-muted">This status will apply to all items</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-0">
                                    <label for="common_description">Description (Optional)</label>
                                    <input type="text" 
                                           name="common_description" 
                                           id="common_description" 
                                           class="form-control" 
                                           value="{{ old('common_description') }}"
                                           placeholder="Common description for all items">
                                    <small class="form-text text-muted">This will apply to all items</small>
                                </div>
                            </div>
                        </div>

                        <!-- Table for Multiple Items -->
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover" id="pricesTable">
                                <thead class="thead-dark">
                                    <tr>
                                        <th width="5%" class="text-center">
                                            <input type="checkbox" id="selectAll" title="Select/Deselect All">
                                        </th>
                                        <th width="5%">#</th>
                                        <th width="25%">Item Name</th>
                                        <th width="20%">Cost Rate (৳)</th>
                                        <th width="20%">Gross Cost (%)</th>
                                        <th width="25%">Description (Optional)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($bandwidthItems as $index => $item)
                                        <tr id="row-{{ $item->id }}">
                                            <td class="text-center">
                                                <input type="checkbox" 
                                                       name="items[{{ $item->id }}][enabled]" 
                                                       value="1" 
                                                       class="item-checkbox"
                                                       onchange="toggleRow({{ $item->id }})">
                                            </td>
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                <strong>{{ $item->name }}</strong>
                                                <input type="hidden" name="items[{{ $item->id }}][bandwidth_item_id]" value="{{ $item->id }}">
                                            </td>
                                            <td>
                                                <input type="number" 
                                                       name="items[{{ $item->id }}][cost_rate]" 
                                                       class="form-control" 
                                                       step="0.01" 
                                                       min="0"
                                                       value="{{ old('items.'.$item->id.'.cost_rate', $lastMonthValues[$item->id]['cost_rate'] ?? '') }}"
                                                       placeholder="0.00"
                                                       title="Last month: {{ $lastMonthValues[$item->id]['cost_rate'] ?? 'N/A' }}"
                                                       disabled>
                                                @if(isset($lastMonthValues[$item->id]['cost_rate']) && $lastMonthValues[$item->id]['cost_rate'] != '')
                                                    <small class="text-muted">
                                                        <i class="fas fa-history mr-1"></i>Last: ৳{{ number_format($lastMonthValues[$item->id]['cost_rate'], 2) }}
                                                    </small>
                                                @endif
                                            </td>
                                            <td>
                                                <input type="number" 
                                                       name="items[{{ $item->id }}][gross_cost]" 
                                                       class="form-control" 
                                                       step="0.01" 
                                                       min="0"
                                                       max="100"
                                                       value="{{ old('items.'.$item->id.'.gross_cost', $lastMonthValues[$item->id]['gross_cost'] ?? '') }}"
                                                       placeholder="0.00 %"
                                                       title="Enter percentage (e.g., 10 for 10%)"
                                                       disabled>
                                                @if(isset($lastMonthValues[$item->id]['gross_cost']) && $lastMonthValues[$item->id]['gross_cost'] != '')
                                                    <small class="text-muted">
                                                        <i class="fas fa-history mr-1"></i>Last: {{ number_format($lastMonthValues[$item->id]['gross_cost'], 2) }}%
                                                    </small>
                                                @endif
                                            </td>
                                            <td>
                                                <input type="text" 
                                                       name="items[{{ $item->id }}][description]" 
                                                       class="form-control form-control-sm" 
                                                       value="{{ old('items.'.$item->id.'.description', '') }}"
                                                       placeholder="Item specific note"
                                                       disabled>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="form-group mb-0 mt-4">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save mr-2"></i>Save Selected Prices
                            </button>
                            <a href="{{ route('reseller.bandwidth-item-cost-prices.index') }}" class="btn btn-secondary btn-lg">
                                <i class="fas fa-times mr-2"></i>Cancel
                            </a>
                            <span class="ml-3 text-muted">
                                <i class="fas fa-info-circle mr-1"></i>
                                <span id="selectedCount">0</span> item(s) selected
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Select/Deselect All
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.item-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
        const itemId = checkbox.name.match(/\d+/)[0];
        toggleRow(itemId);
    });
    updateSelectedCount();
});

// Toggle row enable/disable
function toggleRow(itemId) {
    const row = document.getElementById('row-' + itemId);
    const checkbox = row.querySelector('.item-checkbox');
    const inputs = row.querySelectorAll('input[type="number"], input[type="text"]');
    
    inputs.forEach(input => {
        input.disabled = !checkbox.checked;
        if (checkbox.checked) {
            input.classList.add('bg-white');
            input.classList.remove('bg-light');
        } else {
            input.classList.remove('bg-white');
            input.classList.add('bg-light');
        }
    });
    
    updateSelectedCount();
}

// Update selected count
function updateSelectedCount() {
    const count = document.querySelectorAll('.item-checkbox:checked').length;
    document.getElementById('selectedCount').textContent = count;
}

// Form validation
document.getElementById('bulkPriceForm').addEventListener('submit', function(e) {
    const selectedCount = document.querySelectorAll('.item-checkbox:checked').length;
    
    if (selectedCount === 0) {
        e.preventDefault();
        alert('Please select at least one item to add prices for.');
        return false;
    }
    
    // Validate that checked items have cost_rate
    let isValid = true;
    document.querySelectorAll('.item-checkbox:checked').forEach(checkbox => {
        const itemId = checkbox.name.match(/\d+/)[0];
        const row = document.getElementById('row-' + itemId);
        const costRate = row.querySelector('input[name*="cost_rate"]');
        
        if (!costRate.value || costRate.value <= 0) {
            isValid = false;
            costRate.classList.add('is-invalid');
        }
    });
    
    if (!isValid) {
        e.preventDefault();
        alert('Please enter valid Cost Rate for all selected items.');
        return false;
    }
});

// Remove invalid class on input
document.querySelectorAll('input[name*="cost_rate"]').forEach(input => {
    input.addEventListener('input', function() {
        this.classList.remove('is-invalid');
    });
});
</script>

<style>
.table input[type="number"]:disabled,
.table input[type="text"]:disabled {
    cursor: not-allowed;
    background-color: #f8f9fa !important;
}

.table input[type="number"]:not(:disabled),
.table input[type="text"]:not(:disabled) {
    background-color: #ffffff !important;
}

#selectAll {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.item-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
}
</style>
@endsection