@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.CreatenewEmployeeShift') }}</h4>
                </div>
            </div>

            <form method="post" action="{{ url('/employeeshiftprocess') }}" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Branch') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbBranch" id="cmbBranch">
                                        <option value="-1">{{ __('sitelabel.SelectBranch') }}</option>
                                        @foreach ($branch as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Group') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbGroup" id="cmbGroup">
                                        <option value="-1">{{ __('sitelabel.SelectGroup') }}</option>
                                        @foreach ($group as $item)
                                            <option value="{{ $item->Id }}">{{ $item->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Department') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbDepartment" id="cmbDepartment">
                                        <option value="-1">{{ __('sitelabel.SelectGroupFirst') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Shift') }}<span class="text-danger">*</span></label>
                                    <select class="form-select" name="cmbShift" id="cmbShift">
                                        <option value="-1">{{ __('sitelabel.SelectShift') }}</option>
                                        @foreach ($shift as $item)
                                            <option value="{{ $item->Id }}" data-starttime="{{ $item->StartTime }}"
                                                data-endtime="{{ $item->EndTime }}">
                                                {{ $item->Name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.StartTime') }}</label>
                                    <input type="time" class="form-control" id="txtStartTime" name="txtStartTime"
                                        value="{{ old('txtStartTime') }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.EndTime') }}</label>
                                    <input type="time" class="form-control" id="txtEndTime" name="txtEndTime"
                                        value="{{ old('txtEndTime') }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.StartDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="txtStartDate" name="txtStartDate"
                                        value="{{ old('txtStartDate') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.EndDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="txtEndDate" name="txtEndDate"
                                        value="{{ old('txtEndDate') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.RelaxationTime') }}</label>
                                    <input type="number" class="form-control" id="txtRelaxationTime" min="0"
                                        name="txtRelaxationTime" value="{{ old('txtRelaxationTime', 0) }}">
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <button type="button" id="loademployees"
                                    class="btn btn-my-primary">{{ __('sitelabel.LoadEmployees') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="voucherTable">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.SerialNumber') }}</th>
                                            <th>{{ __('sitelabel.Code') }}</th>
                                            <th>{{ __('sitelabel.Name') }}</th>
                                            <th>{{ __('sitelabel.RelaxTime') }}</th>
                                            <th>{{ __('sitelabel.Shift') }}</th>
                                            <th>{{ __('sitelabel.Apply') }}</th>
                                            <th>{{ __('sitelabel.Deduction') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-my-primary">{{ __('sitelabel.ApplyShift') }}</button>
                                <button type="button" onclick="javascript:window.location='{{ url('/employeeshift') }}';"
                                    class="btn btn-dark">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        window.onload = myOnload;

        function myOnload() {
            @if (session()->get('locale') == 'ur')
                MakeTextBoxUrduEnabled(txtName);
            @endif
        }

        $(document).ready(function() {
            $('#cmbBranch, #cmbGroup, #cmbDepartment, #cmbShift').select2({
                theme: "bootstrap-5"
            });

            $("#cmbGroup").change(function() {
                var GroupId = $("#cmbGroup").val();
                $('#cmbDepartment').empty().prop('disabled', true);

                if (GroupId !== "-1") {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('/') }}/api/getDepartments/" + GroupId,
                        success: function(data) {
                            $('#cmbDepartment').append(data).prop('disabled', false);
                        },
                        error: function(xhr, status, error) {
                            console.error("Error fetching counties:", error);
                            alert("Failed to load departments. Please try again.");
                            $('#cmbDepartment').prop('disabled', false);
                        }
                    });
                }
            });

            // Handle Shift selection
            $("#cmbShift").change(function() {
                var selectedOption = $(this).find(':selected');
                var startTime = selectedOption.data('starttime');
                var endTime = selectedOption.data('endtime');

                $("#txtStartTime").val(startTime || '');
                $("#txtEndTime").val(endTime || '');
            });

            // Handle Load Employees button click
            $("#loademployees").click(function() {
                // Check required fields
                var branch = $("#cmbBranch").val();
                var group = $("#cmbGroup").val();
                var department = $("#cmbDepartment").val();
                var shift = $("#cmbShift").val();
                var startDate = $("#txtStartDate").val();
                var endDate = $("#txtEndDate").val();
                var relaxTime = $("#txtRelaxationTime").val();

                if (branch === "-1") {
                    alert("Please select a branch.");
                    $("#cmbBranch").focus();
                    return;
                }

                if (group === "-1") {
                    alert("Please select a group.");
                    $("#cmbGroup").focus();
                    return;
                }

                if (department === "-1") {
                    alert("Please select a department.");
                    $("#cmbDepartment").focus();
                    return;
                }

                if (relaxTime <= "0" || relaxTime === "") {
                    alert("Relaxation time must be greater than 0.");
                    $("#txtRelaxationTime").focus();
                    return;
                }

                if (shift === "-1") {
                    alert("Please select a shift.");
                    $("#cmbShift").focus();
                    return;
                }

                if (startDate === "") {
                    alert("Please select a start date.");
                    $("#txtStartDate").focus();
                    return;
                }

                if (endDate === "") {
                    alert("Please select an end date.");
                    $("#txtEndDate").focus();
                    return;
                }

                if (new Date(endDate) <= new Date(startDate)) {
                    alert("End date must be after the start date.");
                    $("#txtEndDate").focus();
                    return;
                }

                // If validation passes, fetch employee data
                $.ajax({
                    type: "GET",
                    url: "{{ url('/api/getEmployeesData') }}",
                    data: {
                        branch: branch,
                        group: group,
                        department: department,
                        shift: shift,
                    },
                    success: function(response) {
                        var tbody = $("#voucherTable tbody");
                        tbody.empty(); // Clear previous data

                        if (response.data && response.data.length > 0) {
                            response.data.forEach(function(employee, index) {
                                var row = `
                                    <tr>
                                        <td>${index + 1}</td>
                                        <td>${employee.Code}</td>
                                        <td>
                                            ${employee.FullName}
                                            <input type="hidden" name="cmbEmployee[]" value="${employee.Id}">
                                        </td>
                                        <td>${$("#txtRelaxationTime").val()}</td>
                                        <td>${$("#cmbShift option:selected").text()}</td>
                                        <td><input type="checkbox" name="apply[]" value="${employee.Id}"></td>
                                        <td><input type="checkbox" name="deduction[]" value="${employee.Id}"></td>
                                    </tr>
                                `;
                                tbody.append(row);
                            });
                        } else {
                            alert("No employees found for the selected criteria.");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log("XHR Status:", xhr.status);
                        console.log("Response Text:", xhr.responseText);
                        console.log("Status:", status);
                        console.log("Error:", error);
                        alert("Failed to load employees. Error: " + error);
                    }
                });
            });

            $("#btnTranslate").click(function() {
                var Transword = $("#txtName").val();
                $.ajax({
                    type: "GET",
                    url: "{{ url('/') }}/translateword/" + Transword,
                    contentType: "application/json;charset=utf-8",
                    success: function(data) {
                        $("#txtOtherName").val(data);
                    }
                });
            });
        });
    </script>
@endsection