@extends('layouts.app')

@section('title', 'SSTRC STAFF')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.sls-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 2rem 1.2rem;
    color: #2d2f45;
}

/* ── header row ── */
.sls-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 1.6rem;
}
.sls-title-group { display: flex; align-items: center; gap: 14px; }
.sls-icon-box {
    width: 46px; height: 46px; border-radius: 13px;
    background: #414662;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sls-title { font-size: 21px; font-weight: 700; margin: 0 0 2px; color: #2d2f45; }
.sls-sub   { font-size: 12px; color: #9099b8; margin: 0; }
.sls-add-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    background: #414662;
    color: #fff; font-size: 12px; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-decoration: none; transition: all .2s;
}
.sls-add-btn:hover {
    box-shadow: 0 6px 20px rgba(65,70,98,.3);
    transform: translateY(-2px);
}

/* ── messages ── */
.sls-alert {
    /* max-width: 1000px; */
    margin: 0 auto 1.4rem;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sls-alert-success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    color: #15803d;
}
.sls-alert-error {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #b91c1c;
}

/* ── filter bar ── */
.sls-filter-bar {
    /* max-width: 1400px; */
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    padding: 1.2rem 1.6rem;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.sls-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #414662;
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sls-filter-select {
    padding: 9px 36px 9px 14px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #fff;
    color: #2d2f45;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all .2s;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414662' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    min-width: 200px;
}
.sls-filter-select:focus {
    border-color: #414662;
    box-shadow: 0 0 0 3px rgba(65,70,98,.1);
}
.sls-filter-clear {
    padding: 9px 16px;
    border: 1.5px solid #eceef6;
    border-radius: 10px;
    background: #fff;
    color: #6b7194;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.sls-filter-clear:hover {
    border-color: #414662;
    color: #414662;
}

/* ── card ── */
.sls-card {
    /* max-width: 1400px; */
    margin: 0 auto 1.4rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 36px rgba(65,70,98,.11);
    overflow: hidden;
}
.sls-bar {
    height: 5px;
    background: linear-gradient(90deg,#414662 0%,#f5a623 50%,#414662 100%);
    background-size: 200% 100%;
    animation: sls-shimmer 3s linear infinite;
}
@keyframes sls-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sls-body { padding: 2rem 2.2rem; }

/* section head */
.sls-sh { display: flex; align-items: center; gap: 10px; margin-bottom: 1.2rem; }
.sls-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; flex-shrink: 0; }
.sls-stitle { font-size: 11px; font-weight: 700; color: #414662; letter-spacing: .09em; text-transform: uppercase; }
.sls-count { margin-left: auto; font-size: 13px; font-weight: 700; color: #f5a623; background: #fffbeb; padding: 6px 12px; border-radius: 20px; }

/* ── table ── */
.sls-table-wrap {
    overflow-x: auto;
}
.sls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sls-table thead {
    background: #f7f8fc;
    border-bottom: 1.5px solid #eceef6;
}
.sls-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    color: #414662;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sls-table td {
    padding: 14px 16px;
    border-bottom: 1.5px solid #f0f1f7;
    color: #6b7194;
}
.sls-table tbody tr {
    transition: background-color .2s;
}
.sls-table tbody tr:hover {
    background-color: #f7f8fc;
}

/* ── staff row ── */
.sls-staff-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sls-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #414662;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
}
.sls-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sls-name {
    font-weight: 700;
    color: #2d2f45;
}

/* ── actions ── */
.sls-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sls-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border: 1.5px solid #babcc5;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    color: #414662;
    transition: all .2s;
    font-family: 'Poppins', sans-serif;
}
.sls-action-btn:hover {
    border-color: #414662;
    background: #414662;
    color: #fff;
}
.sls-action-btn-enable {
    border-color: #86efac;
    color: #166534;
}
.sls-action-btn-enable:hover {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}
.sls-action-btn-disable {
    border-color: #fca5a5;
    color: #991b1b;
}
.sls-action-btn-disable:hover {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

/* ── empty state ── */
.sls-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: #9099b8;
}
.sls-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.sls-empty-text {
    font-size: 14px;
    line-height: 1.6;
}

/* ── status badge ── */
.sls-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.sls-badge-active {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.sls-badge-inactive {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

@media(max-width:768px) {
    .sls-body { padding: 1.4rem 1rem; }
    .sls-top-row { flex-direction: column; align-items: flex-start; }
    .sls-table { font-size: 12px; }
    .sls-table th, .sls-table td { padding: 10px 12px; }
    .sls-title { font-size: 18px; }
    .sls-filter-select { min-width: 100%; }
}
/* ── modal ── */
.sls-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: fadeIn .2s ease;
}

.sls-modal-box{
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 20px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: scaleIn .2s ease;
}

.sls-modal-icon{
    font-size: 42px;
    margin-bottom: 12px;
}

.sls-modal-box h3{
    margin: 0 0 10px;
    font-size: 22px;
    color: #2d2f45;
}

.sls-modal-box p{
    margin: 0;
    font-size: 14px;
    color: #6b7194;
    line-height: 1.6;
}

.sls-modal-actions{
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.sls-modal-btn{
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.sls-cancel-btn{
    background: #eef1f7;
    color: #414662;
}

.sls-cancel-btn:hover{
    background: #dfe5f1;
}

.sls-confirm-btn{
    background: #dc2626;
    color: #fff;
}

.sls-confirm-btn:hover{
    background: #b91c1c;
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes scaleIn{
    from{
        transform: scale(.9);
        opacity:0;
    }
    to{
        transform: scale(1);
        opacity:1;
    }
}
</style>

<div class="sls-wrap">

    {{-- ── Top row ── --}}
    <div class="sls-top-row">
        <div class="sls-title-group">
            <div class="sls-icon-box">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div>
                <p class="sls-title">SSTRC STAFF</p>
                <p class="sls-sub">Manage all SSTRC staff in the system</p>
            </div>
        </div>
        <a href="{{ route('staff.create') }}" class="sls-add-btn">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
            Add New Staff
        </a>
    </div>

    {{-- ── Messages ── --}}
    @if (session('success'))
        <div class="sls-alert sls-alert-success">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="sls-alert sls-alert-error">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- ── Filter Bar ── --}}
    <form method="GET" action="{{ route('staff.list') }}" class="sls-filter-bar">
        <label class="sls-filter-label" for="role-filter">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filter by Role
        </label>
        <select name="role" id="role-filter" class="sls-filter-select" onchange="this.form.submit()">
            <option value="">All Roles</option>
            @php
                $availableRoles = $staff->pluck('role')->filter(fn($r) => $r && $r !== 'director')->unique()->sort();
            @endphp
            @foreach($availableRoles as $roleOption)
                <option value="{{ $roleOption }}" {{ request('role') == $roleOption ? 'selected' : '' }}>
                    {{ ucwords(str_replace('_', ' ', $roleOption)) }}
                </option>
            @endforeach
        </select>
        @if(request('role'))
            <a href="{{ route('staff.list') }}" class="sls-filter-clear">Clear Filter</a>
        @endif
    </form>

    {{-- ── Assistant Directors Section ── --}}
    <div class="sls-card">
        <div class="sls-bar"></div>
        <div class="sls-body">
            <div class="sls-sh">
                <div class="sls-dot"></div>
                <span class="sls-stitle">👤 Assistant Directors</span>
                @php
                    $filteredStaff = $staff->filter(function($s) {
                        if ($s->role == 'director') return false;
                        if (request('role') && $s->role != request('role')) return false;
                        return true;
                    });
                @endphp
                <span class="sls-count">{{ $filteredStaff->count() }}</span>
            </div>

            @if ($filteredStaff->count() > 0)
                <div class="sls-table-wrap">
                    <table class="sls-table">
                        <thead>
                            <tr>
                                <th>Photo</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Location</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($filteredStaff as $ad)
                                <tr>
                                    <td>
                                        <div class="sls-avatar">
                                            @if ($ad->photo)
                                                <img src="{{ asset('storage/' . $ad->photo) }}"
                                                    alt="{{ $ad->name }}">
                                            @else
                                                {{ substr($ad->name,0,1) }}
                                            @endif
                                        </div>
                                    </td>

                                    <td>
                                        <span class="sls-name">
                                            {{ $ad->name }}
                                        </span>
                                    </td>

                                    <td>{{ $ad->email }}</td>

                                    <td>
                                        {{ $ad->mobile ?? '—' }}
                                    </td>

                                    <td>
                                        {{ $ad->location ?? '—' }}
                                    </td>

                                    <td>
                                        {{
                                            $ad->role
                                            ? ucwords(
                                                str_replace(
                                                    '_',
                                                    ' ',
                                                    $ad->role
                                                )
                                            )
                                            : '—'
                                        }}
                                    </td>

                                    <td>
                                        <span class="sls-badge sls-badge-{{ $ad->status ?? 'active' }}">
                                            {{ ucfirst($ad->status ?? 'active') }}
                                        </span>
                                    </td>

<td>
    <div class="sls-actions">

        <a href="{{ route('staff.edit',$ad->id) }}"
           class="sls-action-btn">
            Edit
        </a>

        <button
            type="button"
            class="sls-action-btn 
            {{ ($ad->status ?? 'active') === 'active'
                ? 'sls-action-btn-disable'
                : 'sls-action-btn-enable' }}"
            onclick="toggleStatus(
                {{ $ad->id }},
                '{{ ($ad->status ?? 'active') === 'active' ? 'inactive' : 'active' }}',
                '{{ $ad->name }}'
            )">

            @if(($ad->status ?? 'active') === 'active')

                <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                </svg>

                Disable

            @else

                <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>

                Enable

            @endif

        </button>

    </div>
</td>



                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="sls-empty">
                    <div class="sls-empty-icon">👤</div>
                    <div class="sls-empty-text">
                        @if(request('role'))
                            No staff members found for the selected role.
                        @else
                            No assistant directors found in the system.
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>

</div>{{-- /wrap --}}



{{-- ── Status Modal ── --}}
<div id="statusModal" class="sls-modal">
    <div class="sls-modal-box">

        <div class="sls-modal-icon">
            ⚠️
        </div>

        <h3 id="modalTitle">
            Confirm Action
        </h3>

        <p id="modalMessage">
            Are you sure?
        </p>

        <div class="sls-modal-actions">

            <button
                class="sls-modal-btn sls-cancel-btn"
                onclick="closeModal()">

                Cancel

            </button>

            <button
                class="sls-modal-btn sls-confirm-btn"
                id="confirmStatusBtn">

                Confirm

            </button>

        </div>

    </div>
</div>

<script>

let currentUserId = null;
let currentStatus = null;

function toggleStatus(userId, status, name)
{
    currentUserId = userId;
    currentStatus = status;

    let actionText =
        status === 'active'
        ? 'enable'
        : 'disable';

    document.getElementById('modalMessage').innerText =
        `Are you sure you want to ${actionText} ${name}?`;

    document.getElementById('statusModal').style.display = 'flex';
}

function closeModal()
{
    document.getElementById('statusModal').style.display = 'none';
}

document
.getElementById('confirmStatusBtn')
.addEventListener('click', function () {

    fetch(`/staff/${currentUserId}/toggle-status`, {

        method: 'PATCH',

        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },

        body: JSON.stringify({
            status: currentStatus
        })

    })

    .then(response => response.json())

    .then(data => {

        if(data.success){

            closeModal();

            location.reload();

        }else{

            alert('Something went wrong');

        }

    })

    .catch(error => {

        console.error(error);

        alert('Error updating status');

    });

});

</script>

@endsection