@extends('layouts.main')

@section('content')
    <div class="row d-flex justify-content-center align-items-center ">
        <div class="col-12 col-md-10 col-xl-8">
            <div class="card bg-transparent bg-blur box-shadow-custom rounded-s4v overflow-hiddenp-0 my-md-4 mb-3 min-h-70">
                <div class="card-header bg-white">
                    <h6 class="card-title text-center">S4V Employees Management system</h6>
                </div>
                <div class="card-body px-0 p-md-5">


                    <nav>
                        <div class="nav nav-tabs d-flex justify-content-around" id="nav-tab" role="tablist">
                            <button aria-controls="nav-home" aria-selected="true"
                                    class="nav-link text-primary active" data-bs-target="#nav-home" data-bs-toggle="tab" id="nav-home-tab"
                                    role="tab" type="button">
                                <i class="fa-solid fa-table-list"></i>
                                Employees List
                            </button>
                            <button aria-controls="nav-contact" aria-selected="false" class="nav-link text-success"
                                    data-bs-target="#nav-contact" data-bs-toggle="tab" id="nav-contact-tab"
                                    role="tab" type="button">
                                <i class="fa-solid fa-user-plus"></i> New Employee
                            </button>
                        </div>
                    </nav>
                    <div class="tab-content py-4 px-3" id="nav-tabContent">

                        <div aria-labelledby="nav-home-tab" class="tab-pane fade show active" id="nav-home"
                             role="tabpanel">

                            <div class="row justify-content-center g-1">
                                <h6 class="card-title text-muted text-center fw-light">Employees List</h6>


                                <div class="col-8 mt-4">

                                    <div class="input-group input-group-sm">
                                        <label class="input-group-text px-3 bg-white border-end-0"> <i
                                                class="fa-solid fa-magnifying-glass"></i> </label>
                                        <input aria-describedby="inputGroup-sizing-sm" aria-label="Sizing example input" class=" search-box form-control rounded-s4v"
                                               id="searchBox"
                                               placeholder="Search in the List"
                                               type="text">
                                    </div>
                                </div>
                                <div class="table-responsive col-12">
                                    <table class="table table-hover bg-transparent shadow-sm bg-blur rounded-s4v overflow-hidden"
                                           id="dataTable">
                                        <thead>
                                        <tr>
                                            <th class="text-center">
                                                Image
                                            </th>
{{--                                            <th class="text-center">--}}
{{--                                                Role--}}
{{--                                            </th>--}}
                                            <th class="text-center">
                                                Email
                                            </th>
                                            <th class="text-center">
                                               First Name
                                            </th>
                                            <th class="text-center">
                                                Last Name
                                            </th>
                                            <th class="text-center">
                                                Hours/Week
                                            </th>
                                            <th class="text-center">
                                                Modify
                                            </th>
                                            <th class="text-center">
                                                Status
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        @foreach($users as $user)

                                            <tr>
                                            <td>
                                                <a class="navbar-brand d-flex flex-row align-items-center w-100"
                                                   href="#">
                                                    <div class="profile-pic" >
                                                        <img alt="user image" class="d-inline-block w-100 h-100 align-text-top rounded-circle"
                                                             src="{{ asset('storage/' . $user->image) }}">
                                                    </div>
                                                    <span>

                                                    </span>
                                                </a>
                                            </td>
{{--                                                <td>{{ $user->role }}</td>--}}
                                                <td>{{ $user->email }}</td>
                                            <td>{{ $user->first_name }}</td>
                                            <td>{{ $user->last_name }}</td>
                                                <td class="text-center">
                                                    {{ $user->hoursPerWeek }}
                                                </td>

                                                <td class="text-center">
                                                    <form method="POST" action="{{ route('users.destroy', $user->id) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this user and all their data?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger border-0 p-0 px-1" data-bs-toggle="tooltip" data-bs-title="Delete">
                                                            <i class="fa-solid fa-trash-can"></i>
                                                        </button>
                                                    </form>
                                            </td>

                                        @if($user->role == "admin")
                                                    <td>Admin</td>
                                                @elseif($user->role == "normaluser")

                                                    <td class="text-center">
                                                        <a  href="{{ route('users.show', $user->id) }}" class="btn btn-sm btn-outline-info text-dark border-0 btn-delete p-0 px-1"
                                                            data-bs-placement="top" data-bs-title="show employee status"
                                                            data-bs-toggle="tooltip">
                                                            <i class="fa-solid fa-eye"></i>
                                                        </a>
                                                    </td>

                                                @endif




                                        </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>


                        <div aria-labelledby="nav-contact-tab" class="tab-pane fade" id="nav-contact"
                             role="tabpanel">

                            <h6 class="card-title text-muted text-center fw-light">Add new Employee</h6>

                            <form method="POST" action="{{ route('users.store') }}" enctype="multipart/form-data" id="registerForm">
                                @csrf

                                <div class="row justify-content-center">
                                    <div class="row justify-content-center g-4 my-4">

                                        <div class="form-floating">
                                            <input class="form-control" id="first_name" placeholder="Your Name"
                                                   type="text" name="first_name" required>
                                            <label class="px-4" for="first_name">First Name</label>
                                        </div>

                                        <div class="form-floating">
                                            <input class="form-control" id="last_name" placeholder="Your last name"
                                                   type="text" name="last_name" required>
                                            <label class="px-4" for="last name">Last Name</label>
                                        </div>

                                        <div class="form-floating">
                                            <input class="form-control" id="floatingInput" placeholder="name@example.com"
                                                   type="email" name="email" required>
                                            <label class="px-4" for="floatingInput">Email address</label>
                                        </div>
                                        <div class="form-floating">
                                            <input class="form-control" id="hoursPerWeek" placeholder="Hours per Week"
                                                   type="number" name="hoursPerWeek" min="0" max="168">
                                            <label class="px-4" for="hoursPerWeek">Hours per Week</label>
                                        </div>
{{--                                        <div class="form-floating">--}}
{{--                                            <input class="form-control" id="floatingPassword" placeholder="Password"--}}
{{--                                                   type="password" name="password">--}}
{{--                                            <label class="px-4" for="floatingPassword">Password</label>--}}
{{--                                        </div>--}}

                                        <div class="form-floating">
                                            <select class="form-select" id="userRole" name="role" required>
                                                <option value="" selected disabled>Select role</option>
                                                <option value="admin">Admin</option>
                                                <option value="normaluser">Normal User</option>
                                            </select>
                                            <label for="userRole" class="px-4">Role</label>
                                        </div>


                                        <div class="form-floating input-group custom-file-button rounded-top-2">
                                                <span class="input-group-text px-2 py-3">
                                                    <label class="p-0 fs-8" for="employeeImage">
                                                        <i class="fa-solid fa-camera"></i>
                                                        Employee Image</label>
                                                </span>
                                            <input class="form-control px-2 py-3" id="employeeImage" type="file" name="image" accept="image/*" required>
                                        </div>

                                        <button class="w-auto btn btn-sm btn-success px-3 rounded-s4v" type="submit">
                                            <i class="fa-solid fa-user-plus"></i>
                                            Add New Employee
                                        </button>
                                    </div>

                                </div>

                            </form>

                        </div>
                    </div>


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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const roleSelect = document.getElementById('userRole');
            const hoursInput = document.getElementById('hoursPerWeek');

            function toggleHoursField() {
                if (roleSelect.value === 'admin') {
                    hoursInput.disabled = true;
                    hoursInput.value = '';
                    hoursInput.placeholder = 'Not required for Admin';
                } else {
                    hoursInput.disabled = false;
                    hoursInput.placeholder = 'Hours per Week';
                }
            }

            roleSelect.addEventListener('change', toggleHoursField);
            toggleHoursField(); // Initial run
        });
    </script>

@endsection