@extends('admin.layouts.layouts')

@section('title', 'CTC')

@section('content')
   <div class="page-header">
        <h3 class="page-title">CTC</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Master</li>
                <li class="breadcrumb-item active" aria-current="page">CTC</li>
            </ol>
        </nav>
    </div>

    <div class="container">

        <div class="card">

            <form method="POST" action="{{ route('ctc.update') }}" id="ctcForm">
                @csrf
                <input type="hidden" name="id" id="id" value="{{ $currentCTC->id ?? '' }}">

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="effective_date" class="form-label">Effective Month <span class="text-danger">*</span></label>
                                <input type="month" class="form-control" id="effective_date" name="effective_date"
                                value="{{ old('effective_date', isset($currentCTC) ? date('Y-m', strtotime($currentCTC->effective_date)) : '') }}"
                                required data-parsley-required data-parsley-required-message="Please select effective month"
                                data-parsley-errors-container='#effective_date_error'>
                                <span class="text-danger" id="effective_date_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="variable_pay" class="form-label">Variable Pay (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="variable_pay" name="variable_pay"
                                    value="{{ old('variable_pay', $currentCTC->variable_pay ?? '') }}" required placeholder="Enter Variable Pay" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter variable pay'
                                    data-parsley-errors-container='#variable_pay_error'>
                                <span class="text-danger" id="variable_pay_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="basic" class="form-label">Basic/Year (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="basic" name="basic"
                                    value="{{ old('basic', $currentCTC->basic ?? '') }}" required placeholder="Enter Basic/Year" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter basic/year'
                                    data-parsley-errors-container='#basic_error'>
                                <span class="text-danger" id="basic_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="hra" class="form-label">HRA (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="hra" name="hra"
                                    value="{{ old('hra', $currentCTC->hra ?? '') }}" required placeholder="Enter HRA" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter hra'
                                    data-parsley-errors-container='#hra_error'>
                                <span class="text-danger" id="hra_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="gratuity" class="form-label">Gratuity (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="gratuity" name="gratuity"
                                    value="{{ old('gratuity', $currentCTC->gratuity ?? '') }}" required placeholder="Enter Gratuity" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter gratuity'
                                    data-parsley-errors-container='#gratuity_error'>
                                <span class="text-danger" id="gratuity_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="esic" class="form-label">ESIC (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="esic" name="esic"
                                    value="{{ old('esic', $currentCTC->esic ?? '') }}" required placeholder="Enter ESIC" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter esic'
                                    data-parsley-errors-container='#esic_error'>
                                <span class="text-danger" id="esic_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_pf" class="form-label">Employee PF (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="employee_pf" name="employee_pf"
                                    value="{{ old('employee_pf', $currentCTC->employee_pf ?? '') }}" required placeholder="Enter Employee PF" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter employee pf'
                                    data-parsley-errors-container='#employee_pf_error'>
                                <span class="text-danger" id="employee_pf_error"></span>
                            </div>
                        </div>
                       
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_pf" class="form-label">Employer PF (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="employer_pf" name="employer_pf"
                                    value="{{ old('employer_pf', $currentCTC->employer_pf ?? '') }}" required placeholder="Enter Employer PF" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter employer pf'
                                    data-parsley-errors-container='#employer_pf_error'>
                                <span class="text-danger" id="employer_pf_error"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="sip" class="form-label">SIP (%) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control percentage" id="sip" name="sip"
                                    value="{{ old('sip', $currentCTC->sip ?? '') }}" required placeholder="Enter SIP" data-parsley-required
                                    data-parsley-trigger="keyup" data-parsley-required-message='Please enter sip'
                                    data-parsley-errors-container='#sip_error'>
                                <span class="text-danger" id="sip_error"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary" id="updateCTC">Update</button>
                </div>
            </form>
        </div>
    </div>

    <div class="container py-4">

        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">CTC History</h5>
            </div>
            <div class="card-body">
                @if($ctcs->isEmpty())
                    <p style="text-align: center; font-weight: bold;">No CTC found.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover" id="ctcTable">
                            <thead>
                                <tr>
                                    <th>Effective Month</th>
                                    <th>Variable Pay</th>
                                    <th>Basic/Year</th>
                                    <th>HRA</th>
                                    <th>Gratuity</th>
                                    <th>Employee PF</th>
                                    <th>Employer PF</th>
                                    <th>ESIC</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($ctcs as $setting)
                                    <tr>
                                        <td>{{ date('F, Y', strtotime($setting->effective_date)) }}</td>
                                        <td>{{ $setting->variable_pay }}</td>
                                        <td>{{ $setting->basic }}</td>
                                        <td>{{ $setting->hra }}</td>
                                        <td>{{ $setting->gratuity }}</td>
                                        <td>{{ $setting->employee_pf }}</td>
                                        <td>{{ $setting->employer_pf }}</td>
                                        <td>{{ $setting->esic }}</td>
                                        <td>
                                            <a href="{{ route('ctc.show', $setting->id) }}" class="btn btn-icon btn-dark">
                                                <i class="fa fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#ctcTable').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 10,
                "columnDefs": [
                    { orderable: false, targets: '_all' },
                ]
            });

            const $form = $('#ctcForm');

            // Handle form submission with AJAX
            $form.on('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const $submitButton = $('#updateCTC');
                $submitButton.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Updating...');

                // Clear previous errors
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(data) {
                        if (data.success) {
                            toastr.success(data.message);
                            window.location.reload();
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            // Handle validation errors
                            const errors = xhr.responseJSON.errors;
                            for (const [field, messages] of Object.entries(errors)) {
                                const $field = $(`[name="${field}"]`);

                                if ($field.length) {
                                    $field.addClass('is-invalid');
                                    const $errorDiv = $('<div class="invalid-feedback"></div>').text(messages[0]);
                                    $field.after($errorDiv);
                                }
                            }
                        } else {
                            toastr.error('Something went wrong. Please try again.');
                        }
                    },
                    complete: function() {
                        $submitButton.prop('disabled', false).text('Update');
                    }
                });
            });
        });
    </script>
@endsection