@extends('layouts.app')

@section('title', 'Edit Schedule - ' . ucfirst($dayOfWeek))
@section('page-title', 'Edit Schedule for ' . ucfirst($dayOfWeek) . 
    (isset($isEditingMember) && $isEditingMember ? ' - ' . $targetUser->name : ''))

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white">
        <h6 class="mb-0">
            <i class="fas fa-calendar-day me-2"></i>
            {{ ucfirst($dayOfWeek) }} - Week {{ $weekNumber }}, {{ $year }}
            @if(isset($isEditingMember) && $isEditingMember)
                <span class="badge bg-warning ms-2">Editing: {{ $targetUser->name }}</span>
            @endif
        </h6>
    </div>
    <div class="card-body">
        @if(isset($isEditingMember) && $isEditingMember)
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> You are editing schedule for <strong>{{ $targetUser->name }}</strong>
            </div>
        @endif
        
        <form method="POST" action="{{ route(Auth::user()->isTeamLeader() ? 'leader.weekly-schedule.store' : 'member.weekly-schedule.store') }}">
            @csrf
            <input type="hidden" name="day_of_week" value="{{ $dayOfWeek }}">
            <input type="hidden" name="week_number" value="{{ $weekNumber }}">
            <input type="hidden" name="year" value="{{ $year }}">
            @if(isset($targetUser) && $targetUser->id != Auth::id())
                <input type="hidden" name="user_id" value="{{ $targetUser->id }}">
            @endif
            
            <!-- Rest of the form remains the same -->
            <div class="mb-3">
                <label class="form-label fw-bold">Client Visits</label>
                <div id="clients-container">
                    @if(count($clients) > 0)
                        @foreach($clients as $index => $client)
                            <div class="client-row row">
                                <div class="col-md-1">
                                    <strong>{{ $index + 1 }}.</strong>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" name="clients[{{ $index }}][company_name]" 
                                           class="form-control form-control-sm" 
                                           placeholder="Client Name"
                                           value="{{ $client['company_name'] ?? $client['name'] ?? '' }}">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" name="clients[{{ $index }}][address]" 
                                           class="form-control form-control-sm" 
                                           placeholder="Address"
                                           value="{{ $client['address'] ?? '' }}">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" name="clients[{{ $index }}][contact]" 
                                           class="form-control form-control-sm" 
                                           placeholder="Contact/Department"
                                           value="{{ $client['contact'] ?? $client['department'] ?? '' }}">
                                </div>
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-sm btn-danger remove-client">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <button type="button" class="btn btn-sm btn-success mt-2" id="add-client">
                    <i class="fas fa-plus"></i> Add Client
                </button>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Notes / Remarks</label>
                <textarea name="notes" class="form-control" rows="3">{{ $notes ?? '' }}</textarea>
                <small class="text-muted">Add any special notes or instructions for this day</small>
            </div>
            
            <div class="mt-3">
                <button type="submit" class="btn btn-primary">Save Schedule</button>
                <a href="{{ route(Auth::user()->isTeamLeader() ? 'leader.weekly-schedule.index' : 'member.weekly-schedule.index', ['week' => $weekNumber, 'year' => $year]) }}" 
                   class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Client management JavaScript remains the same
    let clientCount = {{ count($clients) }};
    
    document.getElementById('add-client').addEventListener('click', function() {
        const container = document.getElementById('clients-container');
        const newRow = document.createElement('div');
        newRow.className = 'client-row row';
        newRow.innerHTML = `
            <div class="col-md-1">
                <strong>${clientCount + 1}.</strong>
            </div>
            <div class="col-md-4">
                <input type="text" name="clients[${clientCount}][company_name]" class="form-control form-control-sm" placeholder="Client Name">
            </div>
            <div class="col-md-3">
                <input type="text" name="clients[${clientCount}][address]" class="form-control form-control-sm" placeholder="Address">
            </div>
            <div class="col-md-3">
                <input type="text" name="clients[${clientCount}][contact]" class="form-control form-control-sm" placeholder="Contact/Department">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-sm btn-danger remove-client"><i class="fas fa-trash"></i></button>
            </div>
        `;
        container.appendChild(newRow);
        clientCount++;
        
        newRow.querySelector('.remove-client').addEventListener('click', function() {
            newRow.remove();
            renumberClients();
        });
    });
    
    function renumberClients() {
        const rows = document.querySelectorAll('.client-row');
        rows.forEach((row, idx) => {
            row.querySelector('.col-md-1 strong').innerText = idx + 1 + '.';
        });
        clientCount = rows.length;
    }
    
    document.querySelectorAll('.remove-client').forEach(btn => {
        btn.addEventListener('click', function() {
            this.closest('.client-row').remove();
            renumberClients();
        });
    });
</script>
@endpush
@endsection