@extends('layout.mainlayout')
@section('content')

    <div class="page-wrapper cardhead">
        <div class="content container-fluid">
            @component('components.breadcrumb')
                @slot('title')
                    User Management
                @endslot
            @endcomponent

            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row">
                <!-- Form Section -->
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">{{ isset($user) ? 'Edit User' : 'Add New User' }}</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ isset($user) ? route('update-user', $user->id) : route('store-user') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                @if (isset($user))
                                    @method('PUT')
                                @endif

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label>Name</label>
                                        <input type="text" name="name" class="form-control"
                                            value="{{ old('name', $user->name ?? '') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Email</label>
                                        <input type="email" name="email" class="form-control"
                                            value="{{ old('email', $user->email ?? '') }}" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label>Employee Code</label>
                                        <input type="number" name="employee_code" class="form-control"
                                            value="{{ old('employee_code', $user->employee_code ?? '') }}">
                                    </div>

                                    <div class="col-md-6">
                                        <label>Role</label>
                                        @if ($roles->isEmpty())
                                            <div class="alert alert-warning">No roles available. Please create roles first.
                                            </div>
                                        @else
                                            @php
                                                // Preselect from old input (on validation fail) or current user roles (edit)
                                                $selectedNames = collect(
                                                    old('roles', isset($user) ? $user->getRoleNames()->toArray() : []),
                                                );
                                            @endphp

                                            <select name="roles[]" class="form-control" multiple size="3">
                                                @foreach ($roles as $role)
                                                    <option value="{{ $role->name }}" @selected($selectedNames->contains($role->name))>
                                                        {{ ucfirst($role->name) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </div>



                                    <div class="col-md-6">
                                        <label>Department</label>
                                        <select name="department_id" class="form-control">
                                            <option value="">Select</option>
                                            @foreach ($departments as $dept)
                                                <option value="{{ $dept->id }}"
                                                    {{ old('department_id', $user->department_id ?? '') == $dept->id ? 'selected' : '' }}>
                                                    {{ $dept->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Designation</label>
                                        <select name="designation_id" class="form-control">
                                            <option value="">Select</option>
                                            @foreach ($designations as $desig)
                                                <option value="{{ $desig->id }}"
                                                    {{ old('designation_id', $user->designation_id ?? '') == $desig->id ? 'selected' : '' }}>
                                                    {{ $desig->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label>Profile Photo</label>
                                        <input type="file" name="profile_photo" class="form-control">
                                        @if (isset($user) && $user->profile_photo)
                                            <img src="{{ old('profile_photo', asset('storage/' . $user->profile_photo)) }}"
                                                width="100">
                                        @endif
                                    </div>


                                    <div class="col-md-6">
                                        <label>Employee Type</label>
                                        <select name="employee_type" class="form-control">
                                            <option value="">Select</option>
                                            @foreach ($employeeTypes as $type)
                                                <option value="{{ $type->id }}"
                                                    {{ old('employee_type', $user->employee_type ?? '') == $type->id ? 'selected' : '' }}>
                                                    {{ $type->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label>Status</label>
                                        <select name="status" class="form-control" required>
                                            <option value="Active"
                                                {{ old('status', $user->status ?? '') == 'Active' ? 'selected' : '' }}>
                                                Active</option>
                                            <option value="Inactive"
                                                {{ old('status', $user->status ?? '') == 'Inactive' ? 'selected' : '' }}>
                                                Inactive</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Password</label>
                                        <input type="password" name="password" class="form-control"
                                            {{ isset($user) ? '' : 'required' }}>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Confirm Password</label>
                                        <input type="password" name="password_confirmation" class="form-control"
                                            {{ isset($user) ? '' : 'required' }}>
                                    </div>

                                </div>

                                <div class="text-center">
                                    <button type="submit"
                                        class="btn btn-success">{{ isset($user) ? 'Update' : 'Create User' }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Table Section -->
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">All Users</h4>
                        </div>
                        <div class="card-body table-responsive">
                            <table class="table" id="UserTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Employee Code</th>
                                        <th>Role</th>
                                        <th>Department</th>
                                        <th>Designation</th>
                                        <th>Employee Type</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($users as $usr)
                                        <tr>
                                            <td>{{ $usr->id }}</td>
                                            <td>{{ $usr->name }}</td>
                                            <td>{{ $usr->email }}</td>
                                            <td>{{ $usr->employee_code ?? '' }}</td>
                                            <td>{{ $usr->getRoleNames()->implode(', ') }}</td>
                                            <td>{{ optional($usr->department)->name }}</td>
                                            <td>{{ optional($usr->designation)->name }}</td>
                                            <td>{{ optional($usr->employeeType)->name }}</td>
                                            <td>{{ $usr->status }}</td>
                                            <td>
                                                @can('update-user')
                                                <a href="{{ route('edit-user', $usr->id) }}"
                                                    class="btn btn-sm btn-primary">Edit</a>
                                                @endcan
                                                @can('delete-user')
                                                <a href="{{ route('delete-user', $usr->id) }}" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</a>
                                                @endcan
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        @endsection
        @push('scripts')
            <script>
                initDataTableWithFilters('UserTable');
            </script>
        @endpush