@extends('admin.layouts.app')

@section('content')
    <h2 class="title">担当者{{ (isset($is_confirm) && $is_confirm) ? '閲覧' : '詳細' }}</h2>

    {{ Form::open(["route"=>["admin.account.update", ["charger"=>$charger->id]], "method"=>"put", "files"=>true]) }}
    <input type="hidden" name="charger_id" value="{{ $charger->id }}">
        <table class="table2 mb profile_table">
            <tr>
                <td colspan="2">
                    <div id="profile-container">
                        @if(!empty($charger->profile_image) && Storage::disk('admins')->has($charger->id.'/'.$charger->profile_image))
                            <img id="profileImage" src="{{ asset('storage/admins/') }}/{{ $charger->id }}/{{ $charger->profile_image }}" />
                        @else
                            <img id="profileImage" src="{{ asset('assets/user/img/icon/person.png') }}" />
                        @endif
                    </div>
                    @unless(isset($is_confirm) && $is_confirm)
                    <input id="imageUpload" type="file" accept="image/*"
                           name="profile_image" placeholder="Photo" capture>
                    @endunless
                </td>
            </tr>
            <tr>
                <th>お名前（苗字）</th>
                <td >
                    <input type="text" class="text" name="first_name" value="{{ old('first_name', $charger->first_name) }}" {{ (isset($is_confirm) && $is_confirm) ? 'readonly' : '' }}>
                    @error('first_name')
                    <p class="error-message">{{ $message }}</p>
                    @enderror
                </td>
            </tr>
            <tr>
                <th>お名前（名前）</th>
                <td >
                    <input type="text" class="text" name="last_name" value="{{ old('last_name', $charger->last_name) }}" {{ (isset($is_confirm) && $is_confirm) ? 'readonly' : '' }}>
                    @error('last_name')
                    <p class="error-message">{{ $message }}</p>
                    @enderror
                </td>
            </tr>
            <tr>
                <th>ログインID</th>
                <td >
                    <input type="text" class="text" name="login_id" value="{{ old('login_id', $charger->login_id) }}" {{ (isset($is_confirm) && $is_confirm) ? 'readonly' : '' }}>
                    @error('login_id')
                    <p class="error-message">{{ $message }}</p>
                    @enderror
                </td>
            </tr>
        </table>
    <div class="search-btn">
        @if(isset($is_confirm) && $is_confirm)
            <a href="{{ route('admin.account.index') }}" class="back">一覧に戻る</a>
        @else
            <input type="submit" value="編集する" class="edit">
        @endif
    </div>
    {{ Form::close() }}
@endsection

@section('page_css')
    <style>
        .w100 {
            width: 100px !important;
        }
        #imageUpload
        {
            display: none;
        }

        #profileImage
        {
            cursor: pointer;
        }

        #profile-container {
            width: 150px;
            height: 150px;
            overflow: hidden;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            margin: 0 auto;
        }

        #profile-container img {
            width: 150px;
            height: 150px;
            object-fit:cover;
        }
        .profile_table {
            width: 60%;
            margin: 0 auto;
        }
    </style>
@endsection

@section('page_js')
    @unless(isset($is_confirm) && $is_confirm)
    <script>
        $(document).ready(function () {
            $("#profileImage").click(function(e) {
                $("#imageUpload").click();
            });

            function fasterPreview( uploader, ele_id, link_ele = '') {
                if ( uploader.files && uploader.files[0] ){
                    $('#' + ele_id).attr('src',
                        window.URL.createObjectURL(uploader.files[0]) );
                    if(link_ele !== '') {
                        $('#' + link_ele).attr('href',
                            window.URL.createObjectURL(uploader.files[0]) );
                    }
                }
            }

            $("#imageUpload").change(function(){
                fasterPreview( this ,'profileImage');
            });

        });
    </script>
    @endunless
@endsection