@extends('admin.account.show')

@section('content')
<div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
    <!--begin::Card header-->
    <div class="card-header cursor-pointer">
        <!--begin::Card title-->
        <div class="card-title m-0">
            <h3 class="fw-bolder m-0">User Progress</h3>
        </div>
        <!--end::Card title-->
    </div>
    <!--begin::Card header-->
    <!--begin::Card body-->
    
    <div class="card-body p-9 pt-4">
        
        <div class="row mt-5">
            <div class="col-lg-12">
                <label class="col-lg-12 fw-bold text-muted">Select Progress Date</label>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-4">
                <select id="progress_date" class="form-select" data-control="select2" data-placeholder="Select an option">
                    @foreach ($user->gallery as $item)
                        <option value="{{$item->id}}">{{$item->date}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="progress_row">
        @foreach ($user->gallery as $item)
            <div class="d-flex flex-stack position-relative mt-6 progress_gallery" data-id="{{$item->id}}">
                <div class="row" style="width: 100%;justify-content: center;align-items: center;">
                    <div class="col-md-3"><img class="progress-img" src="{{$item->front}}" /></div>
                    <div class="col-md-3"><img class="progress-img" src="{{$item->back}}" /></div>
                    <div class="col-md-3"><img class="progress-img" src="{{$item->left_side}}" /></div>
                    <div class="col-md-3"><img class="progress-img" src="{{$item->right_side}}" /></div>
                </div>
            </div>
        @endforeach
        </div>
    </div>
    
    <!--end::Card body-->
</div>
@endsection