@extends('layouts.app_hr')
@section('title', __('hr.irregular_work_schedules'))
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{__('home.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">{{__('hr.attendance')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('hr.irregular_work_schedules')}}</li>
            </ol>
        </nav>

    </section>

    <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
        <div class="card-widget-separator-wrapper">
            <span class="badge bg-blue-gradient badge-pro ">{{__('report.filters')}}</span>

            <div class="card-body card-widget-separator" >

                <div class="row gy-4 gy-sm-1 ">
                    <div class=" col-3 form-floating-outline form-floating">
                        <input type="text" id="month_filter" class="form-control" name="month">
                        <label for="month_filter" class="form-label">{{ __('hr.select_month') }}</label>
                    </div>
                    <div class="col-md-3 form-floating form-floating-outline">
                        <select id="location_filter" name="location_id" class="form-select">
                            <option value="">{{ __('messages.all') }}</option>
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}">{{ $location->name }}</option>
                            @endforeach
                        </select>
                        <label for="location_filter" class="form-label">{{ __('lang_v1.select_location') }}</label>

                    </div>

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



    <section class="content">
        <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
            <div class="card-body">
                <div class="add-new">
                    <button type="button" class="btn btn-primary waves-effect waves-light create_schedule_modal" data-bs-toggle="modal" data-bs-target="#create_schedule_modal">
                        {{ __('messages.add') }}
                    </button>
                    <a   class="btn btn-success waves-effect waves-light" href="{{route('irregular-schedules.uploadExcel')}}">
                        {{ __('hr.upload_excel') }}
                    </a>
                </div>



                <div class="table-responsive">
                    <table id="schedules_table" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>{{ __('hr.employee_name') }}</th>
                            <th>{{ __('hr.employee_code') }}</th>
                            <th>{{ __('business.location') }}</th>
                            <th>{{ __('hr.month') }}</th>
                            <th>{{ __('hr.days_present') }}</th>
                            <th>{{ __('hr.days_off') }}</th>
                            <th>{{ __('hr.total_hours') }}</th>
                            <th>{{ __('messages.action') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

            </div>
        </div>
    </section>
    @include('hr.irregular_work_schedules.create')

@endsection



@section('javascript')
<script>
        document.addEventListener('DOMContentLoaded', function () {
        flatpickr("#month_filter", {
        plugins: [
        new monthSelectPlugin({
        shorthand: true, // Use shorthand month names (e.g., Jan, Feb)
        dateFormat: "Y-m", // Format for the stored value (YYYY-MM)
        altFormat: "F Y", // Format for display (e.g., January 2025)
        }),
        ],
        allowInput: true, // Allow manual input
        });
        });


        $(document).ready(function() {


            var table = $('#schedules_table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "{{ route('irregular-work-schedules.index') }}",
                    data: function (d) {
                        d.month = $('#month_filter').val();
                        d.location_id = $('#location_filter').val(); // Pass the selected branch
                    }
                },
                columns: [
                    { data: 'employee_name', name: 'employee_name' },
                    { data: 'employee_code', name: 'employee_code' },
                    { data: 'branch_name', name: 'branch_name' },
                    { data: 'month', name: 'month' },
                    { data: 'days_present', name: 'days_present' },
                    { data: 'days_off', name: 'days_off' },
                    { data: 'total_hours', name: 'total_hours' },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],
            });

            // Reload table when filters change
            $('#month_filter, #location_filter').change(function () {
                table.ajax.reload();
            });



            table.buttons().container().appendTo( '.add-new' );

            $(document).on('submit', '#add_schedule_form', function(e) {
                e.preventDefault();
                let form = $(this);
                let data = form.serialize();

                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.msg);
                            $('#create_schedule_modal').modal('hide');
                            $('.irregular_schedules_table').DataTable().ajax.reload();
                            form[0].reset();
                            form.find('button[type="submit"]').removeAttr('disabled');

                        } else {
                            if (response.errors) {
                                $.each(response.errors, function(key, messages) {
                                    messages.forEach(function(msg) {
                                        toastr.error(msg);
                                        form.find('button[type="submit"]').removeAttr('disabled');

                                    });
                                });
                            } else {
                                toastr.error(response.msg);
                                form.find('button[type="submit"]').removeAttr('disabled');

                            }
                        }
                    },
                    error: function(xhr) {
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(key, messages) {
                                messages.forEach(function(msg) {
                                    toastr.error(msg);
                                });
                            });
                        } else {
                            toastr.error("{{ __('messages.something_went_wrong') }}");
                        }
                    }
                });
            });



        });
    </script>
@stop