@extends('adminlte::page')
@section('title', 'Add Tolly Fest Point')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6"><h1>Add Tolly Fest Point</h1></div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Add Tolly Fest Point</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <form action="{{ route('admin.storeTollyFestPoint') }}" method="POST" id="pointForm">
            @csrf
            
            <!-- Basic Info Card -->
            <div class="card">
                <div class="card-header"><h4>Basic Information</h4></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Point Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="point_title" 
                                       value="{{ old('point_title') }}" required>
                                @error('point_title')<p class="text-danger small">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Date</label>
                                <input type="date" class="form-control" name="date" 
                                       value="{{ old('date') }}">
                                @error('date')<p class="text-danger small">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Status <span class="text-danger">*</span></label>
                                <select class="form-control" name="status" required>
                                    <option value="">-- Select --</option>
                                    <option value="1" {{ old('status')=='1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('status')=='0' ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @error('status')<p class="text-danger small">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Start Date & Time</label>
                                <input type="datetime-local" class="form-control" name="start_date_time" 
                                       value="{{ old('start_date_time') }}">
                                @error('start_date_time')<p class="text-danger small">{{ $message }}</p>@enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>End Date & Time</label>
                                <input type="datetime-local" class="form-control" name="end_date_time" 
                                       value="{{ old('end_date_time') }}">
                                @error('end_date_time')<p class="text-danger small">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Points Matrix Card -->
            <div class="card">
                <div class="card-header">
                    <h4>Points Matrix</h4>
                </div>
                <div class="card-body">
                    @if($teams->count() > 0 && $disciplines->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped points-table">
                            <thead class="bg-primary text-white">
                                <tr>
                                    <th style="min-width: 200px;">Team Name</th>
                                    @foreach($disciplines as $discipline)
                                        <th class="text-center" style="min-width: 120px;">
                                            {{ $discipline->discipline_name }}
                                        </th>
                                    @endforeach
                                    <th class="text-center bg-success" style="min-width: 120px;">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($teams as $team)
                                <tr data-team-id="{{ $team->id }}">
                                    <td class="font-weight-bold">{{ $team->notice_title }}</td>
                                    
                                    @foreach($disciplines as $discipline)
                                        <td class="p-1">
                                            <input 
                                                type="number" 
                                                step="1" 
                                                min="0"
                                                class="form-control text-center point-input" 
                                                name="points[{{ $team->id }}][{{ $discipline->id }}]"
                                                value="{{ old('points.'.$team->id.'.'.$discipline->id, 0) }}"
                                                data-team="{{ $team->id }}"
                                                placeholder="0.00"
                                            >
                                        </td>
                                    @endforeach
                                    
                                    <td class="p-1">
                                        <input 
                                            type="text" 
                                            class="form-control text-center font-weight-bold team-total" 
                                            id="total_{{ $team->id }}"
                                            value="0.00"
                                            readonly
                                            style="background-color: #28a745; color: white; border: none;"
                                        >
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                    <div class="alert alert-warning">
                        <strong>Warning!</strong> Please add Teams and Disciplines first before creating points.
                    </div>
                    @endif
                </div>
                
                <div class="card-footer">
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('admin.showTollyFestPoint') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Save
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
@stop

@section('css')
<style>
    .point-input:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
</style>
<style>
  .points-table { border-collapse: separate; border-spacing: 0; }
  .points-table th, .points-table td { white-space: nowrap; }

  /* Fix Team column */
  .points-table thead th:first-child,
  .points-table tbody td:first-child{
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fff; /* body cell bg */
  }

  /* Keep header above body */
  .points-table thead th{
    position: sticky;
    top: 0;
    z-index: 4;
  }

  /* Team header bg should remain primary */
  .points-table thead th:first-child{
    background: #007bff; /* Bootstrap primary */
    color: #fff;
    z-index: 5;
  }
</style>
@stop

@section('js')
<script>
    $(document).ready(function() {
        console.log('Points Matrix Loaded'); // Debug
        
        // Function to calculate team total
        function calculateTeamTotal(teamId) {
            let total = 0;
            
            // Find all inputs for this team and sum them
            $('input[data-team="' + teamId + '"]').each(function() {
                let value = parseFloat($(this).val());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            
            // Update the total field
            $('#total_' + teamId).val(total.toFixed(2));
            
            console.log('Team ' + teamId + ' Total: ' + total); // Debug
        }
        
        // When user types in any point input
        $('.point-input').on('input change', function() {
            let teamId = $(this).data('team');
            calculateTeamTotal(teamId);
        });
        
        // Calculate all totals on page load
        @foreach($teams as $team)
            calculateTeamTotal({{ $team->id }});
        @endforeach
        
        // Prevent Enter key from submitting form accidentally
        $('.point-input').on('keypress', function(e) {
            if (e.which === 13) {
                e.preventDefault();
                // Move to next input
                let inputs = $('.point-input');
                let nextIndex = inputs.index(this) + 1;
                if (nextIndex < inputs.length) {
                    inputs.eq(nextIndex).focus();
                }
            }
        });
    });
</script>
@stop