@extends('admin.layout')



@section('content')

    <style>

        .table tbody tr td:last-child {

            text-align: center !important;

        }



        .table tbody tr td:last-child {

            text-align: center !important;

        }

    </style>



    <div class="page-header">

        <h4 class="page-title mb-0">Staff</h4>

    </div>

    <div class="row mt-2 d-flex justify-content-center">

        <div class="col-lg-12">

            <div class="card">

                <div class="card-body">

                    <!-- Filter Options -->

                    {{-- <div class="row mt-3">

                                <div class="col-lg-12">

                                    <form id="filter-form">

                                        <div class="form-group row">

                                            <div class="col-lg-3">

                                                <label for="date_from" class="form-label">Date From:</label>

                                                <input type="date" class="form-control" id="date_from" name="date_from">

                                            </div>

                                            <div class="col-lg-3">

                                                <label for="date_to" class="form-label">Date To:</label>

                                                <input type="date" class="form-control" id="date_to" name="date_to">

                                            </div>

                                            <div class="col-lg-3">

                                                <label for="user_id" class="form-label">Search User ID:</label>

                                                <input type="text" class="form-control" id="user_id" name="user_id" placeholder="Enter User ID">

                                            </div>

                                            <div class="col-lg-3 align-self-end mt-2">

                                                <button type="submit" class="btn btn-primary">

                                                    <i class="fas fa-search"></i> Filter

                                                </button>

                                            </div>

                                        </div>

                                    </form>

                                </div>

                            </div> --}}

                    <!-- Table -->

                    <!-- Button to trigger modal -->

                    <div class="row mt-3">

                        <div class="col-lg-12 d-flex justify-content-end mt-2">

                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"

                                data-bs-target="#exampleModal">

                                <i class="fas fa-plus"></i> Add

                            </button>

                        </div>

                    </div>



                    <!-- Modal -->

                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"

                        aria-hidden="true">

                        <div class="modal-dialog modal-dialog-centered">

                            <div class="modal-content">

                                <div class="modal-header">

                                    <h5 class="modal-title" id="exampleModalLabel">Add User</h5>

                                    <button type="button" class="btn-close" data-bs-dismiss="modal"

                                        aria-label="Close"></button>

                                </div>

                                <form method="POST" action="{{ route('add_staff') }}">

                                @csrf

                                    <div class="modal-body">

                                        <!-- Name Field -->

                                        <div class="mb-3">

                                            <label for="name" class="form-label">Staff Id</label>

                                            <input type="text" class="form-control" id="user_id" name="user_id"

                                                required>

                                        </div>

                                        <div class="mb-3">

                                            <label for="name" class="form-label">Name</label>

                                            <input type="text" class="form-control" id="name" name="name"

                                                required>

                                        </div>



                                        <!-- Phone Field -->

                                        <div class="mb-3">

                                            <label for="phone" class="form-label">Phone</label>

                                            <input type="text" class="form-control" id="phone_number" name="phone_number"

                                                required>

                                        </div>



                                        <!-- Email Field -->

                                        <div class="mb-3">

                                            <label for="email" class="form-label">Email</label>

                                            <input type="email" class="form-control" id="email" name="email"

                                                required>

                                        </div>



                                        <!-- Password Field -->

                                        <div class="mb-3 position-relative">

                                            <label for="password" class="form-label">Password</label>

                                            <input type="password" class="form-control" id="password" name="password"

                                                required>

                                            <button type="button" id="togglePassword"

                                                class="position-absolute translate-middle-y"

                                                style="right: 20px;background: transparent;border: none;top: 46px;">

                                                <i class="fas fa-eye" id="eye-icon"></i>

                                            </button>

                                        </div>



                                        <!-- Designation Field -->

                                       <div class="mb-3">

                                      <label for="designation" class="form-label">Designation</label>

                                       <select class="form-control" id="designation" name="designation" required>

                                        <option value="" disabled selected>Select Designation</option>

                                        <option value="dev">Developer</option>

                                        <option value="manager">Manager</option>

                                        <option value="staff">Staff</option>

                                        <option value="tester">Tester</option>

                                        <option value="intern">Intern</option>

                                         <option value="Sales">Sales</option>

                                           <option value="pc">Project Coordinator</option>

                                       </select>

                                   </div>

                                    </div>

                                    <div class="modal-footer">

                                        <button type="submit" class="btn btn-primary">Submit</button>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>





                    <div class="table-responsive mt-3">

                        <table id="datatable" class="datatables display table" style="min-width: 845px">

                            <thead>

                                <tr>

                                    <th>#</th>

                                    <th>Date of Joining</th>

                                    <th>Staff ID</th>

                                    <th>Name</th>

                                    <th>email</th>

                                    <th>Phone Number</th>

                                    <th>designation</th>

                                    <th>Action</th>

                                </tr>

                            </thead>

                            @php

                        $sn = 1;

                    @endphp

                    <tbody>

                        @foreach ($datatables as $data)

                            <tr>

                                <td>{{ $loop->iteration }}</td>

                                <td>{{ $data->created_at }}</td>

                                <td>{{ $data->user_id }}</td>

                                <td>{{ $data->name }}</td>

                                <td>{{ $data->email }}</td>

                                <td>{{ $data->phone_number }}</td>

                                <td>{{ $data->designation }}</td>

                                <td>

                                <a href="{{ route('edit_staff', ['id' => $data->id]) }}" style="display:inline-block; padding:4px 8px; background-color:#007bff; color:#fff; text-decoration:none; border-radius:4px; font-size:12px; margin-right:5px;">View</a>



                                 <a href="#" 

                                 onclick="confirmDelete('{{ route('delete_staff', ['id' => $data->id]) }}')" 

                                 style="display:inline-block; padding:4px 8px; background-color:#dc3545; color:#fff; text-decoration:none; border-radius:4px; font-size:12px;">

                                 Delete

                                 </a>



                                </td>

                                <!-- <td>View</td> -->

                                </tr>

                            @endforeach



                        </tbody>



                        </table>



                    </div>

                </div>

            </div>

        </div>

    </div>





    <!-- Include jQuery -->

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>



    <!-- Initialize DataTable -->

    <script>

        $(document).ready(function() {

            $('#datatable').DataTable({

                "language": {

                    "paginate": {

                        "previous": '<i class="fa-solid fa-angle-left"></i>',

                        "next": '<i class="fa-solid fa-angle-right"></i>'

                    }

                }

            });

        });

    </script>

    <!-- JavaScript to toggle password visibility -->

    <script>

        const togglePassword = document.getElementById('togglePassword');

        const passwordField = document.getElementById('password');

        const eyeIcon = document.getElementById('eye-icon');



        togglePassword.addEventListener('click', function(e) {

            // Toggle the password visibility

            if (passwordField.type === 'password') {

                passwordField.type = 'text';

                eyeIcon.classList.remove('fa-eye');

                eyeIcon.classList.add('fa-eye-slash');

            } else {

                passwordField.type = 'password';

                eyeIcon.classList.remove('fa-eye-slash');

                eyeIcon.classList.add('fa-eye');

            }

        });

    </script>



    <script>

function confirmDelete(deleteUrl) {

    const userInput = prompt("Type DELETE to confirm:");



    if (userInput === 'DELETE') {

        // Redirect to delete URL

        window.location.href = deleteUrl;

    } else {

        alert("Deletion cancelled or wrong input.");

    }

}

</script>

@endsection