@extends('layouts.app')

@section('content')
<div class="container-wrapper">
    <div class="row align-items-center mb-4">
        <div class="col">
            <h2 class="h3 mb-0 text-gray-800">GST / Taxes</h2>
            <p class="text-muted small mb-0">Manage tax rates and composite tax groups for your transactions.</p>
        </div>
        <div class="col-auto">
            <a href="{{ route('taxes.create') }}" class="btn btn-primary rounded-pill px-4">
                <i class="fas fa-plus me-2"></i> Add Tax
            </a>
            <button class="btn btn-outline-primary rounded-pill px-4 ms-2" data-bs-toggle="modal" data-bs-target="#taxGroupModal">
                <i class="fas fa-layer-group me-2"></i> New Tax Group
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4 rounded-3" role="alert">
            <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white border-0 p-0">
            <ul class="nav nav-tabs border-0" id="taxTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active border-0 px-4 py-3 fw-bold small text-uppercase" id="taxes-tab" data-bs-toggle="tab" data-bs-target="#taxes-pane" type="button" role="tab">Taxes</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link border-0 px-4 py-3 fw-bold small text-uppercase" id="groups-tab" data-bs-toggle="tab" data-bs-target="#groups-pane" type="button" role="tab">Tax Groups</button>
                </li>
            </ul>
        </div>
        <div class="card-body p-0">
            <div class="tab-content" id="taxTabsContent">
                <!-- Individual Taxes Pane -->
                <div class="tab-pane fade show active" id="taxes-pane" role="tabpanel" tabindex="0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4 py-3 small fw-bold text-muted border-0 uppercase">Tax Name</th>
                                    <th class="py-3 small fw-bold text-muted border-0 uppercase">Rate (%)</th>
                                    <th class="py-3 small fw-bold text-muted border-0 uppercase">Type</th>
                                    <th class="py-3 small fw-bold text-muted border-0 text-end pe-4 uppercase">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($taxes as $tax)
                                    <tr>
                                        <td class="ps-4 fw-bold text-dark">{{ $tax->name }}</td>
                                        <td>{{ number_format($tax->rate, 2) }}%</td>
                                        <td>
                                            @if($tax->type === 'Output')
                                                <span class="badge bg-success-soft text-success px-3 rounded-pill" style="background-color: rgba(25, 135, 84, 0.1);">Output</span>
                                            @else
                                                <span class="badge bg-warning-soft text-warning px-3 rounded-pill" style="background-color: rgba(255, 193, 7, 0.1);">Input</span>
                                            @endif
                                        </td>
                                        <td class="text-end pe-4">
                                            <div class="dropdown">
                                                <button class="btn btn-light btn-sm rounded-circle shadow-sm" type="button" data-bs-toggle="dropdown">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end border-0 shadow">
                                                    <li><a class="dropdown-item" href="{{ route('taxes.edit', $tax) }}"><i class="fas fa-edit me-2 text-muted"></i> Edit</a></li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <form action="{{ route('taxes.destroy', $tax) }}" method="POST" onsubmit="return confirm('Delete this tax?')">
                                                            @csrf @method('DELETE')
                                                            <button class="dropdown-item text-danger"><i class="fas fa-trash-alt me-2"></i> Delete</button>
                                                        </form>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center py-5 text-muted">No individual taxes defined.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Tax Groups Pane -->
                <div class="tab-pane fade" id="groups-pane" role="tabpanel" tabindex="0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="ps-4 py-3 small fw-bold text-muted border-0 uppercase">Group Name</th>
                                    <th class="py-3 small fw-bold text-muted border-0 uppercase">Included Taxes</th>
                                    <th class="py-3 small fw-bold text-muted border-0 uppercase">Total Rate (%)</th>
                                    <th class="py-3 small fw-bold text-muted border-0 text-end pe-4 uppercase">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($taxGroups as $group)
                                    <tr>
                                        <td class="ps-4 fw-bold text-dark">{{ $group->name }}</td>
                                        <td>
                                            @foreach($group->taxes as $gtax)
                                                <span class="badge bg-light text-dark border me-1">{{ $gtax->name }} ({{ $gtax->rate }}%)</span>
                                            @endforeach
                                        </td>
                                        <td class="fw-bold text-primary">{{ number_format($group->total_rate, 2) }}%</td>
                                        <td class="text-end pe-4">
                                            <form action="{{ route('taxes.destroyGroup', $group->id) }}" method="POST" onsubmit="return confirm('Delete this tax group?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-light btn-sm rounded-circle text-danger shadow-sm"><i class="fas fa-trash-alt"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center py-5 text-muted">No tax groups defined.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Tax Group Modal -->
<div class="modal fade" id="taxGroupModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow rounded-4">
            <form action="{{ route('taxes.storeGroup') }}" method="POST">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">Create Tax Group</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-4">
                    <div class="mb-4">
                        <label class="form-label small fw-bold text-muted text-uppercase">Group Name</label>
                        <input type="text" name="name" class="form-control rounded-3 border-light bg-light" placeholder="e.g. GST 18%" required>
                    </div>
                    <div class="mb-0">
                        <label class="form-label small fw-bold text-muted text-uppercase">Select Taxes</label>
                        <div class="bg-light p-3 rounded-3 border-light" style="max-height: 200px; overflow-y: auto;">
                            @foreach($taxes as $tax)
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="tax_ids[]" value="{{ $tax->id }}" id="tax_{{ $tax->id }}">
                                <label class="form-check-label d-flex justify-content-between w-100 ps-2" for="tax_{{ $tax->id }}">
                                    <span>{{ $tax->name }}</span>
                                    <span class="text-muted small">{{ $tax->rate }}%</span>
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <div class="form-text small mt-2">The total rate will be calculated automatically.</div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-toggle="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Create Group</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.nav-tabs .nav-link { color: #6c757d; border-bottom: 2px solid transparent !important; }
.nav-tabs .nav-link.active { color: #0d6efd; border-bottom: 2px solid #0d6efd !important; background: transparent; }
.uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
.form-control:focus { box-shadow: none; border-color: #0d6efd; background-color: #fff !important; }
</style>
@endsection