@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Tax Slabs</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/global-config">TDS Global Config</a></li>
                    <li class="breadcrumb-item active">Tax Slabs</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-tax-slabs">

        {{-- Flash Messages --}}
        <div class="row">
            <div class="col-12">
                @if(session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <div class="alert-body">{{ session('status') }}</div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>

        {{-- FY Selector + Load Defaults --}}
        <div class="row mb-1">
            <div class="col-12">
                <div class="card mb-0">
                    <div class="card-body py-1">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center gap-1">
                                <h5 class="mb-0">Financial Year:</h5>
                                <form method="GET" class="d-inline-flex">
                                    <select name="fy" class="form-select form-select-sm" style="width:150px;" onchange="this.form.submit()">
                                        @foreach($financialYears as $year)
                                            <option value="{{ $year->id }}" {{ $fyId == $year->id ? 'selected' : '' }}>FY {{ $year->label }}</option>
                                        @endforeach
                                    </select>
                                </form>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-outline-success btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                                    <i data-feather="download" style="width:14px;height:14px;"></i> Load Default Slabs
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item load-defaults-btn" href="javascript:void(0);" data-regime="both"><i data-feather="layers" class="me-50" style="width:14px;height:14px;"></i> Both Regimes</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item load-defaults-btn" href="javascript:void(0);" data-regime="old"><i data-feather="shield" class="me-50" style="width:14px;height:14px;"></i> Old Regime Only</a></li>
                                    <li><a class="dropdown-item load-defaults-btn" href="javascript:void(0);" data-regime="new"><i data-feather="zap" class="me-50" style="width:14px;height:14px;"></i> New Regime Only</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Two-Section Layout --}}
        <div class="row match-height">

            {{-- Old Regime --}}
            <div class="col-lg-6 col-12">
                <div class="card">
                    <div class="card-header border-bottom py-1">
                        <h5 class="card-title mb-0">
                            <span class="badge badge-light-primary me-50" style="font-size:0.85rem;">Old Regime</span>
                            <small class="text-muted">FY {{ $fy }}</small>
                        </h5>
                        <button type="button" class="btn btn-sm btn-primary add-slab-btn" data-regime="old">
                            <i data-feather="plus" style="width:14px;height:14px;"></i> Add Slab
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:5%">#</th>
                                    <th style="width:30%">Min Income (₹)</th>
                                    <th style="width:30%">Max Income (₹)</th>
                                    <th style="width:15%">Rate (%)</th>
                                    <th style="width:20%" class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($oldSlabs as $i => $slab)
                                    <tr data-id="{{ $slab->id }}">
                                        <td>{{ $i + 1 }}</td>
                                        <td>₹ {{ number_format($slab->min_income, 0) }}</td>
                                        <td>{{ $slab->max_income ? '₹ ' . number_format($slab->max_income, 0) : '∞ No Limit' }}</td>
                                        <td><strong>{{ $slab->rate }}%</strong></td>
                                        <td class="text-center">
                                            <button class="btn btn-sm btn-icon btn-outline-primary edit-slab-btn me-25"
                                                    data-id="{{ $slab->id }}" data-regime="old"
                                                    data-min="{{ $slab->min_income }}" data-max="{{ $slab->max_income }}"
                                                    data-rate="{{ $slab->rate }}" data-sort="{{ $slab->sort_order }}"
                                                    title="Edit">
                                                <i data-feather="edit-2" class="font-small-4"></i>
                                            </button>
                                            <button class="btn btn-sm btn-icon btn-outline-danger delete-slab-btn"
                                                    data-url="/{{ $alias }}/tdx/tax-slabs/{{ $slab->id }}/delete"
                                                    title="Delete">
                                                <i data-feather="trash-2" class="font-small-4"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr class="empty-row">
                                        <td colspan="5" class="text-center py-2 text-muted">
                                            No slabs configured. Click "Add Slab" or "Load Default Slabs".
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- New Regime --}}
            <div class="col-lg-6 col-12">
                <div class="card">
                    <div class="card-header border-bottom py-1">
                        <h5 class="card-title mb-0">
                            <span class="badge badge-light-success me-50" style="font-size:0.85rem;">New Regime</span>
                            <small class="text-muted">FY {{ $fy }}</small>
                        </h5>
                        <button type="button" class="btn btn-sm btn-success add-slab-btn" data-regime="new">
                            <i data-feather="plus" style="width:14px;height:14px;"></i> Add Slab
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width:5%">#</th>
                                    <th style="width:30%">Min Income (₹)</th>
                                    <th style="width:30%">Max Income (₹)</th>
                                    <th style="width:15%">Rate (%)</th>
                                    <th style="width:20%" class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($newSlabs as $i => $slab)
                                    <tr data-id="{{ $slab->id }}">
                                        <td>{{ $i + 1 }}</td>
                                        <td>₹ {{ number_format($slab->min_income, 0) }}</td>
                                        <td>{{ $slab->max_income ? '₹ ' . number_format($slab->max_income, 0) : '∞ No Limit' }}</td>
                                        <td><strong>{{ $slab->rate }}%</strong></td>
                                        <td class="text-center">
                                            <button class="btn btn-sm btn-icon btn-outline-primary edit-slab-btn me-25"
                                                    data-id="{{ $slab->id }}" data-regime="new"
                                                    data-min="{{ $slab->min_income }}" data-max="{{ $slab->max_income }}"
                                                    data-rate="{{ $slab->rate }}" data-sort="{{ $slab->sort_order }}"
                                                    title="Edit">
                                                <i data-feather="edit-2" class="font-small-4"></i>
                                            </button>
                                            <button class="btn btn-sm btn-icon btn-outline-danger delete-slab-btn"
                                                    data-url="/{{ $alias }}/tdx/tax-slabs/{{ $slab->id }}/delete"
                                                    title="Delete">
                                                <i data-feather="trash-2" class="font-small-4"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr class="empty-row">
                                        <td colspan="5" class="text-center py-2 text-muted">
                                            No slabs configured. Click "Add Slab" or "Load Default Slabs".
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </section>

    {{-- Add/Edit Slab Modal --}}
    <div class="modal fade" id="slabModal" tabindex="-1" aria-labelledby="slabModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="slabModalLabel">Add Tax Slab</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modal_slab_id" value="">
                    <input type="hidden" id="modal_regime" value="">
                    <div class="mb-1">
                        <label class="form-label">Regime</label>
                        <input type="text" id="modal_regime_display" class="form-control" readonly>
                    </div>
                    <div class="mb-1">
                        <label class="form-label">Min Income (₹) <span class="text-danger">*</span></label>
                        <input type="number" id="modal_min_income" class="form-control" min="0" step="1" placeholder="e.g. 400000">
                    </div>
                    <div class="mb-1">
                        <label class="form-label">Max Income (₹) <small class="text-muted">(empty = no limit)</small></label>
                        <input type="number" id="modal_max_income" class="form-control" min="0" step="1" placeholder="e.g. 800000">
                    </div>
                    <div class="mb-1">
                        <label class="form-label">Rate (%) <span class="text-danger">*</span></label>
                        <input type="number" id="modal_rate" class="form-control" min="0" max="100" step="0.01" placeholder="e.g. 5">
                    </div>
                    <div class="mb-1">
                        <label class="form-label">Sort Order</label>
                        <input type="number" id="modal_sort_order" class="form-control" min="0" value="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="btnSaveSlab">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer-script')
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
        if (typeof feather !== 'undefined') { feather.replace(); }

        $(function() {
            var csrfToken = '{{ csrf_token() }}';
            var alias = '{{ $alias }}';
            var fyId = '{{ $fyId }}';

            // ========== Add Slab ==========
            $('body').on('click', '.add-slab-btn', function() {
                var regime = $(this).data('regime');
                $('#slabModalLabel').text('Add Tax Slab — ' + (regime === 'old' ? 'Old' : 'New') + ' Regime');
                $('#modal_slab_id').val('');
                $('#modal_regime').val(regime);
                $('#modal_regime_display').val(regime === 'old' ? 'Old Regime' : 'New Regime');
                $('#modal_min_income').val('');
                $('#modal_max_income').val('');
                $('#modal_rate').val('');
                $('#modal_sort_order').val(0);
                $('#slabModal').modal('show');
            });

            // ========== Edit Slab ==========
            $('body').on('click', '.edit-slab-btn', function() {
                var regime = $(this).data('regime');
                $('#slabModalLabel').text('Edit Tax Slab — ' + (regime === 'old' ? 'Old' : 'New') + ' Regime');
                $('#modal_slab_id').val($(this).data('id'));
                $('#modal_regime').val(regime);
                $('#modal_regime_display').val(regime === 'old' ? 'Old Regime' : 'New Regime');
                $('#modal_min_income').val($(this).data('min'));
                $('#modal_max_income').val($(this).data('max') || '');
                $('#modal_rate').val($(this).data('rate'));
                $('#modal_sort_order').val($(this).data('sort') || 0);
                $('#slabModal').modal('show');
            });

            // ========== Save (Create / Update) ==========
            $('#btnSaveSlab').on('click', function() {
                var slabId = $('#modal_slab_id').val();
                var isEdit = slabId !== '';
                var url = isEdit
                    ? '/' + alias + '/tdx/tax-slabs/' + slabId + '/update'
                    : '/' + alias + '/tdx/tax-slabs/store';

                var data = {
                    '_token': csrfToken,
                    'regime': $('#modal_regime').val(),
                    'financial_year_id': fyId,
                    'min_income': $('#modal_min_income').val(),
                    'max_income': $('#modal_max_income').val() || null,
                    'rate': $('#modal_rate').val(),
                    'sort_order': $('#modal_sort_order').val() || 0
                };
                if (isEdit) data['_method'] = 'PUT';

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    success: function(response) {
                        if (response.code === 'success') {
                            $('#slabModal').modal('hide');
                            Swal.fire({ title: 'Success', text: response.message, icon: 'success', confirmButtonColor: '#00c292' })
                                .then(function() { location.reload(); });
                        } else {
                            Swal.fire({ title: 'Error!', text: response.message, icon: 'warning' });
                        }
                    },
                    error: function(xhr) {
                        var msg = 'Something went wrong.';
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            msg = Object.values(xhr.responseJSON.errors).flat().join('\n');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        Swal.fire({ title: 'Validation Error', text: msg, icon: 'error' });
                    }
                });
            });

            // ========== Delete Slab ==========
            $('body').on('click', '.delete-slab-btn', function() {
                var url = $(this).data('url');
                Swal.fire({
                    title: "Are you sure?",
                    text: "This tax slab will be deleted.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "Cancel"
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'DELETE',
                            url: url,
                            data: { '_token': csrfToken, '_method': 'DELETE' },
                            success: function(response) {
                                if (response.code === 'success') {
                                    Swal.fire({ title: 'Deleted', text: response.message, icon: 'success', confirmButtonColor: '#00c292' })
                                        .then(function() { location.reload(); });
                                } else {
                                    Swal.fire({ title: 'Error!', text: response.message, icon: 'warning' });
                                }
                            }
                        });
                    }
                });
            });

            // ========== Load Default Slabs ==========
            $('body').on('click', '.load-defaults-btn', function() {
                var regime = $(this).data('regime');
                var regimeLabel = regime === 'both' ? 'Old & New Regime' : (regime === 'old' ? 'Old Regime' : 'New Regime');
                Swal.fire({
                    title: "Load Default Slabs?",
                    html: "This will load government-defined default slabs for <strong>" + regimeLabel + "</strong> (FY {{ $fy }}).<br><small class='text-muted'>Note: Defaults can only be loaded when no slabs exist for the selected regime.</small>",
                    icon: "info",
                    showCancelButton: true,
                    confirmButtonColor: "#28a745",
                    confirmButtonText: "Yes, load defaults",
                    cancelButtonText: "Cancel"
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'POST',
                            url: '/' + alias + '/tdx/tax-slabs/load-defaults',
                            data: { '_token': csrfToken, 'financial_year_id': fyId, 'regime': regime },
                            success: function(response) {
                                if (response.code === 'success') {
                                    Swal.fire({ title: 'Success', text: response.message, icon: 'success', confirmButtonColor: '#00c292' })
                                        .then(function() { location.reload(); });
                                } else {
                                    Swal.fire({ title: 'Error!', text: response.message, icon: 'warning' });
                                }
                            },
                            error: function(xhr) {
                                Swal.fire({ title: 'Error!', text: xhr.responseJSON?.message || 'Failed to load defaults.', icon: 'error' });
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush