@extends('backend.app')

@section('title', 'User Edit')

@section('content')

    <div class="page-header">
        <div>
            <h1 class="page-title">User Form</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="card box-shadow-0">
                <div class="card-body">

                    <form method="post" action="{{ route('user.update', ['id' => $data->id]) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PATCH')

                        <div class="form-group">
                            <label>Name:</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                                value="{{ $data->name ?? old('name') }}">

                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>


                        <div class="form-group">
                            <label>Email:</label>
                            <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                                value="{{ $data->email ?? old('email') }}">

                            @error('email')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>


                        <div class="form-group">
                            <label>Password:</label>
                            <input type="password" class="form-control @error('password') is-invalid @enderror"
                                name="password">

                            @error('password')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>


                        <div class="form-group">
                            <label>Role:</label>
                            <select name="role" id="role" class="form-control">

                                <option value="Coach" {{ $data->role == 'Coach' ? 'selected' : '' }}>
                                    Coach
                                </option>

                                <option value="User" {{ $data->role == 'User' ? 'selected' : '' }}>
                                    User
                                </option>

                                <option value="Admin" {{ $data->role == 'Admin' ? 'selected' : '' }}>
                                    Admin
                                </option>

                            </select>

                            @error('role')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>


                        {{-- Assign Coach --}}
                        <div class="form-group" id="coachField">
                            <label>Assign Coach</label>

                            <select name="coach" class="form-control">

                                <option value="">Select Coach</option>

                                @foreach ($coaches as $coach)
                                    <option value="{{ $coach->id }}"
                                        {{ $data->coach == $coach->id ? 'selected' : '' }}>

                                        {{ $coach->name }} ({{ $coach->email }})

                                    </option>
                                @endforeach

                            </select>

                            @error('coach')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror

                        </div>


                        <div class="form-group">
                            <label>Avatar:</label>

                            <input type="file" class="dropify @error('avatar') is-invalid @enderror" name="avatar">

                            @error('avatar')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror

                        </div>


                        <div class="form-group">

                            <button class="btn btn-primary" type="submit">
                                Submit
                            </button>

                            <a href="{{ route('user.index') }}" class="btn btn-danger">
                                Cancel
                            </a>

                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

@endsection


@push('scripts')
    <script>
        function toggleCoachField() {

            let role = $('#role').val()

            if (role === 'User') {
                $('#coachField').show()
            } else {
                $('#coachField').hide()
            }

        }

        $(document).ready(function() {

            toggleCoachField()

            $('#role').change(function() {

                toggleCoachField()

            })

        })
    </script>
@endpush