@extends('layouts.app')

@section('content')
<div class="content">
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <h1 class="m-0 text-primary fw-bold">Edit User-Group Association</h1>
        <a href="{{ route('user_groups.index') }}" class="btn btn-secondary">Back</a>
    </div>

    @include('layouts.partials.toast')

    <div class="card">
        <div class="card-body p-4">
            <form action="{{ route('user_groups.update', $userGroup->id) }}" method="POST" id="editUserGroupForm">
                @csrf
                @method('PUT')
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="user_id" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Select the user">User <span class="text-danger">*</span></label>
                            <select class="form-control @error('user_id') is-invalid @endif" id="user_id" name="user_id" aria-required="true">
                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id', $userGroup->user_id) == $user->id ? 'selected' : '' }}>{{ $user->first_name }} {{ $user->last_name }}</option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="user_group_id" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Select the group">Group <span class="text-danger">*</span></label>
                            <select class="form-control @error('user_group_id') is-invalid @endif" id="user_group_id" name="user_group_id" aria-required="true">
                                @foreach ($userGroups as $group)
                                    <option value="{{ $group->id }}" {{ old('user_group_id', $userGroup->user_group_id) == $group->id ? 'selected' : '' }}>{{ $group->group->name }}</option>
                                @endforeach
                            </select>
                            @error('user_group_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="joined_at" class="form-label" data-bs-toggle="tooltip" data-bs-placement="top" title="Enter the join date (optional)">Joined At</label>
                            <input type="date" class="form-control @error('joined_at') is-invalid @endif" id="joined_at" name="joined_at" value="{{ old('joined_at', $userGroup->joined_at) }}">
                            @error('joined_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary" style="background-color: #608ac4; border-color: #608ac4;">Update Association</button>
                    <a href="{{ route('user_groups.index') }}" class="btn btn-secondary ms-2">Cancel</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Initialize Tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    </script>
@endsection