@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header">
        <h5>Add Designation</h5>
    </div>

    <div class="card-body">
        <form id="createForm">
            @csrf

            <div class="mb-3">
                <label class="form-label">Branch <span class="text-danger">*</span></label>
                <select name="branch_id" class="form-control">
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}">
                            {{ $branch->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Designation Code <span class="text-danger">*</span></label>
                <input type="text" name="code" class="form-control" maxlength="50" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" maxlength="150" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Level <span class="text-danger">*</span></label>
                <input type="number" name="level" class="form-control" min="1" required>
            </div>

            <div class="mb-3">
                <label class="form-label">Budgeted <span class="text-danger">*</span></label>
                <input type="number" name="budget" class="form-control" min="1" required>
            </div>

            <div class="form-check mb-3">
                <input type="checkbox" name="is_managerial" class="form-check-input">
                <label class="form-check-label">Managerial Role</label>
            </div>

             <div class="form-check mb-3">
                <input type="hidden" name="carder" value="0">
                <input type="checkbox" name="carder" class="form-check-input" value="1">
                <label class="form-check-label">Carder</label>
            </div>

            <div class="form-check mb-3">
                <input type="checkbox" name="status" class="form-check-input" checked>
                <label class="form-check-label">Active</label>
            </div>

           
            <hr class="my-4">

            {{-- Additions Table --}}
            <div class="card mb-4">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0">Additions</h5>
                        </div>
                        <div class="col-auto">
                           
                        </div>
                    </div>       
                </div>
                <div class="card-body p-0">
                    <table class="table table-bordered mb-0" id="additionsTable">
                        <thead class="table-light">
                            <tr>
                                <th>Addition</th>
                                <th width="60"><button type="button" class="btn btn-sm btn-outline-primary" id="addAdditionRow">
                                <i class="bi bi-plus"></i> Add
                            </button></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Deductions Table --}}
            <div class="card mb-4">
                 <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0">Deductions</h5>
                        </div>
                        <div class="col-auto">
                            
                        </div>
                    </div>       
                </div>
                <div class="card-body p-0">
                    <table class="table table-bordered mb-0" id="deductionsTable">
                        <thead class="table-light">
                            <tr>
                                <th>Deduction</th>
                                <th width="60"><button type="button" class="btn btn-sm btn-outline-primary" id="addDeductionRow">
                                <i class="bi bi-plus"></i> Add
                            </button></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ route('core.designations.index') }}" class="btn btn-secondary">Back</a>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
let additionIndex = 0;
let deductionIndex = 0;

// Add Addition Row
$('#addAdditionRow').on('click', function() {
    let rowHtml = `
    <tr>
        <td>
            <select name="additions[]" class="form-control" required>
                <option value="">-- Select Addition --</option>
                @foreach($additions as $addition)
                    <option value="{{ $addition->id }}">{{ $addition->code }} - {{ $addition->name }}</option>
                @endforeach
            </select>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row">
                 <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;
    $('#additionsTable tbody').append(rowHtml);
    additionIndex++;
});

// Add Deduction Row
$('#addDeductionRow').on('click', function() {
    let rowHtml = `
    <tr>
        <td>
            <select name="deductions[]" class="form-control" required>
                <option value="">-- Select Deduction --</option>
                @foreach($deductions as $deduction)
                    <option value="{{ $deduction->id }}">{{ $deduction->code }} - {{ $deduction->name }}</option>
                @endforeach
            </select>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger remove-row">
                 <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
    `;
    $('#deductionsTable tbody').append(rowHtml);
    deductionIndex++;
});

// Remove Row
$(document).on('click', '.remove-row', function() {
    $(this).closest('tr').remove();
});

// Form Submit
$('#createForm').on('submit', function (e) {
    e.preventDefault();

    let btn = $(this).find('button[type=submit]');
    btn.prop('disabled', true);

    $.ajax({
        url: "{{ route('core.designations.store') }}",
        type: "POST",
        data: $(this).serialize(),
        success: function (res) {
            Swal.fire('Success', res.message, 'success')
                .then(() => window.location.href = "{{ route('core.designations.index') }}");
        },
        error: function (xhr) {
            btn.prop('disabled', false);
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let errorList = '<ul style="text-align: left;">';
                $.each(errors, function(field, messages) {
                    $.each(messages, function(index, message) {
                        errorList += '<li>' + message + '</li>';
                    });
                });
                errorList += '</ul>';
                Swal.fire({
                    title: 'Validation Error',
                    html: errorList,
                    icon: 'error'
                });
            } else {
                Swal.fire('Error', 'An error occurred. Please try again.', 'error');
            }
        }
    });
});
</script>
@endsection
