@extends('layouts.app')

@section('title', 'Staff')

@section('content')

@php
    /*
    |--------------------------------------------------------------------------
    | Dynamic Staff Statistics
    |--------------------------------------------------------------------------
    */

    $totalStaff = $staff->count();

    $activeStaff = $staff->where('is_active', 1)->count();
    $administrators = $staff->filter(function ($member) {
    $roleName = strtolower(trim($member->role->role_name ?? ''));

    return str_contains($roleName, 'admin');
})->count();
$orderTakers = $staff->filter(function ($member) {
    $roleName = strtolower(trim($member->role->role_name ?? ''));

    return str_contains($roleName, 'order taker');
})->count();


   
    // Progress percentages
    $activePercentage = $totalStaff > 0
        ? round(($activeStaff / $totalStaff) * 100)
        : 0;

    $administratorPercentage = $totalStaff > 0
        ? round(($administrators / $totalStaff) * 100)
        : 0;

    $orderTakerPercentage = $totalStaff > 0
        ? round(($orderTakers / $totalStaff) * 100)
        : 0;
@endphp


<div class="row">

    {{-- ================================================================
         PAGE HEADER
    ================================================================= --}}
    <div class="col-sm-12">
        <div class="card card-transparent card-block card-stretch card-height border-none mb-4">
            <div class="card-body p-0 d-flex align-items-center justify-content-between flex-wrap">
                <div>
                    <h3 class="mb-2">Staff Management</h3>
                </div>

                <a href="{{ url('/staff/add') }}" class="btn btn-primary mt-2 mt-md-0">
                    <i class="ri-add-line mr-1"></i>
                    Add Staff
                </a>
            </div>
        </div>
    </div>


    {{-- ================================================================
         STAFF STATISTICS
    ================================================================= --}}
    <div class="col-sm-12">
        <div class="row">

            {{-- TOTAL STAFF --}}
            <div class="col-lg-3 col-md-6">
                <div class="card card-block card-stretch card-height">
                    <div class="card-body">

                        <div class="d-flex align-items-center mb-2 card-total-sale">

                            <div class="icon iq-icon-box-2 bg-primary-light">
                                <svg width="22" height="22"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor"
                                     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"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>

                                </svg>
                            </div>

                            <div>
                                <p class="mb-2">Total Staff</p>
                                <h4>{{ $totalStaff }}</h4>
                            </div>

                        </div>

                        <div class="iq-progress-bar mt-2">
                            <span
                                class="bg-primary iq-progress progress-1"
                                data-percent="100"
                                style="width: 100%;">
                            </span>
                        </div>

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


            {{-- ACTIVE STAFF --}}
            <div class="col-lg-3 col-md-6">
                <div class="card card-block card-stretch card-height">
                    <div class="card-body">

                        <div class="d-flex align-items-center mb-2 card-total-sale">

                            <div class="icon iq-icon-box-2 bg-success-light">
                                <svg width="22" height="22"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="2"
                                     stroke-linecap="round"
                                     stroke-linejoin="round">

                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>

                                </svg>
                            </div>

                            <div>
                                <p class="mb-2">Active Staff</p>
                                <h4>{{ $activeStaff }}</h4>
                            </div>

                        </div>

                        <div class="iq-progress-bar mt-2">
                            <span
                                class="bg-success iq-progress progress-1"
                                data-percent="{{ $activePercentage }}"
                                style="width: {{ $activePercentage }}%;">
                            </span>
                        </div>

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


            {{-- ADMINISTRATORS --}}
            <div class="col-lg-3 col-md-6">
                <div class="card card-block card-stretch card-height">
                    <div class="card-body">

                        <div class="d-flex align-items-center mb-2 card-total-sale">

                            <div class="icon iq-icon-box-2 bg-info-light">
                                <svg width="22" height="22"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="2"
                                     stroke-linecap="round"
                                     stroke-linejoin="round">

                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>

                                </svg>
                            </div>

                            <div>
                                <p class="mb-2">Administrators</p>
                                <h4>{{ $administrators }}</h4>
                            </div>

                        </div>

                        <div class="iq-progress-bar mt-2">
                            <span
                                class="bg-info iq-progress progress-1"
                                data-percent="{{ $administratorPercentage }}"
                                style="width: {{ $administratorPercentage }}%;">
                            </span>
                        </div>

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


            {{-- ORDER TAKERS --}}
            <div class="col-lg-3 col-md-6">
                <div class="card card-block card-stretch card-height">
                    <div class="card-body">

                        <div class="d-flex align-items-center mb-2 card-total-sale">

                            <div class="icon iq-icon-box-2 bg-warning-light">
                                <svg width="22" height="22"
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="2"
                                     stroke-linecap="round"
                                     stroke-linejoin="round">

                                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>

                                </svg>
                            </div>

                            <div>
                                <p class="mb-2">Order Taker</p>
                                <h4>{{ $orderTakers }}</h4>
                            </div>

                        </div>

                        <div class="iq-progress-bar mt-2">
                            <span
                                class="bg-warning iq-progress progress-1"
                                data-percent="{{ $orderTakerPercentage }}"
                                style="width: {{ $orderTakerPercentage }}%;">
                            </span>
                        </div>

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

        </div>
    </div>


    {{-- ================================================================
         SEARCH & FILTER
    ================================================================= --}}
    <div class="col-sm-12">
        <div class="card card-block card-stretch card-height">

            <div class="card-header d-flex justify-content-between">
                <div class="header-title">
                    <h4 class="card-title">Search & Filter</h4>
                </div>
            </div>

            <div class="card-body">

                <form action="#" method="GET">

                    <div class="row align-items-end">

                        <div class="col-lg-4 col-md-6 form-group">
                            <label>Search by Name or Email</label>

                            <input
                                type="text"
                                class="form-control"
                                placeholder="e.g. Saba Ashraf or saba@gmail.com"
                            >
                        </div>

                        <div class="col-lg-3 col-md-6 form-group">
                            <label>Role</label>

                            <select class="form-control">
                                <option>All Roles</option>
                                <option>Administrator</option>
                                <option>Order Taker</option>
                            </select>
                        </div>

                        <div class="col-lg-2 col-md-6 form-group">
                            <label>Status</label>

                            <select class="form-control">
                                <option>All</option>
                                <option>Active</option>
                                <option>Inactive</option>
                            </select>
                        </div>

                        <div class="col-lg-3 col-md-6 form-group d-flex">

                            <button type="button" class="btn btn-primary mr-2">
                                <i class="ri-search-line mr-1"></i>
                                Search
                            </button>

                            <button type="reset" class="btn btn-outline-secondary">
                                <i class="ri-refresh-line mr-1"></i>
                                Reset
                            </button>

                        </div>

                    </div>

                </form>

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


    {{-- ================================================================
         STAFF LIST
    ================================================================= --}}
    <div class="col-sm-12">

        <div class="card card-block card-stretch card-height">

            <div class="card-header d-flex justify-content-between align-items-center flex-wrap">

                <div class="header-title">
                    <h4 class="card-title">Staff List</h4>
                </div>

                <div class="card-header-toolbar d-flex align-items-center flex-wrap">

                    <div class="d-flex align-items-center mr-3">
                    </div>

                    <div class="iq-search-bar">

                        <div class="searchbox position-relative">

                            <input
                                type="text"
                                class="text search-input form-control form-control-sm"
                                placeholder="Search table..."
                            >

                            <a class="search-link" href="#">
                                <i class="ri-search-line"></i>
                            </a>

                        </div>

                    </div>

                </div>

            </div>


            <div class="card-body">

                <div class="table-responsive">

                    <table class="table table-striped table-hover mb-0">

                        <thead>

                            <tr>

                                <th style="width: 50px;">
                                    <div class="checkbox d-inline-block">

                                        <input
                                            type="checkbox"
                                            class="checkbox-input"
                                            id="checkbox1"
                                        >

                                        <label
                                            for="checkbox1"
                                            class="mb-0">
                                        </label>

                                    </div>
                                </th>

                                <th>Staff Name</th>
                                <th>Email Address</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Actions</th>

                            </tr>

                        </thead>


                        <tbody>

                            @forelse($staff as $member)

                                <tr>

                                    {{-- Checkbox --}}
                                    <td>

                                        <div class="checkbox d-inline-block">

                                            <input
                                                type="checkbox"
                                                class="checkbox-input"
                                                id="checkbox{{ $member->user_id }}"
                                            >

                                            <label
                                                for="checkbox{{ $member->user_id }}"
                                                class="mb-0">
                                            </label>

                                        </div>

                                    </td>


                                    {{-- Staff Name --}}
                                    <td>
                                        {{ $member->user_name }}
                                    </td>


                                    {{-- Email --}}
                                    <td>
                                        {{ $member->user_email }}
                                    </td>


                                    {{-- Role --}}
                                    <td>
                                        {{ $member->role->role_name ?? 'No Role' }}
                                    </td>


                                    {{-- Status --}}
                                    <td>

                                        @if($member->is_active)

                                            <span class="badge badge-success">
                                                Active
                                            </span>

                                        @else

                                            <span class="badge badge-danger">
                                                Inactive
                                            </span>

                                        @endif

                                    </td>



                                    {{-- Actions --}}
                                    <td>

                                        <div class="d-flex align-items-center list-action">

                                            {{-- View --}}
                                            <a
                                                href="{{ route('staff.show', $member->user_id) }}"
                                                class="badge badge-info mr-2"
                                                title="View"
                                                data-toggle="tooltip"
                                            >
                                                <i class="ri-eye-line mr-0"></i>
                                            </a>


                                            {{-- Edit --}}

                                            @if(auth()->user()->role && str_contains(strtolower(auth()->user()->role->role_name), 'admin'))
                                            {{-- ADMIN: REAL EDIT LINK --}}
                                             <a href="{{ route('staff.edit', $member->user_id) }}" class="badge bg-success mr-2" title="Edit" data-toggle="tooltip" >
                                                 <i class="ri-pencil-line mr-0"></i> </a>
                                                 @else
                                                 {{-- STAFF: BLOCKED ACTION --}}
                                                 <a  href="javascript:void(0)"class="badge bg-secondary mr-2" title="Edit" data-toggle="tooltip" onclick="showPermissionAlert('You cannot edit staff information. Only administrators can perform this action.')">
                                                    <i class="ri-pencil-line mr-0"></i> </a>
                                                @endif
                                            


                                            {{-- Delete --}}
                                            <form
                                                action="{{ route('staff.destroy', $member->user_id) }}"
                                                method="POST"
                                                style="display:inline;"
                                                onsubmit="return confirm('Are you sure you want to delete this staff member?');"
                                            >

                                                @csrf
                                                @method('DELETE')

                                                <button
                                                    type="submit"
                                                    class="badge bg-warning mr-2 border-0"
                                                    title="Delete"
                                                    data-toggle="tooltip"
                                                >
                                                    <i class="ri-delete-bin-line mr-0"></i>
                                                </button>

                                            </form>

                                        </div>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="8" class="text-center">
                                        No staff members found.
                                    </td>

                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

<script>
    function showPermissionAlert(message) {
        alert('⚠️ ' + message);
    }
</script>
@endsection