@extends('backend.layouts.app')
@section('content')
    <div class="content">
        <div class="block block-rounded">
            <div class="block-header block-header-default">
                <h3 class="block-title">
                    Employee Table
                </h3>
                <button type="button" class="btn btn-alt-primary" data-bs-toggle="modal" data-bs-target="#add_modal"><i
                        class="fa fa-plus mr-5"></i> Add Employee</button>
            </div>

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

            <div class="block-content block-content-full">
                <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
                    <thead>
                        <tr>
                            <th class="text-center">S/L &nbsp;</th>
                            <th class="text-center">Employee Name &nbsp;</th>
                            <th class="text-center">Email &nbsp;</th>
                            <th class="text-center">Phone &nbsp;</th>
                            <th class="text-center">Action &nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $sl = 1; @endphp
                        @foreach ($all_employee as $employee)
                            <tr>
                                <td class="text-center">{{ $sl++ }}</td>
                                <td class="text-center">{{ $employee->employee_id }}<br>{{ $employee->name }}</td>
                                <td class="text-center">{{ $employee->email }}</td>
                                <td class="text-center">{{ $employee->phone ? $employee->phone : 'N/A' }}</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <form action="{{ route('employee.destroy', $employee->id) }}" method="post"
                                            accept-charset="utf-8">
                                            <a data-bs-toggle="modal" data-bs-target="#edit_modal" id="editemployee"
                                                data="{{ $employee->id }}"
                                                class="btn btn-sm btn-info js-bs-tooltip-enabled">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            @csrf
                                            @method('delete')
                                            <button type="submit"
                                                class="btn btn-sm btn-danger js-bs-tooltip-enabled delete-confirm">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Modal -->
    <div class="modal" id="add_modal" tabindex="-1" role="dialog" aria-labelledby="modal-large" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="block block-rounded shadow-none mb-0">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Add Employee</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <form action="{{ route('employee.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Employee Name <span class="text-danger">*</span></label>
                                <div class="col-lg-12">
                                    <input type='text' class="form-control" required name="name"
                                        placeholder="Employee Name">
                                </div>
                            </div>
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Email <span class="text-danger">*</span></label>
                                <div class="col-lg-12">
                                    <input type='email' class="form-control" required name="email"
                                        placeholder="Employee Email">
                                </div>
                            </div>
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Phone </label>
                                <div class="col-lg-12">
                                    <input type='tel' class="form-control" name="phone" placeholder="Employee Phone">
                                </div>
                            </div>

                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Details </label>
                                <div class="col-lg-12">
                                    <textarea class="form-control" name="details" placeholder="Details"></textarea>
                                </div>
                            </div>
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Password <span class="text-danger">*</span></label>
                                <div class="col-lg-12">
                                    <input type='password' class="form-control" required name="m_password"
                                        placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group text-center mt-4 mb-4">
                                <button type="submit" class="btn btn-square btn-primary min-width-125">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END Add Modal -->

    <!-- Edit Modal -->
    <div class="modal" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="modal-large"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="block block-rounded shadow-none mb-0">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Update Employee</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content fs-sm">
                        <form action="{{ route('employee.update') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" id="employee_id">
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Employee Name <span class="text-danger">*</span></label>
                                <div class="col-lg-12">
                                    <input type='text' class="form-control" required name="name" id="name"
                                        placeholder="Employee Name">
                                </div>
                            </div>
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Email <span class="text-danger">*</span></label>
                                <div class="col-lg-12">
                                    <input type='email' class="form-control" id="email" required name="email"
                                        placeholder="Employee Email">
                                </div>
                            </div>
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Phone </label>
                                <div class="col-lg-12">
                                    <input type='tel' class="form-control" id="phone" name="phone"
                                        placeholder="Employee Phone">
                                </div>
                            </div>

                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Details </label>
                                <div class="col-lg-12">
                                    <textarea class="form-control" name="details" id="details" placeholder="Details"></textarea>
                                </div>
                            </div>
                            <div class="form-group row pb-2">
                                <label class="col-12 pb-2">Password </label>
                                <div class="col-lg-12">
                                    <input type='password' class="form-control" name="n_password"
                                        placeholder="Password (if need changes)">
                                </div>
                            </div>
                            <div class="form-group text-center mt-4 mb-4">
                                <button type="submit" class="btn btn-square btn-primary min-width-125">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END Edit Modal -->
@endsection
@section('script')
    <script type="text/javascript">
        $(document).on("click", "#editemployee", function() {
            let id = $(this).attr("data");
            $.ajax({
                url: "/admin/employee/edit/" + id,
                type: "get",
                dataType: "json",
                success: function(response) {
                    $("#employee_id").val(response.id);
                    $("#name").val(response.name);
                    $("#email").val(response.email);
                    $("#phone").val(response.phone);
                    $("#details").val(response.details);
                }
            })
        })
    </script>
@endsection