@extends("admin.layouts.app")

@section("content")

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <div class="row widget-row">
        <div class="col-md-4">
            <div class="widget-thumb widget-bg-color-white text-uppercase margin-bottom-20 ">
                <h4 class="widget-thumb-heading">Total Steps</h4>
                <div class="widget-thumb-wrap">
                    <div class="widget-thumb-body">
                        <span class="widget-thumb-body-stat">
                            {{-- Possibly show total or current steps here --}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="portlet light bordered">
        <div class="portlet-body">
            <div class="table-scrollable">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th> Source</th>
                        <th> Model Name</th>
                        <th> Manufacturer Name</th>
                        <th> Device Name</th>
                        <th> Unique Device ID</th>
                        <th> Steps</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($sources as $source)
                        <tr>
                            <td>{{ $source->source }}</td>
                            <td>{{ $source->model_name }}</td>
                            <td>{{ $source->manufacturer_name }}</td>
                            <td>{{ $source->device_name }}</td>
                            <td>{{ $source->unique_device_id }}</td>
                            <td>
                                {{-- Current steps value --}}
                                <span class="font-weight-bold">{{ $source->steps }}</span>

                                {{-- If it's a Watch entry, allow editing/updating steps --}}
                                @if($source->model_name === 'Watch')
                                    {{-- If there's already a reason, show a warning --}}
                                    @if($source->reason)
                                        <div class="alert alert-warning mt-2 p-2">
                                            <strong>Warning:</strong> This Watch entry was already edited.<br>
                                            Reason: <em>"{{ $source->reason }}"</em>
                                        </div>
                                    @endif

                                    <form action="{{ route('admin.update-watch-step') }}" method="POST" class="mt-2">
                                        @csrf
                                        <input type="hidden" name="customer_id" value="{{ $customer->id }}">
                                        @if($health_data)
                                            <input type="hidden" name="health_id" value="{{ $health_data->id }}">
                                        @endif
                                        <input type="hidden" name="source_id" value="{{ $source->id }}">

                                        {{-- A Bootstrap input group to keep steps_diff & reason on the same line --}}
                                        <div class="input-group input-group-sm" style="max-width: 320px;">
                                            <input type="number"
                                                   name="steps_diff"
                                                   class="form-control"
                                                   placeholder="± Steps"
                                                   required>

                                            <input type="text"
                                                   name="reason"
                                                   class="form-control"
                                                   placeholder="Reason (optional)">

                                            <div class="input-group-append">
                                                <button class="btn btn-primary" type="submit">
                                                    Update
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection