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

@section('content')

<style>
    .workout-header {
        text-align: center;
        margin-bottom: 2rem;
    }

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

    .filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin-bottom: 2rem;
    }

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

    .filter-form select,
    .filter-form input {
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        min-width: 200px;
    }

    .filter-form button {
        padding: 0.5rem 1rem;
        font-weight: 500;
        border-radius: 6px;
        margin-top: 1.75rem;
        cursor: pointer;
        background-color: #2563eb;
    }
    
    .filter-form a {
        padding: 0.5rem 1rem;
        font-weight: 500;
        border-radius: 6px;
        margin-top: 1.75rem;
        cursor: pointer;
        background-color: #f87171;
    }

    .table-wrapper {
        overflow-x: auto;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1000px;
    }

    table th, table td {
        border: 1px solid #e5e7eb;
        padding: 0.75rem;
        text-align: left;
        font-size: 0.95rem;
    }

    table th {
        background-color: #f3f4f6;
        text-transform: uppercase;
        color: #374151;
        font-weight: 600;
    }

    table tbody tr:nth-child(even) {
        background-color: #f9fafb;
    }

    table tbody tr:hover {
        background-color: #f1f5f9;
    }

    .action-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .action-buttons a,
    .action-buttons form button {
        background-color: #3b82f6;
        color: white;
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        font-size: 0.85rem;
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
        border: none;
    }

    .action-buttons form button {
        background-color: #ef4444;
    }

    .action-buttons form button:hover {
        background-color: #dc2626;
    }

    .no-records {
        text-align: center;
        padding: 2rem;
        color: #64748b;
        font-style: italic;
    }
</style>

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

<form method="GET" action="{{ route('workout.index') }}" class="filter-form">
    <div>
        <label for="member_id">Member</label>
        <select name="member_id" id="member_id">
            <option value="">-- All Members --</option>
            @foreach($members as $member)
                <option value="{{ $member->contact_id }}" {{ request('member_id') == $member->contact_id ? 'selected' : '' }}>
                    {{ $member->contact_id }} - {{ $member->name }}
                </option>
            @endforeach
        </select>
    </div>

    <div>
        <label for="start_date">Start Date</label>
        <input type="date" name="start_date" id="start_date" value="{{ request('start_date') }}">
    </div>

    <div>
        <label for="end_date">End Date</label>
        <input type="date" name="end_date" id="end_date" value="{{ request('end_date') }}">
    </div>

    <div>
        <button type="submit" class="text-white">Filter</button>
        <a href="{{ route('workout.index') }}" class="text-white" style="padding: 0.5rem 1rem; border-radius: 6px;">Reset</a>
        <a href="{{ route('workout.report', [
            'member_id' => request('member_id'),
            'start_date' => request('start_date'),
            'end_date' => request('end_date')
        ]) }}" 
        class="text-white" 
        style="padding: 0.5rem 1rem; border-radius: 6px; background-color: #10b981;">
            View Report
        </a>
    </div>
</form>

<section class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Member</th>
                <th>Workout From</th>
                <th>Workout To</th>
                <th>Category</th>
                <th>Sets</th>
                <th>Reps</th>
                <th>Kg</th>
                <th>Rest</th>
                <th>Remarks</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($workouts as $index => $workout)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $workout->member->name }} ({{ $workout->member->contact_id }})</td>
                    <td>{{ \Carbon\Carbon::parse($workout->workout_date_from)->format('d-m-Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($workout->workout_date_to)->format('d-m-Y') }}</td>
                    <td>{{ $workout->workout }}</td>
                    <td>{{ $workout->category }}</td>
                    <td>{{ $workout->sets }}</td>
                    <td>{{ $workout->reps }}</td>
                    <td>{{ $workout->kg }}</td>
                    <td>{{ $workout->rest_time }}</td>
                    <td>{{ $workout->remarks }}</td>
                    <td class="action-buttons">
                        {{-- <div style="margin-top: 6px;">
                            <a href="{{ route('workout.edit', $workout->id) }}">Edit</a>
                        </div> --}}
                        <form action="{{ route('workout.destroy', $workout->id) }}" method="POST" onsubmit="return confirm('Are you sure?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="12" class="no-records">No workout records found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
    {{-- Pagination links --}}
    <div class="tw-mt-4">
        {{ $workouts->links() }}
    </div>
</section>

@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: 'resolve'
        });
    });
</script>