@extends('adminlte::page')

@section('title', __('clinic-staff.edit.title'))

@section('content_header')
    <h5><label class="title-underbar">{!! __('clinic-staff.edit.title') !!}</label></h5>
@stop
@section('content')
    <div class="card" style="border-radius: 50px;">
        <x-admin.validation-message />
        <div class="card-body" style="margin: 20px 50px;">
            <form method="POST" id="submitForm" class="h-adr" action="{{ route('clinic.clinic-staff.editConfirm') }}">
                @csrf

                <br>
                {!! __('clinic-staff.edit.p_explain') !!}
                <br>
                <br>
                <br>
                <!-- 権限 -->
                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-4">
                        <b>{!! __('clinic-staff.edit.b_role') !!}</b><sup style="color: red;">★</sup>
                    </div>
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-12">
                                <select id="role" name="role_id" class="form-control" required>
                                    <option value="0">{!! __("clinic.common.select.default") !!}</option>
									@php
										$selectedRoleId = old('role_id') ? old('role_id') : $staff->role_id;
									@endphp
                                    @foreach ($roleList as $roleId => $role)
                                        <option
                                            value="{{ $roleId }}"
                                            @if ($roleId == $selectedRoleId)
                                                selected
                                            @endif
                                        >
                                            {!! __("clinic.common.role." . $role) !!}
                                        </option>
                                    @endforeach
                                </select>
                                @error('role_id')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 経営者名 -->
                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-4">
                        <b>{!! __('clinic-staff.create.b_name') !!}</b><sup style="color: red;">★</sup>
                    </div>
                    <div class="col-md-8">
                        <div class="row">
							@php
								$firstName = old('first_name') ? old('first_name') : $staff->first_name;
								$lastName = old('last_name') ? old('last_name') : $staff->last_name;
							@endphp
                            <div class="col-md-6">
                                <input type="text" id="last_name" name="last_name" class="form-control" placeholder="{!! __('clinic-staff.create.placeholder_last_name') !!}" value="{{ $lastName }}" required>
                                @error('last_name')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="first_name" name="first_name" class="form-control" placeholder="{!! __('clinic-staff.create.placeholder_first_name') !!}" value="{{ $firstName }}" required>
                                @error('first_name')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- メールアドレス -->
                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-4">
                        <b>{!! __('clinic-staff.edit.b_email') !!}</b><sup style="color: red;">★</sup>
                    </div>
                    <div class="col-md-8">
						@php
							$email = old('email') ? old('email') : $staff->email;
						@endphp
                        <input type="email" name="email" class="form-control" value="{{ $email }}" placeholder="{!! __('clinic-staff.edit.placeholder_email') !!}" required>
                        @error('email')
                        <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

				{{-- clinic_staffs.id --}}
				<input type="hidden" name="id" value="{{ $staff->id }}">

                <br>
                <br>
                <div class="col-md-12 text-center">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('clinic.clinic-staff.show', $staff->id) }}" class="w-100 btn btn-block button-back btn-lg rounded-pill">{!! __('clinic-staff.edit.button_back') !!}</a>
                        </div>
                        <div class="col-md-6">
                            <button type="button" id="submit-confirm" class="w-100 btn btn-block button-go btn-lg rounded-pill">{!! __('clinic-staff.edit.button_submit') !!}</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link href="/css/progressbar.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/clinic_staff.css">
@stop
@section('js')
    <script>
    //freetimeのjqueryが動いていないため、記載
    let submitButton = document.getElementById('submit-confirm');
    submitButton.addEventListener( 'click', function(e){
        e.preventDefault();
        $("#submitForm").submit();
    });
    </script>
    <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script type="text/javascript" src="/vendor/select2/select2.min.js"></script>
    <script type="text/javascript" src="/vendor/select2/ja.js"></script>
    <script>
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const icon = document.querySelector('.toggle-password-icon');
            setClass(passwordInput, icon);
        }
        function togglePasswordConfirmVisibility() {
            const passwordInput = document.getElementById('password-confirm');
            const icon = document.querySelector('.toggle-password-confirm-icon');
            setClass(passwordInput, icon);
        }
        function setClass(passwordInput, icon) {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
    </script>
@stop