@extends('adminlte::page')

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

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

                <x-admin.validation-message />
                <br>
                {!! __('clinic-staff.create.p_explain') !!}
                <br>
                <br>
                <br>
                <!-- 権限 -->
                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-4">
                        <b>{!! __('clinic-staff.create.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>
                                    @foreach ($roleList as $roleId => $role)
                                        <option
                                            value="{{ $roleId }}"
                                            @if (old('role_id') == $roleId)
                                                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">
                            <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="{{ old('last_name') }}" 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="{{ old('first_name') }}" 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.create.b_email') !!}</b><sup style="color: red;">★</sup>
                    </div>
                    <div class="col-md-8">
                        <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="{!! __('clinic-staff.create.placeholder_email') !!}" required>
                        @error('email')
                        <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- パスワード -->
                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-4">
                        <b>{!! __('clinic-staff.create.b_password') !!}</b><sup style="color: red;">★</sup>
                    </div>
                    <div class="col-md-8">
                        <input type="password" name="password" class="form-control form-password" id="password" value="" required>
                        <i class="toggle-password-icon fas fa-eye" onclick="togglePasswordVisibility()"></i>
                        <sup>{!! __('clinic-staff.create.p_password_rule') !!}</sup>
                        @error('password')
                        <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-4">
                        <b>{!! __('clinic-staff.create.b_password_confirm') !!}</b><sup style="color: red;">★</sup>
                    </div>
                    <div class="col-md-8">
                        <input type="password" name="password_confirmation" class="form-control form-password" id="password-confirm" value="" required>
                        <i class="toggle-password-confirm-icon fas fa-eye" onclick="togglePasswordConfirmVisibility()"></i>
                        @error('password_confirmation')
                        <p class="text-danger">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <br>
                <br>
                <div class="col-md-12 text-center">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('clinic.clinic-staff.index') }}" class="w-100 btn btn-block button-back btn-lg rounded-pill">{!! __('clinic-staff.create.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.create.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