@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
@endpush

@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">
        <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>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom p-1">
                        <div class="head-label">
                            <h6 class="mb-0">Tax Slabs</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <form method="GET" class="d-flex align-items-center me-2">
                                    <select name="fy" class="form-select form-select-sm" style="width:140px;" onchange="this.form.submit()">
                                        @foreach($financialYears as $year)
                                            <option value="{{ $year->id }}" {{ $fyId == $year->id ? 'selected' : '' }}>FY {{ $year->label }}</option>
                                        @endforeach
                                    </select>
                                </form>
                                <div class="form-label-group me-2">
                                    <form>
                                        <input type="text" name="search" placeholder="Search" id="search"
                                            class="form-control" value="{{ request('search') }}">
                                        <input type="hidden" name="fy" value="{{ $fyId }}">
                                    </form>
                                </div>
                                <button class="dt-button btn btn-primary btn-sm me-2" type="button"
                                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                                    <i data-feather='filter'></i>
                                </button>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="download"></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 class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Regime</th>
                                    <th>Min Income (&#8377;)</th>
                                    <th>Max Income (&#8377;)</th>
                                    <th>Rate (%)</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($slabs as $index => $slab)
                                    <tr>
                                        <td>{{ $slabs->firstItem() + $index }}</td>
                                        <td>
                                            <span class="badge badge-light-{{ $slab->regime === 'old' ? 'primary' : 'success' }}">
                                                {{ ucfirst($slab->regime) }} Regime
                                            </span>
                                        </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>
                                            <span class="badge badge-light-{{ $slab->status === 'active' ? 'success' : 'danger' }}">
                                                {{ ucfirst($slab->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a class="btn btn-sm btn-outline-danger sa-params"
                                                   href="javascript:void(0);"
                                                   data-id="{{ $slab->id }}"
                                                   data-url="/{{ $alias }}/tdx/tax-slabs/{{ $slab->id }}/delete"
                                                   title="Delete">
                                                    <i data-feather="trash-2" class="font-small-4"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-3">
                                            <p class="mb-0 text-muted">No tax slabs for FY {{ $fy }}. Click "Load Default Slabs" to load government-defined slabs.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($slabs->hasPages())
                        <div class="card-footer">{{ $slabs->appends(['fy' => $fy])->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Offcanvas Filter --}}
    <form method="get" id="filter-form">
        <input type="hidden" name="fy" value="{{ $fyId }}">
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="form-label">Regime</label>
                        <select name="regime" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="old" @if(request('regime')=='old') selected @endif>Old</option>
                            <option value="new" @if(request('regime')=='new') selected @endif>New</option>
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="active" @if(request('status')=='active') selected @endif>Active</option>
                            <option value="inactive" @if(request('status')=='inactive') selected @endif>Inactive</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                    data-bs-dismiss="offcanvas" aria-label="Close">
                    <i data-feather='search' class="me-2"></i>Apply
                </button>
            </div>
        </div>
    </form>
@endsection

@push('footer-script')
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
        if (typeof feather !== 'undefined') { feather.replace(); }
        $(function() {
            // 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 <strong>replace</strong> all existing <strong>" + regimeLabel + "</strong> slabs with government-defined defaults for the selected FY.",
                    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': '{{ csrf_token() }}',
                                '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", confirmButtonColor: "#DD6B55" });
                                }
                            },
                            error: function(xhr) {
                                Swal.fire({ title: "Error!", text: xhr.responseJSON?.message || "Failed to load defaults.", icon: "error", confirmButtonColor: "#DD6B55" });
                            }
                        });
                    }
                });
            });

            // Delete slab
            $('body').on('click', '.sa-params', 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: "No, cancel"
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'DELETE',
                            url: url,
                            data: { '_token': '{{ csrf_token() }}', '_method': 'DELETE' },
                            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", confirmButtonColor: "#DD6B55" });
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush