@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <style>
        .heads-row { background-color: #f8f9fa; }
        .heads-toggle { cursor: pointer; }
        .heads-toggle i { transition: transform 0.2s; }
        .heads-toggle.collapsed i { transform: rotate(-90deg); }
        .head-count-badge { font-size: 0.75rem; }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Tax Sections</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 Sections</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-tax-sections">
        <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">All Tax Sections</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <div class="form-label-group me-2">
                                    <form>
                                        <input type="text" name="search" placeholder="Search" id="search"
                                            class="form-control" value="{{ request('search') }}">
                                    </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>
                                <a href="/{{ $alias }}/tdx/tax-sections/create" class="btn btn-success btn-sm">
                                    <i data-feather="plus"></i> Add Tax Section
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th width="3%">#</th>
                                    <th width="12%">Section Code</th>
                                    <th width="20%">Name</th>
                                    <th width="12%">Max Limit (&#8377;)</th>
                                    <th width="10%">Regime</th>
                                    <th width="10%">Heads</th>
                                    <th width="8%">Status</th>
                                    <th width="10%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($sections as $index => $section)
                                    <tr>
                                        <td>{{ $sections->firstItem() + $index }}</td>
                                        <td><strong>{{ $section->section_code }}</strong></td>
                                        <td>{{ $section->name }}</td>
                                        <td>{{ $section->max_limit > 0 ? '₹ ' . number_format($section->max_limit, 2) : 'No Limit' }}</td>
                                        <td>
                                            @php
                                                $regimeColors = ['old' => 'primary', 'new' => 'success', 'both' => 'info'];
                                            @endphp
                                            <span class="badge badge-light-{{ $regimeColors[$section->regime_applicable] ?? 'secondary' }}">
                                                {{ ucfirst($section->regime_applicable) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($section->heads->count() > 0)
                                                <a class="heads-toggle" data-bs-toggle="collapse" href="#heads-{{ $section->id }}" role="button" aria-expanded="false">
                                                    <span class="badge bg-primary head-count-badge">
                                                        {{ $section->heads->count() }} {{ \Illuminate\Support\Str::plural('head', $section->heads->count()) }}
                                                    </span>
                                                    <i data-feather="chevron-down" class="font-small-4 ms-25"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            <span class="badge badge-light-{{ $section->status === 'active' ? 'success' : 'danger' }}">
                                                {{ ucfirst($section->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="/{{ $alias }}/tdx/tax-sections/{{ $section->id }}/edit"
                                                   class="btn btn-sm btn-outline-primary me-50" title="Edit">
                                                    <i data-feather="edit-2" class="font-small-4"></i>
                                                </a>
                                                <a class="btn btn-sm btn-outline-danger"
                                                   href="javascript:void(0);"
                                                   data-url="/{{ $alias }}/tdx/tax-sections/{{ $section->id }}/delete"
                                                   data-request="remove"
                                                   data-message="This tax section and all its heads will be deleted. Are you sure?"
                                                   title="Delete">
                                                    <i data-feather="trash-2" class="font-small-4"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {{-- Collapsible heads row --}}
                                    @if($section->heads->count() > 0)
                                        <tr class="heads-row">
                                            <td colspan="8" class="p-0">
                                                <div class="collapse" id="heads-{{ $section->id }}">
                                                    <div class="p-1">
                                                        <table class="table table-sm table-bordered mb-0">
                                                            <thead class="table-light">
                                                                <tr>
                                                                    <th width="5%">#</th>
                                                                    <th width="13%">Code</th>
                                                                    <th width="25%">Head Name</th>
                                                                    <th width="13%">Max Limit (&#8377;)</th>
                                                                    <th width="9%">Status</th>
                                                                    <th width="13%">Proof Required</th>
                                                                    <th width="22%">Description</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @foreach($section->heads as $hIndex => $head)
                                                                    <tr>
                                                                        <td>{{ $hIndex + 1 }}</td>
                                                                        <td>{{ $head->code ?: '—' }}</td>
                                                                        <td>{{ $head->name }}</td>
                                                                        <td>{{ $head->max_limit > 0 ? '₹ ' . number_format($head->max_limit, 2) : 'No Limit' }}</td>
                                                                        <td>
                                                                            <span class="badge badge-light-{{ $head->status === 'active' ? 'success' : 'danger' }}">
                                                                                {{ ucfirst($head->status) }}
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            @if($head->is_proof_required)
                                                                                <span class="badge badge-light-warning">Yes</span>
                                                                            @else
                                                                                <span class="badge badge-light-secondary">No</span>
                                                                            @endif
                                                                        </td>
                                                                        <td>{{ \Illuminate\Support\Str::limit($head->description, 40) ?: '—' }}</td>
                                                                    </tr>
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-3">
                                            <p class="mb-0 text-muted">No tax sections found. Click "Add Tax Section" to create one.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($sections->hasPages())
                        <div class="card-footer">
                            {{ $sections->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Offcanvas Filter --}}
    <form method="get" id="filter-form">
        <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>
                            <option value="both" @if(request('regime')=='both') selected @endif>Both</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/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
        $(function() {
            if (typeof feather !== 'undefined') { feather.replace(); }

            // Toggle chevron direction on collapse
            $('.heads-toggle').on('click', function() {
                $(this).toggleClass('collapsed');
            });
        });
    </script>
@endpush