@extends('layouts.app')
@section('title', 'Edit Workout Entry')

@section('content')
<!-- Copy existing styles or link to CSS -->
<style>
    .workout-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .workout-header h1 {
        font-size: 2rem;
        color: #1e293b;
        font-weight: bold;
    }

    .form-section {
        display: flex;
        justify-content: center;
    }

    .form-card {
        background-color: #fff;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        width: 100%;
        margin: 0 20px;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        font-weight: 600;
        display: block;
        margin-bottom: 0.5rem;
        color: #374151;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 1rem;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1rem;
    }

    table th, table td {
        border: 1px solid #e5e7eb;
        padding: 0.5rem;
    }

    .add-row-btn {
        background-color: #10b981;
        color: white;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 6px;
        margin-top: 0.75rem;
        cursor: pointer;
    }

    .form-actions {
        text-align: right;
        margin-top: 2rem;
    }

    .form-actions button {
        background-color: #2563eb;
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
    }

    .form-actions button:hover {
        background-color: #1d4ed8;
    }
</style>

<div class="workout-header">
    <h1>Edit Workout Entry</h1>
</div>

<section class="form-section">
    <div class="form-card">
        <form action="{{ route('workout.update', $workout[0]->id) }}" method="POST">
            @csrf
            @method('PUT')

            <!-- Member & Dates -->
            <div class="form-group">
                <label for="member_id">Member</label>
                <select name="member_id" id="member_id" required>
                    <option value="">-- Select Member --</option>
                    @foreach($members as $member)
                        <option value="{{ $member->contact_id }}"
                            {{ $workout[0]->member_id == $member->contact_id ? 'selected' : '' }}>
                            {{ $member->contact_id }} - {{ $member->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
                <div class="form-group">
                    <label for="workout_date_from">Workout Date From</label>
                    <input type="date" name="workout_date_from" id="workout_date_from"
                           value="{{ $workout[0]->workout_date_from }}" required>
                </div>
                <div class="form-group">
                    <label for="workout_date_to">Workout Date To</label>
                    <input type="date" name="workout_date_to" id="workout_date_to"
                           value="{{ $workout[0]->workout_date_to }}">
                </div>
            </div>

            <!-- Table Layout -->
            <table id="workout-table">
                <thead>
                    <tr>
                        <th>Day</th>
                        <th>Workout</th>
                        <th>Category</th>
                        <th>Sets</th>
                        <th>Reps</th>
                        <th>Kg</th>
                        <th>Rest</th>
                        <th>Remarks</th>
                        <th>Remove</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($workout as $detail)
                        <tr>
                            <td>
                        <select name="day[]" required>
                            @foreach(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'] as $day)
                                <option value="{{ $day }}" {{ $detail->day == $day ? 'selected' : '' }}>{{ $day }}</option>
                            @endforeach
                        </select>
                    </td>

                            <td>
                                <select name="workout[]" required>
                                    <option value="">Workout</option>
                                    @foreach(['Chest','Back','Legs','Arms','Shoulders'] as $w)
                                        <option {{ $detail->workout === $w ? 'selected' : '' }}>{{ $w }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <select name="category[]" required>
                                    <option value="">Category</option>
                                    @foreach(['Strength','Cardio','Flexibility'] as $cat)
                                        <option {{ $detail->category === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td><input type="text" name="sets[]" value="{{ $detail->sets }}"></td>
                            <td><input type="text" name="reps[]" value="{{ $detail->reps }}"></td>
                            <td><input type="text" name="kg[]" value="{{ $detail->kg }}"></td>
                            <td><input type="text" name="rest_time[]" value="{{ $detail->rest_time }}"></td>
                            <td><input type="text" name="remarks[]" value="{{ $detail->remarks }}"></td>
                            <td><button type="button" onclick="removeRow(this)">❌</button></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <button type="button" class="add-row-btn" onclick="addRow()">+ Add Row</button>

            <div class="form-actions">
                <button type="submit">Update Workout</button>
            </div>
        </form>
    </div>
</section>

<script>
    function addRow() {
        const row = `
        <tr>
            <td>
                <select name="day[]" required>
                    <option value="">Day</option>
                    <option>Monday</option>
                    <option>Tuesday</option>
                    <option>Wednesday</option>
                    <option>Thursday</option>
                    <option>Friday</option>
                    <option>Saturday</option>
                    <option>Sunday</option>
                </select>
            </td>
            <td>
                <select name="workout[]" required>
                    <option value="">Workout</option>
                    <option>Chest</option>
                    <option>Back</option>
                    <option>Legs</option>
                    <option>Arms</option>
                    <option>Shoulders</option>
                </select>
            </td>
            <td>
                <select name="category[]" required>
                    <option value="">Category</option>
                    <option>Strength</option>
                    <option>Cardio</option>
                    <option>Flexibility</option>
                </select>
            </td>
            <td><input type="text" name="sets[]" /></td>
            <td><input type="text" name="reps[]" /></td>
            <td><input type="text" name="kg[]" /></td>
            <td><input type="text" name="rest_time[]" /></td>
            <td><input type="text" name="remarks[]" /></td>
            <td><button type="button" onclick="removeRow(this)">❌</button></td>
        </tr>`;
        document.querySelector('#workout-table tbody').insertAdjacentHTML('beforeend', row);
    }

    function removeRow(button) {
        button.closest('tr').remove();
    }
</script>

@endsection

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#member_id').select2({
            placeholder: '-- Select Member --',
            allowClear: true,
            width: '100%'
        });
    });
</script>