@extends('admin.layouts.layouts')

@section('title', 'Hr Policy')

@section('content')
   <div class="page-header">
        <h3 class="page-title">Hr Policy</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item">CMS</li>
                <li class="breadcrumb-item" aria-current="page">Hr Policy</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                {!! Form::open([
                    'route' => 'hr-policy.update',
                    'method' => 'POST',
                    'id' => 'hrPolicyForm',
                    'class' => 'forms-sample',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                    @csrf
                    <div class="card-body">
                        <input type="hidden" name="id" id="id" value="{{ $currentHrPolicy->id ?? '' }}">

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="effective_date" class="form-label">Effective From <span class="text-danger">*</span></label>
                                <input type="month" class="form-control" id="effective_date" name="effective_date"
                                value="{{ old('effective_date', isset($currentHrPolicy?->effective_date) ? date('Y-m', strtotime($currentHrPolicy?->effective_date)) : '') }}"
                                required data-parsley-required data-parsley-required-message="Please select effective from"
                                data-parsley-errors-container='#effective_date_error'>
                                <span class="text-danger" id="effective_date_error"></span>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="description" class="form-label">Hr Policy <span
                                        class="text-danger">*</span></label>
                                <textarea name="description" id="description" rows="6" placeholder="Enter Hr Policy" class="form-control"
                                    data-parsley-required data-parsley-trigger='keyup' data-parsley-required-message="Please enter hr policy"
                                    data-parsley-errors-container='#description_error'>{{ old('description', $currentHrPolicy?->description ?? '') }}</textarea>
                                <span class="text-danger" id="description_error">{{ $errors->first('description') }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary mr-2" id="updateHrPolicy">Update</button>
                        <a href="{{ route('transporter.index') }}" class="btn btn-light">Cancel</a>
                    </div>

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

     <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Hr Policy History</h5>
            </div>
            <div class="card-body">
                @if($hrPolicies->isEmpty())
                    <p style="text-align: center; font-weight: bold;">No Hr Policy found.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover" id="hrPolicyTable">
                            <thead>
                                <tr>
                                    <th>Effective Month</th>
                                    <th>Created At</th>
                                    <th>Created By</th>
                                    <th>Updated At</th>
                                    <th>Updated By</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($hrPolicies as $hrPolicy)
                                    <tr>
                                        <td>{{ date('F, Y', strtotime($hrPolicy->effective_date)) }}</td>
                                        <td>{{ $hrPolicy->created_at->format('d-m-Y') }}</td>
                                        <td>{{ $hrPolicy->creator->name }}</td>
                                        <td>{{ isset($hrPolicy->updated_by) ? $hrPolicy->updated_at->format('d-m-Y') : '-' }}</td>
                                        <td>{{ isset($hrPolicy->updated_by) ? $hrPolicy->editor->name : '-' }}</td>
                                        <td>
                                            <a href="{{ route('hr-policy.show', $hrPolicy->id) }}" class="btn btn-icon btn-dark">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var hrPolicyUpdate = "{{ route('hr-policy.update') }}";

        // Ck Editor Code
        CKEDITOR.replace("description", {
            height: '400px'
        });

        CKEDITOR.on("instanceReady", function() {
            $.each(CKEDITOR.instances, function(instance) {
                CKEDITOR.instances[instance].on("change", function(e) {
                    for (instance in CKEDITOR.instances) {
                        CKEDITOR.instances[instance].updateElement();
                    }
                });
            });
        });

        $(document).ready(function () {
            $('#hrPolicyTable').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "columnDefs": [
                    { orderable: false, targets: '_all' },
                ]
            });

            $("#hrPolicyForm").parsley();
            $('#hrPolicyForm').on('submit', function(e) {
                e.preventDefault();

                if ($("#hrPolicyForm").parsley().isValid()) {
                    // Get the form data
                    let formData = new FormData(this);

                    // Show loading indicator
                    $('#updateHrPolicy').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');

                    $.ajax({
                        url: hrPolicyUpdate,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data) {
                            // Handle success data
                            if(data.success) {
                                toastr.success(data.message);
                                setTimeout(function() {
                                    window.location.reload();
                                }, 3000);
                            } else {
                                toastr.error(data.message);
                            }
                        },
                        error: function (response) {
                            $('.text-danger').text('');
                            $.each(response.responseJSON.errors, function(field, messages) {
                                $('#'+field+'_error').text(messages[0]);
                                // let errorSpan = $('#' + field + '_error');

                                // if (errorSpan.length) {
                                //     errorSpan.text(messages[0]);
                                // } else {
                                //     // fallback: show toast if span not found
                                //     toastr.error(messages[0]);
                                // }
                            });
                        },
                        // error: function(xhr) {
                        //     // Handle validation errors
                        //     if(xhr.status === 422) {
                        //         let errors = xhr.responseJSON.errors;
                        //         let errorMessages = '';

                        //         $.each(errors, function(key, value) {
                        //             errorMessages += value[0] + '<br>';
                        //         });

                        //         toastr.error(errorMessages);
                        //     } else {
                        //         toastr.error('An error occurred. Please try again.');
                        //     }
                        // },
                        complete: function() {
                            // Re-enable the button
                            $('#updateHrPolicy').prop('disabled', false).html('Update');
                        }
                    });
                } else {
                    return false;
                }
            });
        });

    </script>
@endsection