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

@section('content')

<!-- Custom CSS -->
<style>
    /* Page header */
    .measurement-header {
        margin-bottom: 2rem;
        text-align: center;
    }

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

    .measurement-header p {
        color: #6b7280;
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Form container */
    .measurement-form-section {
        display: flex;
        justify-content: center;
    }

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

    /* Form layout */
    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-weight: 600;
        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;
        transition: border-color 0.2s ease-in-out;
    }

    .form-group input:focus,
    .form-group select:focus {
        border-color: #2563eb;
        outline: none;
    }

    /* Grid layout for fields */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 1rem;
    }

    /* Submit Button */
    .form-actions {
        text-align: right;
    }

    .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;
        transition: background-color 0.2s ease;
    }

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

<!-- Page Header -->
<section class="measurement-header">
    <h1>Measurement</h1>
    <p>Measurement Tracking</p>
</section>

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

            <!-- Member Selector -->
            <div class="form-group">
                <label for="member_id">Member</label>
                <select name="member_id" id="member_id" class="" required>
                    <option value="">-- Select Member --</option>
                    @foreach($members as $member)
                        <option value="{{ $member->contact_id }}">{{ $member->contact_id }} - {{ $member->name }}</option>
                    @endforeach
                </select>
            </div>
  
            <!-- Measurement Date -->
            <div class="form-group">
                <label for="measurement_date">Measurement Date</label>
                <input type="date" name="measurement_date" id="measurement_date" required>
            </div>

            <!-- Measurements -->
            <div class="form-grid">
                @php
                    $fields = [
                        'height' => 'Height',
                        'weight' => 'Weight',
                        'chest' => 'Chest',
                        'neck' => 'Neck',
                        'waist' => 'Waist',
                        'thigh' => 'Thigh',
                        'arm' => 'Arm',
                        'fat' => 'Fat',
                    ];
                @endphp

                @foreach($fields as $field => $label)
                    <div class="form-group">
                        <label for="{{ $field }}">{{ $label }}</label>
                        <input type="text" name="{{ $field }}" id="{{ $field }}" required>
                    </div>
                @endforeach
            </div>

            <!-- Remarks -->
            <div class="form-group">
                <label for="remarks">Remarks</label>
                <input type="text" name="remarks" id="remarks" required>
            </div>

            <!-- Submit Button -->
            <div class="form-actions">
                <button type="submit">Save Measurement</button>
            </div>
        </form>
    </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: '100%'
        });
    });
</script>