@extends('layouts.app')

@section('title', 'Edit Full Week Schedule')
@section('page-title', 'Edit Full Week Schedule - ' . $targetUser->name)

@section('styles')
<style>
    .day-card {
        margin-bottom: 20px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
    }
    .day-header {
        background: #1e3c72;
        color: white;
        padding: 10px 15px;
        font-weight: bold;
    }
    .day-header.sunday { background: #dc3545; }
    .day-header.monday { background: #0d6efd; }
    .day-header.tuesday { background: #198754; }
    .day-header.wednesday { background: #fd7e14; }
    .day-header.thursday { background: #6f42c1; }
    
    .day-body {
        padding: 15px;
        background: #f8f9fa;
    }
    .client-row {
        background: white;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #dee2e6;
    }
</style>
@endsection

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white">
        <h6 class="mb-0">
            <i class="fas fa-calendar-week me-2"></i>
            Editing Full Week Schedule for {{ $targetUser->name }}
            <span class="badge bg-warning ms-2">Week {{ $weekNumber }}, {{ $year }}</span>
        </h6>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('leader.weekly-schedule.store-full-week') }}">
            @csrf
            <input type="hidden" name="user_id" value="{{ $targetUser->id }}">
            <input type="hidden" name="week_number" value="{{ $weekNumber }}">
            <input type="hidden" name="year" value="{{ $year }}">
            
            @foreach($days as $index => $day)
            @php
                $dayData = $weekData[$day];
                $clients = $dayData['clients'];
                $notes = $dayData['notes'];
            @endphp
            <div class="day-card">
                <div class="day-header {{ $day }}">
                    <i class="fas fa-calendar-day me-2"></i>
                    {{ ucfirst($day) }}
                    @if($dayData['status'] == 'submitted')
                        <span class="badge bg-warning ms-2">Submitted</span>
                    @elseif($dayData['status'] == 'approved')
                        <span class="badge bg-success ms-2">Approved</span>
                    @endif
                </div>
                <div class="day-body">
                    <input type="hidden" name="schedules[{{ $index }}][day]" value="{{ $day }}">
                    
                    <div class="mb-3">
                        <label class="fw-bold">Client Visits</label>
                        <div class="clients-container" data-day="{{ $day }}" data-index="{{ $index }}">
                            @if(count($clients) > 0)
                                @foreach($clients as $clientIdx => $client)
                                    <div class="client-row row">
                                        <div class="col-md-1">
                                            <strong>{{ $clientIdx + 1 }}.</strong>
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" 
                                                   name="schedules[{{ $index }}][clients][{{ $clientIdx }}][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="schedules[{{ $index }}][clients][{{ $clientIdx }}][address]" 
                                                   class="form-control form-control-sm" 
                                                   placeholder="Address"
                                                   value="{{ $client['address'] ?? '' }}">
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" 
                                                   name="schedules[{{ $index }}][clients][{{ $clientIdx }}][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 add-client" data-day="{{ $day }}" data-index="{{ $index }}">
                            <i class="fas fa-plus"></i> Add Client
                        </button>
                    </div>
                    
                    <div class="mb-3">
                        <label class="fw-bold">Notes / Remarks</label>
                        <textarea name="schedules[{{ $index }}][notes]" class="form-control" rows="2">{{ $notes }}</textarea>
                    </div>
                </div>
            </div>
            @endforeach
            
            <div class="mt-4">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-save"></i> Save Full Week Schedule
                </button>
                <a href="{{ route('leader.weekly-schedule.index', ['week' => $weekNumber, 'year' => $year]) }}" class="btn btn-secondary btn-lg">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Store client counts per day
    let clientCounts = {};
    
    @foreach($days as $index => $day)
        clientCounts['{{ $day }}'] = {{ count($weekData[$day]['clients']) }};
    @endforeach
    
    // Add client functionality
    document.querySelectorAll('.add-client').forEach(button => {
        button.addEventListener('click', function() {
            const day = this.getAttribute('data-day');
            const dayIndex = this.getAttribute('data-index');
            const container = document.querySelector(`.clients-container[data-day="${day}"]`);
            
            if (!container) return;
            
            let currentCount = clientCounts[day] || 0;
            const newRow = document.createElement('div');
            newRow.className = 'client-row row';
            newRow.innerHTML = `
                <div class="col-md-1">
                    <strong>${currentCount + 1}.</strong>
                </div>
                <div class="col-md-4">
                    <input type="text" name="schedules[${dayIndex}][clients][${currentCount}][company_name]" 
                           class="form-control form-control-sm" placeholder="Client Name">
                </div>
                <div class="col-md-3">
                    <input type="text" name="schedules[${dayIndex}][clients][${currentCount}][address]" 
                           class="form-control form-control-sm" placeholder="Address">
                </div>
                <div class="col-md-3">
                    <input type="text" name="schedules[${dayIndex}][clients][${currentCount}][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);
            clientCounts[day]++;
            
            // Add remove event
            newRow.querySelector('.remove-client').addEventListener('click', function() {
                newRow.remove();
                renumberClients(container);
                clientCounts[day]--;
            });
        });
    });
    
    // Remove client functionality
    function renumberClients(container) {
        const rows = container.querySelectorAll('.client-row');
        rows.forEach((row, idx) => {
            row.querySelector('.col-md-1 strong').innerText = idx + 1 + '.';
            
            // Update name attributes to maintain correct indexing
            const dayIndex = container.getAttribute('data-index');
            const inputs = row.querySelectorAll('input');
            inputs.forEach((input, inputIdx) => {
                const name = input.getAttribute('name');
                if (name) {
                    const newName = name.replace(/clients\[\d+\]/, `clients[${idx}]`);
                    input.setAttribute('name', newName);
                }
            });
        });
    }
    
    // Initialize remove buttons
    document.querySelectorAll('.remove-client').forEach(btn => {
        btn.addEventListener('click', function() {
            const row = this.closest('.client-row');
            const container = row.closest('.clients-container');
            row.remove();
            renumberClients(container);
            const day = container.getAttribute('data-day');
            clientCounts[day]--;
        });
    });
</script>
@endpush
@endsection