@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('employee/employee_create.daily_work')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/daily-works">{{trans('employee/employee_create.daily_work')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($dailyWork) && ($dailyWork->id))
                        {{trans('employee/employee_create.daily_work_edit')}}
                    @else
                        {{trans('employee/employee_create.daily_work_added')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
{!! Form::model($dailyWork ?? null, ['method' => isset($dailyWork) && $dailyWork->id ? 'put' : 'post', 'id' => 'dailyWorkForm']) !!}

<section class="vertical-wizard">
    <div class="bs-stepper vertical vertical-wizard-example">

        <div class="bs-stepper-header">
            <div class="step" data-target="#personal-info-vertical" role="tab">
                <button type="button" class="step-trigger">
                    <span class="bs-stepper-box">1</span>
                    <span class="bs-stepper-label">
                        <span class="bs-stepper-title">Daily Work</span>
                        <span class="bs-stepper-subtitle"> {{ isset($dailyWork) && ($dailyWork->id) ? 'Edit' : 'Add' }} Details</span>
                    </span>
                </button>
            </div>
        </div>

        <div class="bs-stepper-content">
            <div id="personal-info-vertical" class="content position-relative">
                <div class="row">

                    {{-- Department --}}
                    <div class="col-md-4">
                        <div class="mb-1 {{{ $errors->has('department_id') ? 'has-error' : '' }}}">
                            <label class="form-label">Department <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control select2" name="department_id" id="department_id">
                                <option value="">Select Department</option>
                                @foreach($departments ?? [] as $department)
                                    <option value="{{ $department->id }}"
                                        @if(isset($dailyWork) && $dailyWork->department_id == $department->id) selected @endif>
                                        {{ $department->name }}
                                    </option>
                                @endforeach
                            </select>
                            {!! $errors->first('department_id', '<label class="error">:message</label>') !!}
                        </div>
                    </div>

                    {{-- Sub Department --}}
                    <div class="col-md-4">
                        <div class="mb-1 {{{ $errors->has('sub_department_id') ? 'has-error' : '' }}}">
                            <label class="form-label">Sub Department</label>
                            <select class="form-control select2" name="sub_department_id" id="sub_department_id">
                                <option value="">All</option>
                                {{-- @foreach($subDepartments ?? [] as $subDepartment)
                                    <option value="{{ $subDepartment->id }}"
                                        @if(isset($dailyWork) && $dailyWork->sub_department_id == $subDepartment->id) selected @endif>
                                        {{ $subDepartment->name }}
                                    </option>
                                @endforeach --}}
                            </select>
                            {!! $errors->first('sub_department_id', '<label class="error">:message</label>') !!}
                        </div>
                    </div>

                    {{-- Workforce Type --}}
                    <div class="col-md-4">
                        <div class="mb-1 {{{ $errors->has('employee_type') ? 'has-error' : '' }}}">
                            <label class="form-label">Employee Type </label>
                           <select class="form-control select2" name="employee_type" id="employee_type">
                                <option value="">Select Type</option>
                                @foreach ($employeeTypes ?? [] as $type)
                                <option value="{{ $type }}" @if(isset($dailyWork) && $dailyWork->employee_type == $type) selected @endif>{{ ucfirst($type) }}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('employee_type', '<label class="error">:message</label>') !!}
                        </div>
                    </div>

                    {{-- Work Date --}}
                    <div class="col-md-4">
                        <div class="mb-1 {{{ $errors->has('work_date') ? 'has-error' : '' }}}">
                            <label class="form-label">Work Date <span class="mendatory-field text-danger">*</span></label>
                            {!! Form::date('work_date', isset($dailyWork->work_date) ? $dailyWork->work_date : old('work_date', date('Y-m-d')), ['class' => 'form-control', 'id' => 'work_date']) !!}
                            {!! $errors->first('work_date', '<label class="error">:message</label>') !!}
                        </div>
                    </div>

                    {{-- Workforce Name --}}
                    <div class="col-md-4">
                        <div class="mb-1 {{{ $errors->has('employee_id') ? 'has-error' : '' }}}">
                            <label class="form-label">Employee Name <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control" name="employee_id" id="employee_id" data-placeholder="Search workforce by name" data-allow-clear="true">
                                @if(isset($dailyWork) && $dailyWork->employee_id && $dailyWork->workforce)
                                    <option value="{{ $dailyWork->employee_id }}" selected>
                                        {{ $dailyWork->workforce->name ?? '' }} ({{ $dailyWork->workforce->employee_code ?? '' }})
                                    </option>
                                @endif
                            </select>
                            {!! $errors->first('employee_id', '<label class="error">:message</label>') !!}
                        </div>
                    </div>

                </div>

                {{-- Attendance / Biometric Info Panel --}}
                <div class="row" id="attendance-info-panel" style="display: none;">
                    <div class="col-12">
                        <hr>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-1">
                            <label class="form-label">Employee Code</label>
                            <input type="text" class="form-control" id="biometric_code" readonly>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-1">
                            <label class="form-label">Attendance Date</label>
                            <input type="text" class="form-control" id="attendance_date" readonly>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-1">
                            <label class="form-label">In Time</label>
                            <input type="text" class="form-control" id="in_time" readonly>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-1">
                            <label class="form-label">Out Time</label>
                            <input type="text" class="form-control" id="out_time" readonly>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-1">
                            <label class="form-label">Duty Hours</label>
                            <input type="text" class="form-control" id="duty_hours" readonly>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-1">
                            <label class="form-label">Overtime Hours</label>
                            <input type="text" class="form-control" id="overtime_hours" readonly>
                        </div>
                    </div>
                    <div class="col-12">
                        <hr>
                    </div>
                </div>

                {{-- Item entry row --}}
              <div class="row align-items-end">
                <div class="col-md-3">
                    <div class="mb-1 ">
                        <label class="form-label">Item Name <span class="mendatory-field text-danger">*</span></label>
                        <select class="form-control select2" id="line_item_id">
                            <option value="">Select Item</option>
                            @foreach($items ?? [] as $item)
                                <option
                                    value="{{ $item->id }}"
                                    data-code="{{ $item->item_code }}"
                                >
                                    {{ $item->item_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-1">
                        <label class="form-label">Operation <span class="mendatory-field text-danger">*</span></label>
                        <select class="form-control select2" id="line_operation_id" disabled>
                            <option value="">-- Select Item First --</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="mb-1">
                        <label class="form-label">Quantity/ Hours <span class="mendatory-field text-danger">*</span></label>
                        <input type="number" step="0.01" min="0" class="form-control" id="line_quantity" placeholder="Enter Qty/Hrs">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="mb-1">
                        <label class="form-label">Rate</label>
                        <input type="text" class="form-control" id="line_rate" readonly>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="mb-1">
                        <button type="button" class="btn btn-primary w-100" id="btn-add-item">ADD</button>
                    </div>
                </div>
                </div>
                <div class="table-responsive mt-2">
                    <table class="table table-bordered" id="itemsTable">
                        <thead class="table-light">
                        <tr>
                            <th width="5%">#</th>
                            <th>Item</th>
                            <th>Item code</th>
                            <th>Operation</th>
                            <th width="12%">Quantity</th>
                            <th width="12%">Rate</th>
                            <th width="12%">Amount</th>
                            <th width="8%">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(isset($dailyWork) && $dailyWork->details && $dailyWork->details->count())
                            @foreach($dailyWork->details as $index => $detail)
                                <tr>
                                    <td>{{ $index + 1 }}
                                        <input type="hidden" name="items[{{ $index }}][pib_item_id]" value="{{ $detail->pib_item_id }}">
                                    </td>
                                    <td>{{ $detail->item->item_name ?? '' }}</td>
                                    <td>{{ $detail->item->item_code ?? '' }}</td>
                                    <td>{{ $detail->operation->operation ?? '' }}
                                        <input type="hidden" name="items[{{ $index }}][pib_operation_id]" value="{{ $detail->pib_operation_id }}">
                                    </td>
                                    <td>{{ $detail->quantity }}
                                        <input type="hidden" name="items[{{ $index }}][quantity]" value="{{ $detail->quantity }}">
                                    </td>
                                    <td>{{ $detail->rate }}
                                        <input type="hidden" name="items[{{ $index }}][rate]" value="{{ $detail->rate }}">
                                    </td>
                                    <td>{{ $detail->amount }}
                                        <input type="hidden" name="items[{{ $index }}][amount]" value="{{ $detail->amount }}">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-sm btn-remove">
                                            <i data-feather="trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </div>

                

                <div class="content-footer position-relative col-md-12 mt-2">
                    <div class="d-flex flex-row-reverse">
                        <button type="submit" class="btn btn-success" id="btn-save-daily-work">SAVE</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</section>

{!! Form::close() !!}

@endsection

@push('footer-script')
<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.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let selectedItemData = null;
let rowIndex = {{ (isset($dailyWork) && $dailyWork->id && $dailyWork->details) ? $dailyWork->details->count() : 0 }};
$(document).ready(function () {

    $('.select2').not('#employee_id').select2();

    $('#department_id').on('change', function () {
        let departmentId = $(this).val();
        $('#sub_department_id').val('').trigger('change');

        if (!departmentId) return;

        $.ajax({
            type: 'GET',
            url: '/get/sub-department-list', 
            data: { alias: '{!! $alias !!}', department_id: departmentId },
            success: function (response) {
                let options = '<option value="">All</option>';
                $.each(response.data || [], function (i, subDept) {
                    options += `<option value="${subDept.id}">${subDept.name}</option>`;
                });
                $('#sub_department_id').html(options).trigger('change');
            }
        });

        fetchEmployeeList();
    });

    $('#sub_department_id, #employee_type').on('change', function () {
        fetchEmployeeList();
    });

    function fetchEmployeeList() {
        $('#employee_id').val(null).trigger('change');
    }

    $('#employee_id').select2({
        ajax: {
            url: '/get/employee-list',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    alias: '{!! $alias !!}',
                    search: params.term,
                    department_id: $('#department_id').val(),
                    sub_department_id: $('#sub_department_id').val(),
                    employee_type: $('#employee_type').val()
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data.data, function (item) {
                        return {
                            id: item.id,
                            text: item.name + (item.employee_code ? ' - ' + item.employee_code : '')
                        };
                    })
                };
            },
            cache: true
        },
        placeholder: 'Search workforce by name',
        minimumInputLength: 1,
        allowClear: true,
        width: '100%'
    });

    // @if(isset($dailyWork) && $dailyWork->employee_id && $dailyWork->employee)
    //     var selectedWorkforce = {
    //         id: {{ $dailyWork->employee_id }},
    //         text: '{{ addslashes($dailyWork->employee->name) }} ({{ addslashes($dailyWork->employee->employee_code) }})'
    //     };
    //     var employeeSelect = $('#employee_id');
    //     var option = new Option(selectedWorkforce.text, selectedWorkforce.id, true, true);
    //     employeeSelect.append(option).trigger('change');
    //     fetchAttendanceInfo()
    // @endif

    @if(isset($dailyWork) && $dailyWork->employee_id && $dailyWork->employee)
    var selectedWorkforce = {
        id: {{ $dailyWork->employee_id }},
        text: '{{ addslashes($dailyWork->employee->name) }} ({{ addslashes($dailyWork->employee->employee_code) }})'
    };
    var employeeSelect = $('#employee_id');
    var option = new Option(selectedWorkforce.text, selectedWorkforce.id, true, true);
    employeeSelect.append(option).trigger('change');
    fetchAttendanceInfo();
@endif

    function showAjaxMessage(type, title, text) {
        if (window.Swal) {
            Swal.fire({
                icon: type,
                title: title,
                text: text,
                confirmButtonText: 'OK'
            });
        } else {
            alert(text || title);
        }
    }
   
    let attendanceValid = false;
    function fetchAttendanceInfo() {
        let employeeId = $('#employee_id').val();
        let workDate = $('#work_date').val();

        if (!employeeId || !workDate) {
            $('#attendance-info-panel').hide();
              attendanceValid = false;
            return;
        }

        $.ajax({
            type: 'GET',
            url: '/get/employee-attendance', 
            data: {
                alias: '{!! $alias !!}',
                employee_id: employeeId,
                attendance_date: workDate
            },
            success: function (response) {
                if (response.code === 'success' && response.data) {
                    $('#biometric_code').val(response.data.employee_code || '');
                    $('#attendance_date').val(response.data.attendance_date || '');
                    $('#in_time').val(response.data.in_time || '');
                    $('#out_time').val(response.data.out_time || '');
                    $('#duty_hours').val(response.data.duty_hours || '');
                    $('#overtime_hours').val(response.data.overtime_hours || '');
                    $('#attendance-info-panel').show();
                     attendanceValid = true;
                } else {
                    $('#attendance-info-panel').hide();
                     attendanceValid = false;
                    showAjaxMessage('warning', response.header || 'No Attendance', response.messages?.join('\n') || 'Attendance not found for selected date');
                    fetchEmployeeList();

                }
            },
            error: function () {
                $('#attendance-info-panel').hide();
                 attendanceValid = false;
            }
        });
    }

    $('#employee_id').on('change', fetchAttendanceInfo);
    $('#work_date').on('change', fetchAttendanceInfo);
    

    $('#line_item_id').select2({
        ajax: {
            url: '/get/item-list',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    alias: '{!! $alias !!}',
                    search: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data.data, function (item) {
                        return {
                            id: item.id,
                            text: item.item_name + (item.item_code ? ' (' + item.item_code + ')' : ''),
                            item_name: item.item_name,
                            item_code: item.item_code,
                            rate: item.rate
                        };
                    })
                };
            },
            cache: true
        },
        placeholder: 'Search item by name',
        minimumInputLength: 1,
        allowClear: true,
        width: '100%'
    });

    $('#line_item_id').on('select2:select', function (e) {
        selectedItemData = e.params.data;
        fetchOperationsForItem(e.params.data.id);
    });
    $('#line_item_id').on('select2:clear change', function (e) {
        if (!$(this).val()) {
            selectedItemData = null;
            resetOperationDropdown();
        }
    });

    function resetOperationDropdown() {
        $('#line_operation_id')
            .html('<option value="">-- Select Item First --</option>')
            .val('')
            .prop('disabled', true)
            .trigger('change');
    }

    function fetchOperationsForItem(itemId) {

        if (!itemId) {
            resetOperationDropdown();
            return;
        }

        $.ajax({
            type: 'GET',
            url: '/get/operation-list',
            data: {
                alias: '{!! $alias !!}',
                item_id: itemId
            },
            success: function (response) {

                let options = '<option value="">-- Select --</option>';

                $.each(response.data || [], function (i, operation) {

                    options += `
                        <option
                            value="${operation.pib_operation_id}"
                            data-rate="${operation.rate}"
                            data-item="${operation.pib_item_id}">
                            ${operation.operation}
                        </option>`;
                });

                $('#line_operation_id')
                    .prop('disabled', false)
                    .html(options)
                    .val('')
                    .trigger('change');

                if (!response.data || response.data.length === 0) {
                    showAjaxMessage('warning', 'No Operations', 'No operations found for the selected item');
                }
            },
            error: function () {
                resetOperationDropdown();
            }
        });
    }

    $('#line_operation_id').on('change', function () {
        let rate = parseFloat($(this).find(':selected').data('rate')) || 0;
        $('#line_rate').val(rate.toFixed(2));
    });

    $('#btn-add-item').click(function () {

       let itemId = $('#line_item_id').val();
        let itemName = selectedItemData ? selectedItemData.item_name : '';
        let itemCode = selectedItemData ? selectedItemData.item_code : '';
        
        let operationId = $('#line_operation_id').val();
        let operationName = $('#line_operation_id option:selected').text();

        let qty = parseFloat($('#line_quantity').val());

     if (!itemId || !operationId || !qty ) {
            Swal.fire({
                icon: 'warning',
                title: 'Validation Error',
                text: 'Please select Item, Operation and enter Quantity.',
                confirmButtonText: 'OK'
            });
            return;
        }
        let isDuplicate = false;

        $('#itemsTable tbody tr').each(function () {

            let existingItem = $(this)
                .find('input[name$="[pib_item_id]"]')
                .val();

            let existingOperation = $(this)
                .find('input[name$="[pib_operation_id]"]')
                .val();

            if (existingItem == itemId && existingOperation == operationId) {
                isDuplicate = true;
                return false; // break loop
            }

        });

        if (isDuplicate) {
            Swal.fire({
                icon: 'warning',
                title: 'Duplicate Entry',
                text: 'This Item & Operation has already been added.'
            });
            return;
        }
        let rate = parseFloat($('#line_operation_id option:selected').data('rate')) || 0;
        let amount = (qty * rate).toFixed(2);
        let html = `
        <tr>
            <td class="row-serial">${rowIndex + 1}</td>
            <td>${itemName}
                <input type="hidden" name="items[${rowIndex}][pib_item_id]" value="${itemId}">
            </td>
            <td>${itemCode}
                <input type="hidden" name="items[${rowIndex}][pib_item_id]" value="${itemId}">
            </td>

            <td>${operationName}
                <input type="hidden" name="items[${rowIndex}][pib_operation_id]" value="${operationId}">
            </td>
            <td>
                ${qty}
                <input type="hidden" name="items[${rowIndex}][quantity]" value="${qty}">
            </td>
            <td>
                ${rate.toFixed(2)}
                <input type="hidden" name="items[${rowIndex}][rate]" value="${rate}">
            </td>
            <td>
                ${amount}
                <input type="hidden" name="items[${rowIndex}][amount]" value="${amount}">
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm btn-remove">
                    <i data-feather="trash"></i>
                </button>
            </td>
        </tr>`;

        $('#itemsTable tbody').append(html);

        feather.replace();

        rowIndex++;

        $('#line_item_id').val(null).trigger('change');
        $('#line_operation_id').html('<option value="">-- Select Item First --</option>').prop('disabled', true);
        $('#line_rate').val('');
        $('#line_quantity').val('');
        selectedItemData = null; 

    });

    $(document).on('click', '.btn-remove', function () {
        $(this).closest('tr').remove();
    });

    document.getElementById('dailyWorkForm').addEventListener('submit', function (e) {
    
        let employeeId = $('#employee_id').val();
        let workDate = $('#work_date').val();
    
        if (!employeeId || !workDate || !attendanceValid || $('#itemsTable tbody tr').length === 0) {
            e.preventDefault();
            e.stopImmediatePropagation(); 
            Swal.fire({
                icon: 'warning',
                title: 'Validation Error',
                text: 'Please fill all required fields, ensure attendance exists, and add at least one item.'
            });
        }
    
    }, true); 
});


</script>
@endpush