@extends('layout')
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Admin Details') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li>
                        <a href="{{ url('/admins') }}">{{ __('Admins') }}</a>
                    </li>
                    <li>
                        <a href="#!">{{ __('Admin Details') }}</a>
                    </li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                @can('admins.edit')
                    <a href="{{ route('admins.edit', $admin->id) }}" class="dashboard_main-btn">
                        {{ __('Quick Action') }}
                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                    </a>
                @endcan
            </div>
        </div>
        <div class="dashboard_main-body">
            <div class="details-card">
                <div class="vendor_details-head">
                    <h2 class="vendor_details-title">
                        {{ $admin->name }}
                    </h2>
                    <span class="vendor_details-date">
                        {{ __('Created at') }} {{ $admin->created_at->format('d M, Y') }}
                    </span>
                    <span class="vendor_details-status {{ $admin->status == 'active' ? 'active_status' : $admin->status }}">
                        <i class="icon">
                            @if ($admin->status == 'active')
                                <img src="{{ asset('assets/images/icons/check_circle.svg') }}" alt="icon"
                                    class="svg" />
                            @else
                                <img src="{{ asset('assets/images/icons/times_circle.svg') }}" alt="icon"
                                    class="svg" />
                            @endif
                        </i>
                        {{ $admin->status }}
                    </span>
                </div>
                <div class="vendor_details-body">
                    {{-- <div class="vendor_details-media"> --}}
                    <div class="vendor_details-img" style="background-color: {{ $admin->tertiary_color ?? '#f4f6f8' }}">
                        <img src="{{ $admin->getFirstMediaUrl('logo') ?: asset('assets/images/media.png') }}"
                            alt="media" class="img-contain" width='100%' />
                    </div>
                    {{-- </div> --}}
                    <div class="vendor_details-info">
                        <ul class="vendor_details-list">
                            <li>
                                <span class="title">{{ __('ID') }}</span>
                                <span class="value">
                                    VD-{{ str_pad($admin->id, 6, '0', STR_PAD_LEFT) }}
                                </span>
                                <button class="copy-btn" type="button"
                                    onclick="navigator.clipboard.writeText('VD-{{ str_pad($admin->id, 6, '0', STR_PAD_LEFT) }}')">
                                    <img src="{{ asset('assets/images/icons/copy.svg') }}" alt="icon" class="svg" />
                                </button>
                            </li>
                            <li>
                                <span class="title">{{ __('Phone') }}</span>
                                <span class="value">
                                    <a href="tel:{{ $admin->phone }}" class="en">
                                        {{ $admin->phone }}
                                    </a>
                                </span>
                            </li>
                            <li>
                                <span class="title">{{ __('Email') }}</span>
                                <span class="value">
                                    <a href="mailto:{{ $admin->email }}" class="en">
                                        {{ $admin->email }}
                                    </a>
                                </span>
                            </li>



                            <li>
                                <span class="title">{{ __('Role') }}</span>
                                <span class="value">
                                    {{ $admin->roles->pluck('name')->implode(', ') }}
                                </span>
                            </li>






                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection