@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="" style="width:80%; margin:0 auto;">
                <div class="">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                {!! $data['pageTitle'] !!}
                            </div>


                            <div class="panel-options">
                                <a href="{!! $data['addBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon"></i>{{ $data['addBtnLabel'] }}</a>
                            </div>


                        </div>
                        <div class="panel-body panelBodyView">
                            <table class="table table-striped table-bordered table-condensed first-col-dark"
                                style="width:100%" id="data-table">
                                <thead>
                                    <tr>
                                        <th width="30">SL#</th>
                                        <th>Department Name</th>
                                        <th>Team Name</th>
                                        <th>Employees</th>
                                        <th style="width: 80px">Action</th>
                                    </tr>
                                </thead>
                                @php $sl = 1; @endphp

                                <tbody>
                                    @foreach ($data['teams'] as $team)
                                        <tr>
                                            <td>{{ $sl++ }}</td>
                                            <td>{{ $team->department_name }}</td>
                                            <td>{{ $team->name }}</td>
                                            <td>{{ $team->employee_names }}</td>



                                            <td class="text-center">
                                                <a class="edit-modal" entryId="{{ $team->id }}"
                                                    style="cursor: pointer; padding-right: 5px;">
                                                    <span class="glyphicon glyphicon-edit"></span>
                                                </a>
                                                <a href="javascript:;" class="delete-modal" entryId="{{ $team->id }}"
                                                    style="cursor: pointer;">

                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>


                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div id="editModal" class="modal fade" tabindex="-1" role="dialog" style="margin-top: 5%;">


                <div class="modal-dialog" role="dialog" style="width: 80%;">

                    <div class="panel panel-default panel-border">

                        <!-- Modal Header -->
                        <div class="panel-heading">
                            <h4 class="panel-title" style="margin-left: 15px; margin-top: 10px;">Update
                                Team</h4>
                        </div>

                        <!-- Modal Body -->
                        <div class="modal-body" style="padding: 30px 15px;"> <!-- Reduced left & right padding -->

                            <!-- Select2 Styles -->
                            <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
                                rel="stylesheet" />

                            <div class="panel panel-default panel-border">
                                <div class="panel-body">

                                    <!-- Hidden Field -->


                                    <!-- Form Start -->
                                    {!! Form::open([
                                        'files' => false,
                                        'id' => 'formId',
                                        'role' => 'form',
                                        'class' => 'form-horizontal form-groups',
                                    ]) !!}
                                    <input type="hidden" id="EMentryId" name="id">
                                    <!-- Project & Employee Row -->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="col-md-4 col-md-offset-2 text-left">
                                                {!! Form::label('project_id', 'Project:', ['class' => 'control-label']) !!}
                                                {!! Form::select('project_id', ['' => 'Select Project'] + $data['project_id'], null, [
                                                    'class' => 'form-control',
                                                    'id' => 'project_id',
                                                ]) !!}
                                                <p id='project_id' style="max-height:3px;">
                                                    {{ $errors->first('project_id') }}
                                                </p>
                                            </div>
                                            <div class="col-md-4 text-left">
                                                {!! Form::label('department_id', 'Department:', ['class' => 'control-label']) !!}
                                                {!! Form::select(
                                                    'department_id',
                                                    ['' => 'Select Department'] + $data['department_id'],
                                                    null,

                                                    [
                                                        'class' => 'form-control',
                                                        'id' => 'department_id',
                                                    ],
                                                ) !!}
                                                <p id="department_id_error" style="max-height:3px;">
                                                    {{ $errors->first('department_id') }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="margin-top: 30px;">
                                        <div class="col-md-12">
                                            <div class="form-group row text-center">
                                                <div class="col-md-6 col-md-offset-3">
                                                    <label for="name" class="control-label col-md-2 text-left">Team
                                                        Name:</label>
                                                    <div class="col-md-7">
                                                        {!! Form::text('name', null, ['class' => 'form-control', 'id' => 'name']) !!}
                                                        <p id="name_error" style="margin: 2px 0 0; color: red;">
                                                            {{ $errors->first('name') }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="col-md-12"style="margin-top: 30px;">
                                                <div class="form-group row text-center">
                                                    <div class="col-md-6 col-md-offset-3">
                                                        <label for="name" class="control-label col-md-2 text-left">
                                                            Employee:</label>
                                                        <div class="col-md-7">
                                                            {!! Form::select('emp_id', ['' => 'Select Employee'], null, [
                                                                'class' => 'form-control',
                                                                'id' => 'emp_id',
                                                            ]) !!}

                                                        </div>
                                                        <p id="emp_id_error" style="max-height:3px;">
                                                            {{ $errors->first('emp_id') }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group text-center" style="margin-top: 30px;">

                                                {!! Form::submit('Update', ['id' => 'updateButton', 'class' => 'btn btn-info updateButton']) !!}

                                                <a href="{{ url('hr/assessment/teams/') }}"
                                                    class="btn btn-danger closeBtn">Close</a>
                                                <span id="success" class="pull-right text-success"
                                                    style="font-size: 16px;"></span>
                                            </div>
                                        </div>

                                        <!-- update & Close -->


                                        {!! Form::close() !!}
                                    </div>
                                </div>

                            </div> <!-- /.modal-body -->

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

            <div id="deleteModal" class="modal fade" style="margin-top:3%;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"
                                style="clear:both;background-color:black;color:white; padding:10px;text-align:center;">
                                Delete Team</h4>
                        </div>
                        <div class="modal-body ">
                            {{-- <div class="row" style="padding-bottom:20px;"> </div> --}}
                            <h2 style="color: red;">Are You Confirm to Delete This Record?</h2>
                            <div class="modal-footer">
                                <input id="DMentryId" type="hidden" value="" />
                                <button type="button" class="btn btn-danger" id="DMentry"
                                    data-dismiss="modal">confirm</button>
                                <button type="button" class="btn btn-warning" data-dismiss="modal"><span
                                        class="glyphicon glyphicon-remove"
                                        style="padding-right:4px;"></span>Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endsection
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

        @section('footerAssets')



            <script>
                $(document).ready(function() {
                    // When clicking the edit modal
                    $(document).on('click', '.edit-modal', function() {
                        let entryId = $(this).attr('entryId');
                        let csrf = "{{ csrf_token() }}";
                        $("#EMentryId").val(entryId);

                        $.ajax({
                            url: '{{ url('hr/assessment/teams/edit') }}',
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: entryId,
                                _token: csrf
                            },
                            success: function(data) {
                                let team = data.editTeam;
                                let selectedEmpIds = data.selectedEmployees;

                                // Show modal
                                $('#editModal').modal('show');

                                // Load employee dropdown first if needed
                                $('#project_id').val(team.project_id).trigger('change');
                                $('#name').val(team.name).trigger('change');
                                $('#department_id').val(team.department_id).trigger('change');

                                // Wait for employee list to load before setting selected
                                setTimeout(function() {
                                    $('#emp_id').val(selectedEmpIds).trigger('change');
                                }, 500); // adjust delay as needed
                            }
                        });
                    });

                    // When changing project (manually or programmatically), load employees
                    $('#project_id').on('change', function() {
                        var projectId = $(this).val();
                        if (projectId) {
                            $.ajax({
                                url: '{{ url('hr/assessment/teams/get-employees-by-project') }}',
                                type: 'POST',
                                data: {
                                    project_id: projectId,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(data) {
                                    let options = '';
                                    $.each(data, function(empId, name) {
                                        options += '<option value="' + empId + '">' + name +
                                            '</option>';
                                    });

                                    // Destroy previous Select2 and replace with multi-select
                                    $('#emp_id').select2('destroy');

                                    // Replace the original <select> with a multi-select version
                                    $('#emp_id')
                                        .attr('multiple', 'multiple')
                                        .attr('name',
                                            'emp_id[]') // Make sure Laravel treats it as array
                                        .html(options);

                                    // Reinitialize select2 as multi-select
                                    $('#emp_id').select2({
                                        placeholder: 'Select Employee',
                                        allowClear: true,
                                        closeOnSelect: false
                                    });
                                },
                                error: function() {
                                    toastr.error('Could not fetch employees.');
                                }
                            });
                        } else {
                            $('#emp_id').select2('destroy');
                            $('#emp_id')
                                .removeAttr('multiple')
                                .attr('name', 'emp_id')
                                .html('<option value="">Select Employee</option>');
                            $('#emp_id').select2({
                                placeholder: 'Select Employee',
                                allowClear: true
                            });
                        }
                    });

                    // Select2 initialization
                    $('#project_id').select2({
                        placeholder: 'Select Project',
                        width: '100%'
                    });

                    $('#emp_id').select2({
                        placeholder: 'Select Employee',
                        width: '100%'
                    });

                    $('#department_id').select2({
                        placeholder: 'Select Department',
                        width: '100%',
                        allowClear: true
                    });


                    $(document).on('click', '.delete-modal', function() {
                        let entryId = $(this).attr('entryId');
                        $("#DMentryId").val(entryId);
                        $('#deleteModal').modal('show');
                    });

                    $("#DMentry").on('click', function() {
                        var entryId = $("#DMentryId").val();

                        var csrf = "{{ csrf_token() }}";
                        $.ajax({
                                url: '{{ url('hr/assessment/teams/deleteTeam') }}',
                                type: 'POST',
                                dataType: 'json',
                                data: {
                                    id: entryId,
                                    _token: csrf
                                },
                            })
                            .done(function(data) {
                                if (data.success) {
                                    toastr.success(data.message);
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    toastr.error(data.message || 'Delete failed.');
                                }
                            })
                            .fail(function() {
                                console.log("error");
                            });
                    });
                    $('#updateButton').on('click', function(event) {
                        event.preventDefault();
                        let form = $(this).closest('form');
                        let formData = new FormData(form[0]);
                        let entryId = $('#EMentryId').val(); // Get the ID from hidden input
                        console.log(entryId);

                        form.find('.error.text-danger').remove(); // Remove previous error messages

                        $.ajax({
                            type: 'POST',
                            url: '{{ url('hr/assessment/teams/update') }}',
                            data: formData,
                            dataType: 'json',
                            processData: false,
                            contentType: false,
                            headers: {
                                'X-CSRF-Token': "{{ csrf_token() }}",
                            },
                            success: function(response) {
                                if (response.errors) {
                                    $.each(response.errors, function(name, error) {
                                        let field = $('[name="' + name + '"]');
                                        field.after("<p class='error text-danger'>* " + error[
                                            0] + "</p>");
                                    });
                                } else {
                                    if (response.responseTitle === 'Warning!') {
                                        toastr.warning(response.responseText, response.responseTitle);
                                    } else {
                                        toastr.success(response.responseText, response.responseTitle);
                                        setTimeout(function() {
                                            window.location.href =
                                                "{{ url('hr/assessment/teams/') }}";
                                        }, 1000);
                                    }
                                }
                            },
                            error: function() {
                                toastr.error('Something went wrong.');
                            }
                        });
                    });



                });
            </script>
        @endsection