@extends('admin.layouts.app')

@section('panel')
@php
    $pageTitle = 'Admin Management';
@endphp

@push('page_css')
<style>
    /* one line truncate */
    .am-one-line{
        white-space:nowrap !important;
        overflow:hidden;
        text-overflow:ellipsis;
        word-break:normal !important;
        overflow-wrap:normal !important;
        display:block;
        max-width: 260px;
    }
    .am-table th, .am-table td{vertical-align:middle}
    .am-actions{display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:nowrap}
    .am-actions .btn{white-space:nowrap}
</style>
@endpush

@push('breadcrumb-plugins')
    <button class="btn btn-outline--primary btn-sm" type="button" id="toggleCreateFormBtn" aria-expanded="false">
        <i class="las la-plus" id="toggleCreateFormIcon"></i> @lang('Create Admin')
    </button>
@endpush

<div class="row gy-3">

    {{-- FLASH + ERRORS --}}
    <div class="col-12">
        @if(session('success'))
            <div class="alert alert--success py-2">
                <i class="las la-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert--danger py-2">
                <i class="las la-exclamation-triangle"></i> {{ session('error') }}
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert--danger py-2">
                <div class="fw-bold mb-1">
                    <i class="las la-times-circle"></i> @lang('Validation errors')
                </div>
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    {{-- CREATE FORM (collapse like viserlab) --}}
    <div class="col-12" id="adminCreateWrap" style="display:none;">
        <div class="card b-radius--10">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="las la-user-plus"></i> @lang('Create New Admin')
                </h5>
                <span class="badge badge--primary">@lang('New')</span>
            </div>

            <div class="card-body">
                <form action="{{ route('admin.admins.store') }}" method="POST" autocomplete="off" class="row gy-3">
                    @csrf

                    <div class="col-md-6">
                        <label class="form-label fw-bold">@lang('Name') <span class="text--danger">*</span></label>
                        <input type="text"
                               name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}"
                               placeholder="@lang('Admin full name')"
                               required>
                        @error('name') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-bold">@lang('Mobile')</label>
                        <input type="text"
                               name="mobile"
                               class="form-control @error('mobile') is-invalid @enderror"
                               value="{{ old('mobile') }}"
                               placeholder="@lang('Optional mobile number')">
                        @error('mobile') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-bold">@lang('Email') <span class="text--danger">*</span></label>
                        <input type="email"
                               name="email"
                               class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email') }}"
                               placeholder="admin@example.com"
                               required>
                        @error('email') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">@lang('Password') <span class="text--danger">*</span></label>
                        <input type="password"
                               name="password"
                               class="form-control @error('password') is-invalid @enderror"
                               placeholder="@lang('Min 6 characters')"
                               required>
                        @error('password') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">@lang('Confirm Password') <span class="text--danger">*</span></label>
                        <input type="password"
                               name="password_confirmation"
                               class="form-control"
                               placeholder="@lang('Repeat password')"
                               required>
                    </div>

                    <div class="col-12 d-flex justify-content-end gap-2">
                        <button type="reset" class="btn btn--dark btn--sm">
                            <i class="las la-redo-alt"></i> @lang('Reset')
                        </button>

                        <button type="submit" class="btn btn--primary btn--sm">
                            <i class="las la-save"></i> @lang('Create Admin')
                        </button>
                    </div>

                </form>
            </div>

            <div class="card-footer small text-muted py-2">
                @lang('New admin will be able to login immediately with the above credentials.')
            </div>
        </div>
    </div>

    {{-- ADMIN LIST --}}
    <div class="col-12">
        <div class="card b-radius--10">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">
                    <i class="las la-users"></i> @lang('All Admins')
                </h5>
                <span class="text-muted small">@lang('Total'): {{ $admins->count() }}</span>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive--sm table-responsive">
                    <table class="table table--light style--two mb-0 am-table">
                        <thead>
                        <tr>
                            <th style="width:80px">#</th>
                            <th>@lang('Name')</th>
                            <th style="min-width:150px">@lang('Mobile')</th>
                            <th style="min-width:220px">@lang('Email')</th>
                            <th class="text-end" style="min-width:180px">@lang('Actions')</th>
                        </tr>
                        </thead>

                        <tbody>
                        @forelse($admins as $admin)
                            <tr>
                                <td class="fw-bold">#{{ $admin->id }}</td>

                                <td>
                                    <span class="am-one-line fw-bold" title="{{ $admin->name }}">{{ $admin->name }}</span>
                                </td>

                                <td>
                                    <span class="am-one-line" title="{{ $admin->mobile }}">{{ $admin->mobile }}</span>
                                </td>

                                <td>
                                    <span class="am-one-line" title="{{ $admin->email }}">{{ $admin->email }}</span>
                                </td>

                                <td class="text-end">
                                    <div class="am-actions">
                                        <a href="{{ route('admin.admins.edit', $admin) }}" class="btn btn-outline--primary btn--sm">
                                            <i class="las la-edit"></i> @lang('Edit')
                                        </a>

                                        @if($admin->id != 1)
                                            <form action="{{ route('admin.admins.destroy', $admin) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit"
                                                        class="btn btn-outline--danger btn--sm"
                                                        onclick="return confirm('@lang('Delete this admin?')')">
                                                    <i class="las la-trash"></i> @lang('Delete')
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">
                                    <i class="las la-inbox f-size--40 d-block mb-2"></i>
                                    @lang('No admins found.')
                                </td>
                            </tr>
                        @endforelse
                        </tbody>

                    </table>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection

@push('script')
<script>
(function(){
  "use strict";

  const btn  = document.getElementById('toggleCreateFormBtn');
  const icon = document.getElementById('toggleCreateFormIcon');
  const wrap = document.getElementById('adminCreateWrap');

  if(!btn || !icon || !wrap) return;

  function openForm(){
    wrap.style.display = '';
    icon.classList.remove('la-plus');
    icon.classList.add('la-times');
    btn.setAttribute('aria-expanded','true');
    btn.innerHTML = `<i class="las la-times" id="toggleCreateFormIcon"></i> Create Admin`;
  }

  function closeForm(){
    wrap.style.display = 'none';
    btn.setAttribute('aria-expanded','false');
    btn.innerHTML = `<i class="las la-plus" id="toggleCreateFormIcon"></i> Create Admin`;
  }

  // re-bind icon after innerHTML change
  btn.addEventListener('click', function(){
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    expanded ? closeForm() : openForm();
  });

  // default closed
  closeForm();
})();
</script>
@endpush