@extends('master.authMaster')
@section('content')
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-fluid flex-grow-1 container-p-y">
            <!-- Basic Layout & Basic with Icons -->
            <div class="row mb-6 gy-6">
                <!-- Basic Layout -->
                <div class="col-xxl">
                      <div class="table-wrapper-dashboard">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h3 class="mb-3">ADD SALARY FOR USER</h3>
                            <!-- <small class="text-body-secondary float-end">user salary entry</small> -->
                        </div>
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="card-body">
                            <form id="salaryForm" method="POST" action="{{ route('salary.submit') }}">
                                @csrf

                                <div class="row mb-4">
                                   
                                    <div class="col-lg-3">
                                         <label class="col-form-label" for="employee-role">Users
                                        <span class="text-danger">*</span>
                                    </label>
                                        <select id="user_id" name="user_id"
                                            class="form-select  @error('user_id') is-invalid @enderror">
                                            <option value=""> Select a User</option>
                                            @foreach ($users as $user)
                                                <option value="{{ $user->id }}"
                                                    {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                                    {{ $user->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('user_id')
                                            <div class="text-danger mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                               


                                <div id="first_section" style="display: none;">
                                    <div class="row mb-4">
                                        
                                        <div class="col-lg-3">
                                            <label class="col-form-label" for="employee-role">Role
                                            <span class="text-danger">*</span>
                                        </label>
                                            <select id="employee-role" name="role_id"
                                                class="form-select  @error('role_id') is-invalid @enderror" disabled>
                                                <option value=""> Select a Role for User</option>
                                                @foreach ($userRoles as $userRole)
                                                    <option value="{{ $userRole->id }}"
                                                        {{ old('role_id') == $userRole->id ? 'selected' : '' }}>
                                                        {{ $userRole->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('role_id')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                         <div class="col-lg-3">
                                             <label class="col-form-label" for="basic-default-salary">Salary

                                        </label>
                                            <input type="number" name="salary" value="{{ old('salary') }}" id="salary"
                                                class="form-control salary-mask" placeholder="Enter salary per month"
                                                aria-label="658 799 8941" aria-describedby="basic-default-salary" />
                                            @error('salary')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                            
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="row">
                                               
                                                 <div class="col-lg-6">
                                                    <label class="col-form-label" for="basic-default-salary-range">INR/Hr:</strong> ₹</label>
                                                    
                                                    
                                                    
                                                    <input class="form-control salary-mask" id="salary-inr" name="salary_inr"
                                                        readonly>
                                                 </div>



                                              <div class="col-lg-6">
                                                    <label class="col-form-label" for="basic-default-salary-range">USD/Hr:</strong> $</label>
                                                    <input class="form-control salary-mask" id="salary-usd" name="salary_usd"
                                                        readonly>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                              <label class="col-form-label">Salary Start Date</label>
                                            <input type="date" name="salary_start_date" id="salary_start_date"
                                                class="form-control" rows="4" autofocus
                                                value="{{ old('salary_start_date', \Carbon\Carbon::now()->format('Y-m-d')) }}">
                                            @error('salary_start_date')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                  
                                    <!-- <div class="row mb-4">
                                      
                                        
                                        {{-- <label class="col-form-label">Salary End Date</label>
                                        <div class="col-sm-4">
                                            <input type="date" name="salary_end_date" id="salary_end_date"
                                                class="form-control" rows="4" placeholder="A short note..">
                                            @error('salary_end_date')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div> --}}
                                    </div> -->

                                    {{-- note --}}
                                    <div class="row mb-4">
                                        <label class="col-form-label">Note</label>
                                        <div class="col-lg-12">
                                            <input name="note" id="note" class="form-control" rows="4"
                                                placeholder="A short note..">
                                            @error('note')
                                                <div class="text-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                 <div id="salary_histories" class="my-5" style="display: none;"></div>


                                <div class="row justify-content-end">
                                    <div class="col-lg-12 text-end">
                                        <button type="submit" class="btn btn-primary">Save</button>
                                    </div>

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
    @endsection
    @section('scripts')
        <script>
            const users = @json($users);

            $(document).ready(function() {

                $('#salary_start_date').on('focus click', function() {
                    if (this.showPicker) {
                        this.showPicker();
                    } else {
                        $(this).trigger('click');
                    }
                });

                $('#user_id').on('change', function() {
                    const selectedUserId = $(this).val();
                    const selectedUser = users.find(user => user.id == selectedUserId);

                    if (selectedUser && selectedUser.role_id) {
                        $('#employee-role').val(selectedUser.role_id);
                        $('#first_section').show();

                        const salaryHistoryUrlTemplate =
                            "{{ route('user.salary.history', ['userId' => '__USER_ID__']) }}";
                        const salaryHistoryUrl = salaryHistoryUrlTemplate.replace('__USER_ID__',
                            selectedUserId);

                        $.ajax({
                            url: salaryHistoryUrl,
                            method: 'GET',
                            success: function(logs) {
                                if (logs.length > 0) {
                                    let html = `
                        <h3 class="mb-3">Salary History</h3>
                        <div class="table-responsive table-wrapper-dashboard p-0 salary-range">
                            <table class="table">
                                <thead class="table-light">
                                    <tr>
                                        <th>Salary Start Date</th>
                                         <th>Salary End Date</th>
                                        <th>Salary Amount</th>
                                        <th>Rate/Hour (₹)</th>
                                        <th>Rate/Hour ($)</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;

                                    logs.forEach(log => {
                                        html += `
                            <tr>
                                <td>${formatDate(log.start_date)}</td>
                                 <td>${formatDate(log.end_date)}</td>
                                <td>${log.salary_amount}</td>
                                <td>${parseFloat(log.rate_per_hour).toFixed(2)}</td>
                                 <td>${parseFloat(log.rate_per_dollar).toFixed(2)}</td>
                                 <td> ${log.notes ?? '-'}  </td>
                            </tr>
                        `;
                                    });

                                    html += `
                                </tbody>
                            </table>
                        </div>
                      
                    `;

                                    $('#salary_histories').html(html).show();
                                } else {
                                    $('#salary_histories').html(
                                        '<div class="alert alert-warning">No salary history available.</div>'
                                    ).show();
                                }
                            },
                            error: function() {
                                $('#salary_histories').html(
                                    '<div class="alert alert-danger">Error fetching salary history.</div>'
                                ).show();
                            }
                        });

                    } else {
                        $('#employee-role').val('');
                        $('#first_section').hide();
                        $('#salary_histories').hide().html('');
                    }
                });
                const inrToUsdRate = {{ $inrToUsdRate ?? 87.0 }};

                $('#salary').on('input', function() {
                    const salary = parseFloat($(this).val());

                    if (!isNaN(salary)) {
                        const hourlyINR = (salary / 22 / 8).toFixed(2);
                        const hourlyUSD = (hourlyINR / inrToUsdRate).toFixed(2);
                        const inrFormatted = salary.toLocaleString('en-IN', {
                            minimumFractionDigits: 2
                        });
                        const usdValue = (salary / inrToUsdRate).toFixed(2);
                        $('#salary-inr').val(`${hourlyINR}`);
                        $('#salary-usd').val(`${hourlyUSD}`);
                    } else {
                        $('#salary-inr').val('₹0.00');
                        $('#salary-usd').val('$0.00');

                    }
                });

                function formatDate(dateStr) {
                    const date = new Date(dateStr);
                    const day = String(date.getDate()).padStart(2, '0');
                    const month = String(date.getMonth() + 1).padStart(2, '0'); // months are 0-based
                    const year = date.getFullYear();
                    return `${day}-${month}-${year}`;
                }


            });


            // salary form submission
            $('#salaryForm').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const formData = form.serialize();
                const actionUrl = form.attr('action');

                $.ajax({
                    url: actionUrl,
                    method: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    },
                    beforeSend: function() {},
                    success: function(response) {
                        if (response.success) {
                            alert(response.message || 'Salary saved successfully.');
                            $('#user_id').trigger('change');
                            $('#salary').val('');
                            $('#salary-inr').val('');
                            $('#salary-usd').val('');
                            $('#note').val('');
                        } else {
                            alert(response.message || 'Failed to save salary.');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            let messages = '';
                            for (let key in errors) {
                                messages += errors[key].join('\n') + '\n';
                            }
                            alert("Validation errors:\n" + messages);
                        } else {
                            alert("An error occurred while saving salary.");
                        }
                    }
                });
            });
        </script>
    @endsection