@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Manual Crons</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Manual Crons
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="p-1 border-bottom">
                        <form>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-label-group">
                                        <label class="form-label">Cron</label>
                                        <select name="cron" class="form-control">
                                            @foreach ($cronList as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-label-group">
                                        <label class="form-label">From Date</label>
                                        <input type="date" name="from_date" class="form-control"
                                            max="{{ $manualCronToDate }}">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-label-group">
                                        <label class="form-label">To Date</label>
                                        <input type="date" name="to_date" class="form-control" max="{{ $manualCronToDate }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-label-group">
                                        <label class="form-label">Employees</label>
                                        <select name="employee_ids[]" id="employee_ids" class="form-control select2"
                                            multiple>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-label-group">
                                        <button type="submit" class="mt-2 btn btn-primary"> Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-responsive">
                                    <thead>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>From Date</th>
                                        <th>To Date</th>
                                        <th>Started At</th>
                                        <th>Stopped At</th>
                                        <th>Created At</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </thead>
                                    <tbody>
                                        @foreach ($crons as $key => $cron)
                                            <tr>
                                                <td>{{ $crons->firstItem() + $key }}</td>
                                                <td>{{ $cronList[$cron->cron] }}</td>
                                                <td>{{ $cron->from_date }}</td>
                                                <td>{{ $cron->to_date }}</td>
                                                <td>{{ $cron->started_at }}</td>
                                                <td>{{ $cron->stopped_at }}</td>
                                                <td>{{ $cron->created_at }}</td>
                                                <td>
                                                    {{ ucfirst($cron->status) }}
                                                </td>
                                                <td>
                                                    @if ($cron->status == 'pending')
                                                        <button class="btn btn-danger btn-sm"
                                                            onclick="confirmCancel({{ $cron->id }}, '{{ addslashes($cronList[$cron->cron]) }}')">
                                                            Cancel
                                                        </button>
                                                    @elseif($cron->run_id)
                                                        <a href="{{ "/$alias/manual-crons-status/$cron->run_id" }}"
                                                            class="btn btn-primary btn-sm">
                                                            Status
                                                        </a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-12 d-flex justify-content-end">
                                {{ $crons->appends($request->except('page'))->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                    <!-- Cancel Confirmation Modal -->
                    <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelConfirmationLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="cancelConfirmationLabel">Confirm Cancellation</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p>Are you sure you want to cancel cron job with name: <strong
                                            id="modalCronName"></strong>?</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">No</button>
                                    <button type="button" class="btn btn-primary" id="confirmCancel">Yes, Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Cancel Confirmation Modal -->

                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <!-- END: Page JS-->
    <script>
        $(document).ready(function() {
            $('#employee_ids').select2({
                ajax: {
                    url: '/ajax/hod-list',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            alias: '{!! $alias !!}',
                            search: params.term,
                            only_current_organization: true
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data.data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.name + (item.employee_code ? ' (' + item
                                            .employee_code + ')' : '') + ' (' + item.email +
                                        ')',
                                };
                            })
                        };
                    },
                    cache: true
                },
                placeholder: 'Search with name',
                minimumInputLength: 1,
                allowClear: true
            });
        })

        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });

        let cancelCronId = null;

        function confirmCancel(cronId, cronName) {
            cancelCronId = cronId;
            document.getElementById("modalCronName").textContent = cronName;
            $('#cancelModal').modal('show');
        }

        document.getElementById("confirmCancel").addEventListener("click", function() {
            if (!cancelCronId) return;

            $.ajax({
                url: '/manual-crons/cancel/' + cancelCronId,
                type: 'POST', // Use POST method
                dataType: 'json',
                data: {
                    _token: '{{ csrf_token() }}', // Add CSRF token
                    status: 'cancelled'
                },
                success: function(response) {
                    $('#cancelModal').modal('hide');
                    window.location.reload();
                },
                error: function(error) {
                    console.error("Error canceling cron job:", error);
                }
            });
        });
    </script>
@endpush