@extends('admin.layouts.app')

@section('content')
    <h2 class="title">担当者一覧</h2>
    @include('admin.layouts.flash-message')

    <div class="tour-content">
        <p class="float-l pagecount">{{ $chargers->count() }}件/全{{ $chargers->total() }}件</p>
    </div>
    <div class="scroll">
        <table class="table text-centre">
            <thead>
            <tr>
                <th class="w100"></th>
                <th>お名前</th>
                <th>苗字</th>
                <th>名前</th>
                <th>ログインID</th>
                <th>プロフィール画像</th>
            </tr>
            </thead>
            <tbody>
            @if($chargers->count() > 0)
                @foreach($chargers as $charger)
                    <tr>
                        <td>
                            <ul class="btn-list3">
                                @if(Auth::guard('admin')->user()->id == $charger->id)
                                @endif
                                <li> <a href="{{ route("admin.account.edit", ['charger'=>$charger->id]) }}" class="detail">詳細</a> </li>
                                <li> <a href="{{ route("admin.account.detail", ['charger'=>$charger->id]) }}" class="detail">閲覧</a> </li>
                            </ul>
                        </td>
                        <td>{{ $charger->name }}</td>
                        <td>{{ $charger->first_name }}</td>
                        <td>{{ $charger->last_name }}</td>
                        <td>{{ $charger->login_id }}</td>
                        <td>
                            <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 }}" />
                                @endif
                            </div>
                        </td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="4">データが存在しません。</td>
                </tr>
            @endif
            </tbody>
        </table>
    </div>
@endsection

@section('page_css')
    <style>
        .w100 {
            width: 100px !important;
        }
        #profile-container {
            width: 80px;
            height: 80px;
            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: 80px;
            height: 80px;
            object-fit:cover;
        }
    </style>
@endsection

@section('page_js')
    <script>

    </script>
@endsection