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

@section('content')

<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>Workout Entry</h1>
</div>

<section class="form-section">
    <div class="form-card">
        <form action="{{ route('workout.store') }}" method="POST">
            @csrf

            <!-- 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 }}">{{ $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" 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">
                </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>
                    <tr>
                        <td>
                            <select name="day[]" >
                                <option value="">Day</option>
                                <option value="Monday">Monday</option>
                                <option value="Tuesday">Tuesday</option>
                                <option value="Wednesday">Wednesday</option>
                                <option value="Thursday">Thursday</option>
                                <option value="Friday">Friday</option>
                                <option value="Saturday">Saturday</option>
                                <option value="Sunday">Sunday</option>
                            </select>
                        </td>
                        <td>
                            <select name="workout[]" >
                                <option value="">Workout</option>
                                <option value="Body Conditioning">Body Conditioning</option>
                                <option value="Free Weights">Free Weights</option>
                                <option value="Plank">Plank</option>
                                <option value="Crunch">Crunch</option>
                                <option value="Fixed Weights">Fixed Weights</option>
                                <option value="Resisted Crunch">Resisted Crunch</option>
                                <option value="Hyperextension">Hyperextension</option>
                                <option value="Leg curl">Leg curl</option>
                                <option value="Reverse Leg Curl">Reverse Leg Curl</option>
                                <option value="High Leg Pull-In">High Leg Pull-In</option>
                            </select>
                        </td>
                        <td>
                            <select name="category[]" >
                                <option value="">Category</option>
                                <option value="Regular">Regular</option>
                                <option value="Limited">Limited</option>
                                <option value="Total Gym Exercises for Abs (Abdomininals)">Total Gym Exercises for Abs (Abdomininals)</option>
                                <option value="Total Gym Exercises for Legs">Total Gym Exercises for Legs</option>
                                <option value="Total Gym Exercises for Biceps">Total Gym Exercises for Biceps</option>
                                <option value="Exercise">Exercise</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>
                </tbody>
            </table>

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

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

<script>
    function addRow() {
        const row = `
        <tr>
           <td>
                            <select name="day[]" >
                                <option value="">Day</option>
                                <option value="Monday">Monday</option>
                                <option value="Tuesday">Tuesday</option>
                                <option value="Wednesday">Wednesday</option>
                                <option value="Thursday">Thursday</option>
                                <option value="Friday">Friday</option>
                                <option value="Saturday">Saturday</option>
                                <option value="Sunday">Sunday</option>
                            </select>
                        </td>
            <td>
                            <select name="workout[]" >
                                <option value="">Workout</option>
                                <option value="Body Conditioning">Body Conditioning</option>
                                <option value="Free Weights">Free Weights</option>
                                <option value="Plank">Plank</option>
                                <option value="Crunch">Crunch</option>
                                <option value="Fixed Weights">Fixed Weights</option>
                                <option value="Resisted Crunch">Resisted Crunch</option>
                                <option value="Hyperextension">Hyperextension</option>
                                <option value="Leg curl">Leg curl</option>
                                <option value="Reverse Leg Curl">Reverse Leg Curl</option>
                                <option value="High Leg Pull-In">High Leg Pull-In</option>
                            </select>
                        </td>
            <td>
                            <select name="category[]" >
                                <option value="">Category</option>
                                <option value="Regular">Regular</option>
                                <option value="Limited">Limited</option>
                                <option value="Total Gym Exercises for Abs (Abdomininals)">Total Gym Exercises for Abs (Abdomininals)</option>
                                <option value="Total Gym Exercises for Legs">Total Gym Exercises for Legs</option>
                                <option value="Total Gym Exercises for Biceps">Total Gym Exercises for Biceps</option>
                                <option value="Exercise">Exercise</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

@section('scripts')
<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>
@endsection