@extends('layouts.app')

@section('title', 'Organization Users')

@section('content')
<x-breadcrumb :items="[['label' => 'Organization Users']]" />

<x-page-header title="Organization Users" :subtitle="'Manage members of '.($organization->name ?? 'your organization').'.'">
    <x-slot name="actions">
        <button type="button" class="procure-btn-primary" data-toggle="modal" data-target="#addUserModal">
            <i class="fas fa-user-plus"></i> Add User
        </button>
    </x-slot>
</x-page-header>

<div class="procure-filters">
    <form method="GET" action="{{ route('organization-users.index') }}" class="row align-items-end">
        <div class="col-md-8 mb-2">
            <label class="small text-muted">Search</label>
            <div class="procure-search" style="width:100%;">
                <i class="fas fa-search"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Name or email..." style="width:100%;">
            </div>
        </div>
        <div class="col-md-4 mb-2">
            <button type="submit" class="procure-btn w-100"><i class="fas fa-filter"></i> Search</button>
        </div>
    </form>
</div>

@if(($members ?? collect())->isEmpty())
    <div class="chart-card">
        <div class="chart-card-body">
            <x-empty-state icon="fas fa-users" title="No members found" message="Add users to collaborate on procurement workflows." />
        </div>
    </div>
@else
    <div class="chart-card chart-card-auto">
        <div class="chart-card-body" style="overflow-x:auto;">
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Joined</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($members as $member)
                        @php
                            $pivot = $member->pivot ?? null;
                            $role = $pivot->role ?? 'viewer';
                            $isActive = $pivot->is_active ?? true;
                        @endphp
                        <tr>
                            <td class="font-weight-bold">{{ $member->name }}</td>
                            <td>{{ $member->email }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $role)) }}</td>
                            <td>
                                @if($isActive)
                                    <span class="expiry-badge green">Active</span>
                                @else
                                    <span class="expiry-badge red">Inactive</span>
                                @endif
                            </td>
                            <td>{{ optional($pivot->joined_at ?? null)->format('Y-m-d') ?? '—' }}</td>
                            <td class="text-right text-nowrap">
                                <button type="button" class="procure-btn" title="Edit"
                                    data-toggle="modal" data-target="#editUserModal{{ $member->id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="procure-btn text-danger" title="Remove"
                                    onclick="confirmAction({
                                        title: 'Remove User',
                                        message: 'Remove {{ addslashes($member->name) }} from this organization?',
                                        confirmText: 'Remove',
                                        onConfirm: function() { document.getElementById('delete-user-{{ $member->id }}').submit(); }
                                    })">
                                    <i class="fas fa-trash"></i>
                                </button>
                                <form id="delete-user-{{ $member->id }}" action="{{ route('organization-users.destroy', $member) }}" method="POST" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if(method_exists($members, 'links'))
            <div class="px-3 pb-3">{{ $members->withQueryString()->links() }}</div>
        @endif
    </div>

    {{-- Edit modals must be outside <table> or the browser breaks the layout --}}
    @foreach($members as $member)
        @php
            $pivot = $member->pivot ?? null;
            $role = $pivot->role ?? 'viewer';
            $isActive = $pivot->is_active ?? true;
        @endphp
        <div class="modal fade" id="editUserModal{{ $member->id }}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <form method="POST" action="{{ route('organization-users.update', $member) }}" class="modal-content" style="border-radius:12px;border:none;">
                    @csrf
                    @method('PATCH')
                    <div class="modal-header border-0 pb-0">
                        <h5 class="modal-title">Edit {{ $member->name }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <label class="font-weight-bold d-block">Role</label>
                            <select name="role" class="form-control w-100" required style="border-radius:8px;">
                                @foreach($roles ?? [] as $r)
                                    <option value="{{ $r->value }}" @selected($role === $r->value)>{{ $r->label() }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="active{{ $member->id }}"
                                   name="is_active" value="1" @checked($isActive)>
                            <label class="custom-control-label" for="active{{ $member->id }}">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                        <button type="submit" class="btn btn-primary" style="border-radius:8px;">Save</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
@endif

{{-- Add User Modal --}}
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <form method="POST" action="{{ route('organization-users.store') }}" class="modal-content" style="border-radius:12px;border:none;">
            @csrf
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title">Add User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label class="font-weight-bold d-block">Name <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control w-100" value="{{ old('name') }}" required style="border-radius:8px;">
                </div>
                <div class="form-group mb-3">
                    <label class="font-weight-bold d-block">Email <span class="text-danger">*</span></label>
                    <input type="email" name="email" class="form-control w-100" value="{{ old('email') }}" required style="border-radius:8px;">
                </div>
                <div class="form-group mb-3">
                    <label class="font-weight-bold d-block">Password</label>
                    <input type="password" name="password" class="form-control w-100" style="border-radius:8px;">
                    <small class="text-muted">Leave blank to auto-generate.</small>
                </div>
                <div class="form-group mb-0">
                    <label class="font-weight-bold d-block">Role <span class="text-danger">*</span></label>
                    <select name="role" class="form-control w-100" required style="border-radius:8px;">
                        @foreach($roles ?? [] as $r)
                            <option value="{{ $r->value }}" @selected(old('role') === $r->value)>{{ $r->label() }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                <button type="submit" class="btn btn-primary" style="border-radius:8px;">Add User</button>
            </div>
        </form>
    </div>
</div>
@endsection