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

@section('content')

<!-- Custom CSS -->
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .measurement-header {
        margin-bottom: 2rem;
        text-align: center;
    }

    .measurement-header h1 {
        font-size: 2.25rem;
        color: #1f2937;
        font-weight: bold;
    }

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

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

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

    .measurement-table th {
        background-color: #f1f5f9;
        color: #334155;
        font-weight: 600;
        text-transform: uppercase;
    }

    .measurement-table tbody tr {
        transition: background-color 0.2s ease;
    }

    .measurement-table tbody tr:hover {
        background-color: #f9fafb;
    }

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

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

    .action-buttons a {
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        color: white;
        background-color: #3b82f6;
        transition: background-color 0.2s;
    }

    .action-buttons .delete {
        padding: 0.4rem 0.75rem !important;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        color: white !important;
        transition: background-color 0.2s;
    }

    .action-buttons a:hover {
        background-color: #2563eb !important;
    }

    .action-buttons button.delete {
        background-color: #ef4444 !important;
    }

    .action-buttons button.delete:hover {
        background-color: #dc2626 !important;
    }

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

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

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

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

    .filter-form button {
        padding: 0.5rem 1rem;
        font-weight: 500;
        border-radius: 6px;
        background-color: #2563eb;
    }
    
    .filter-form a {
        padding: 0.5rem 1rem;
        font-weight: 500;
        border-radius: 6px;
        background-color: #f87171;
    }
</style>

<!-- Header -->
<section class="measurement-header">
    <h1>Measurement Records</h1>
</section>

<!-- Filter Form -->
<form method="GET" action="{{ route('measurement.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 style="align-self: flex-end;">
        <button type="submit" class="text-white">Filter</button>
        <a href="{{ route('measurement.index') }}" class="text-white">Reset</a>
        <a href="{{ route('measurement.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>

<!-- Table Content -->
<section class="table-wrapper">
    <table class="measurement-table">
        <thead>
            <tr>
                <th>#</th>
                <th>Member</th>
                <th>Date</th>
                <th>Height</th>
                <th>Weight</th>
                <th>Chest</th>
                <th>Neck</th>
                <th>Waist</th>
                <th>Thigh</th>
                <th>Arm</th>
                <th>Fat</th>
                <th>Remarks</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($measurements as $index => $measurement)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $measurement->member->name }} ({{ $measurement->member->contact_id }})</td>
                    <td>{{ \Carbon\Carbon::parse($measurement->measurement_date)->format('Y-m-d') }}</td>
                    <td>{{ $measurement->height }}</td>
                    <td>{{ $measurement->weight }}</td>
                    <td>{{ $measurement->chest }}</td>
                    <td>{{ $measurement->neck }}</td>
                    <td>{{ $measurement->waist }}</td>
                    <td>{{ $measurement->thigh }}</td>
                    <td>{{ $measurement->arm }}</td>
                    <td>{{ $measurement->fat }}</td>
                    <td>{{ $measurement->remarks }}</td>
                    <td class="action-buttons">
                        <a href="{{ route('measurement.edit', $measurement->id) }}">Edit</a>
                        <form action="{{ route('measurement.destroy', $measurement->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this record?');" style="display:inline-block;">
                            @csrf
                            @method('DELETE')
                            <button class="delete" type="submit" style="background:none;border:none;color:#dc2626;cursor:pointer;padding:0;">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="13" class="no-records">No measurements found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
    {{-- Pagination links --}}
    <div class="tw-mt-4">
        {{ $measurements->links() }}
    </div>
</section>

@endsection