@extends('backend.layout.main')

@section('content')
@if(session()->has('create_message'))
    <div class="alert alert-success alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{ session()->get('create_message') }}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger alert-dismissible text-center">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{ $errors->first() }}
    </div>
@endif

<style>
    .measurement-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .measurement-header h4 {
        margin-bottom: 4px;
        font-weight: 600;
    }
    .measurement-customer-meta {
        color: #777;
        font-size: 13px;
    }
    .measurement-profile-card {
        border: 1px solid #e7e9f1;
        border-radius: 6px;
        box-shadow: 0 4px 18px rgba(28, 39, 60, .05);
        margin-bottom: 18px;
    }
    .measurement-profile-card .card-header {
        background: #fff;
        border-bottom: 1px solid #eef0f5;
        padding: 16px 18px;
    }
    .measurement-profile-card .card-header h5 {
        margin-bottom: 2px;
        font-weight: 600;
    }
    .measurement-form-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(120px, 1fr));
        gap: 14px;
    }
    .measurement-history-table th {
        white-space: nowrap;
    }
    .measurement-reference-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .measurement-reference-list img {
        width: 54px;
        height: 54px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #e4e6ef;
    }
    .measurement-empty-state {
        border: 1px dashed #cfd5e6;
        border-radius: 6px;
        padding: 26px;
        text-align: center;
        color: #777;
        background: #fbfcff;
    }
    @media (max-width: 1199px) {
        .measurement-form-grid {
            grid-template-columns: repeat(3, minmax(120px, 1fr));
        }
    }
    @media (max-width: 767px) {
        .measurement-form-grid {
            grid-template-columns: repeat(2, minmax(120px, 1fr));
        }
    }
</style>

<section>
    <div class="container-fluid">
        <div class="measurement-header">
            <div>
                <h4>Measurements</h4>
                <div class="measurement-customer-meta">
                    {{ $customer->name }}
                    @if($customer->phone_number)
                        <span> | {{ $customer->phone_number }}</span>
                    @endif
                    @if($customer->email)
                        <span> | {{ $customer->email }}</span>
                    @endif
                </div>
            </div>
            <a href="{{ route('customer.index') }}" class="btn btn-secondary"><i class="dripicons-arrow-thin-left"></i> Back to Customers</a>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <h5 class="mb-3">Create Measurement Profile</h5>
                <form action="{{ route('customer.measurements.profiles.store', $customer->id) }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Profile Name *</label>
                                <input type="text" name="profile_name" class="form-control" placeholder="Casual Fit, Formal Dress, Bridal" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Description</label>
                                <input type="text" name="description" class="form-control" placeholder="Optional internal note">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label>&nbsp;</label>
                                <button type="submit" class="btn btn-primary btn-block"><i class="dripicons-plus"></i> Add Profile</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        @forelse($customer->measurementProfiles as $profile)
            <div class="card measurement-profile-card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h5>{{ $profile->profile_name }}</h5>
                            @if($profile->description)
                                <small class="text-muted">{{ $profile->description }}</small>
                            @endif
                        </div>
                        <span class="badge badge-light">{{ $profile->measurements->count() }} records</span>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('customer.measurements.records.store', [$customer->id, $profile->id]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label>Measurement Date *</label>
                                    <input type="date" name="recorded_at" class="form-control" value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>Unit *</label>
                                    <select name="unit" class="form-control" required>
                                        <option value="in">Inches</option>
                                        <option value="cm">Centimeters</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="form-group">
                                    <label>Reference Images / Sketches</label>
                                    <input type="file" name="reference_images[]" class="form-control" multiple accept=".jpg,.jpeg,.png,.gif,.webp,.pdf">
                                </div>
                            </div>
                        </div>

                        <div class="measurement-form-grid">
                            @foreach($measurementFields as $field => $label)
                                <div class="form-group">
                                    <label>{{ $label }}</label>
                                    <input type="number" name="{{ $field }}" step="0.01" min="0" class="form-control">
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group">
                            <label>Custom Notes</label>
                            <textarea name="custom_notes" rows="3" class="form-control" placeholder="Fit preference, posture notes, design notes, alterations, or tailor instructions"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary"><i class="dripicons-checkmark"></i> Save Measurement Record</button>
                    </form>

                    <hr>

                    <h5 class="mb-3">Measurement History</h5>
                    @if($profile->measurements->count())
                        <div class="table-responsive">
                            <table class="table table-hover measurement-history-table">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Unit</th>
                                        @foreach($measurementFields as $label)
                                            <th>{{ $label }}</th>
                                        @endforeach
                                        <th>Notes</th>
                                        <th>References</th>
                                        <th>Saved By</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($profile->measurements as $measurement)
                                        <tr>
                                            <td>{{ optional($measurement->recorded_at)->format('Y-m-d') }}</td>
                                            <td>{{ $measurement->unit }}</td>
                                            @foreach($measurementFields as $field => $label)
                                                <td>{{ $measurement->$field !== null ? number_format($measurement->$field, 2) : '-' }}</td>
                                            @endforeach
                                            <td style="min-width: 180px;">{{ $measurement->custom_notes ?: '-' }}</td>
                                            <td style="min-width: 140px;">
                                                @if($measurement->images->count())
                                                    <div class="measurement-reference-list">
                                                        @foreach($measurement->images as $image)
                                                            @if(strpos($image->mime_type, 'image/') === 0)
                                                                <a href="{{ url($image->file_path) }}" target="_blank" title="{{ $image->original_name }}">
                                                                    <img src="{{ url($image->file_path) }}" alt="{{ $image->original_name }}">
                                                                </a>
                                                            @else
                                                                <a href="{{ url($image->file_path) }}" target="_blank" class="btn btn-sm btn-outline-secondary">{{ $image->original_name ?: 'File' }}</a>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>{{ optional($measurement->creator)->name ?: '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="measurement-empty-state">No measurement records saved for this profile yet.</div>
                    @endif
                </div>
            </div>
        @empty
            <div class="measurement-empty-state">Create the first profile for this customer to start saving measurement history.</div>
        @endforelse
    </div>
</section>
@endsection

@push('scripts')
<script type="text/javascript">
    $("ul#people").siblings('a').attr('aria-expanded','true');
    $("ul#people").addClass("show");
    $("ul#people #customer-list-menu").addClass("active");
</script>
@endpush