@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4">
    <!-- Header Tab -->
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl">
        <i class="fa-solid fa-list-ul mr-2"></i> 
        <span>User Manager</span>
    </div>

    <!-- Main Container -->
    <div class="bg-white shadow-sm min-h-[600px] border border-gray-200 border-t-0 flex flex-col">
        
        <!-- Top Toolbar -->
        <div class="flex items-center space-x-6 p-4 border-b border-gray-100 flex-wrap gap-y-2">
            <form id="managerForm" method="GET" action="{{ route('hardware_setup.manager') }}" class="flex items-center space-x-2">
                <input type="hidden" name="machine_type_id" value="{{ $machineTypeId }}">
                <label class="text-xs font-bold text-gray-800">Devices:</label>
                <select name="machine_id" onchange="document.getElementById('managerForm').submit()" class="border border-gray-300 px-3 py-1 text-sm focus:outline-none w-48">
                    <option value="">Select Machine...</option>
                    @foreach($machines as $machine)
                        <option value="{{ $machine->id }}" {{ ($selectedMachine && $selectedMachine->id == $machine->id) ? 'selected' : '' }}>
                            {{ $machine->machine_name ?? 'Machine ' . $machine->machine_no }}
                        </option>
                    @endforeach
                </select>
            </form>
            
            <div class="flex items-center space-x-2">
                <label class="text-xs font-bold text-gray-800">Serial No:</label>
                <span class="text-sm">{{ $selectedMachine->serial_no ?? 'N/A' }}</span>
            </div>

            <div class="flex items-center space-x-2">
                <label class="text-xs font-bold text-gray-800">Status:</label>
                <div class="w-4 h-4 rounded-full bg-red-600 shadow-inner border border-gray-300"></div>
            </div>

            <div class="flex-1 flex justify-end space-x-2">
                <button class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold">Connect</button>
                <button class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold">Get User List</button>
                <select class="border border-gray-300 px-3 py-1.5 text-sm focus:outline-none w-24">
                    <option></option>
                </select>
            </div>
        </div>

        <!-- Result Message Bar -->
        <div class="bg-[#ff7043] text-white px-4 py-2 text-sm font-semibold shadow-sm">
            Result Message : 
        </div>

        <!-- Split Content Area -->
        <div class="flex flex-col md:flex-row flex-1">
            <!-- Left Side: User Profile -->
            <div class="w-full md:w-1/4 border-r border-gray-200 p-4 space-y-4">
                <div>
                    <div class="bg-[#ff7043] text-white text-xs font-bold px-3 py-1.5 inline-block mb-2 shadow-sm rounded-sm">View Photo :</div>
                    <div class="w-32 h-32 border-2 border-gray-300 bg-gray-50 shadow-inner rounded flex items-center justify-center text-gray-400">
                        <i class="fa-solid fa-user text-4xl"></i>
                    </div>
                </div>

                <div class="space-y-3 mt-6">
                    <div class="flex items-center justify-between">
                        <label class="text-xs font-bold text-gray-800 w-1/3">User Type</label>
                        <select class="w-2/3 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                            <option>USER</option>
                            <option>ADMIN</option>
                        </select>
                    </div>
                    <div class="flex items-center justify-between">
                        <label class="text-xs font-bold text-gray-800 w-1/3">ID :</label>
                        <input type="text" class="w-2/3 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div class="flex items-center justify-between">
                        <label class="text-xs font-bold text-gray-800 w-1/3">Name :</label>
                        <input type="text" class="w-2/3 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                    <div class="flex items-center justify-between">
                        <label class="text-xs font-bold text-gray-800 w-1/3">Pin :</label>
                        <input type="text" class="w-2/3 border border-gray-300 px-2 py-1 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    </div>
                </div>
            </div>

            <!-- Right Side: Data Table -->
            <div class="w-full md:w-3/4 p-4 flex flex-col">
                <!-- Search Inputs -->
                <div class="flex flex-wrap md:flex-nowrap space-y-2 md:space-y-0 md:space-x-4 mb-4">
                    <input type="text" placeholder="Search Branch/Location" class="border border-gray-300 px-3 py-2 text-xs w-full md:w-1/3 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    <input type="text" placeholder="Search Department" class="border border-gray-300 px-3 py-2 text-xs w-full md:w-1/3 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                    <input type="text" placeholder="Employee Biometric Id" class="border border-gray-300 px-3 py-2 text-xs w-full md:w-1/3 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                </div>

                <!-- Table -->
                <div class="flex-1 overflow-auto border border-gray-200">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-[#ff7043] text-white">
                                <th class="p-3 text-xs font-bold border-r border-orange-400">Select</th>
                                <th class="p-3 text-xs font-bold">EnrollNumber</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Empty State for now -->
                            <tr>
                                <td colspan="2" class="p-8 text-center text-gray-500 text-sm">Please connect to a device to fetch user list.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection