{{-- resources/views/taxes/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Tax Management')
@section('header', 'Tax Rates')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-percent text-primary me-2"></i>Tax Rates Management
        </h5>
        <a href="{{ route('taxes.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add New Tax Rate
        </a>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="alert alert-info mb-4">
            <i class="fas fa-info-circle me-2"></i>
            <strong>How it works:</strong> Tax rates defined here can be selected during POS checkout. 
            Set one tax as default for automatic selection.
        </div>
        
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="taxesTable">
                <thead class="table-light">
                    <tr>
                        <th width="5%">ID</th>
                        <th width="20%">Tax Name</th>
                        <th width="10%">Rate</th>
                        <th width="10%">Type</th>
                        <th width="25%">Description</th>
                        <th width="10%">Products</th>
                        <th width="10%">Status</th>
                        <th width="10%">Default</th>
                        <th width="15%">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($taxes as $tax)
                    <tr>
                        <td>{{ $tax->id }}</td>
                        <td>
                            <i class="fas fa-percent text-info me-2"></i>
                            <strong>{{ $tax->name }}</strong>
                        </td>
                        <td>
                            @if($tax->type == 'percentage')
                                <span class="badge bg-primary">{{ $tax->rate }}%</span>
                            @else
                                <span class="badge bg-info">${{ number_format($tax->rate, 2) }}</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ ucfirst($tax->type) }}</span>
                        </td>
                        <td>{{ Str::limit($tax->description, 50) ?? '—' }}</td>
                        <td class="text-center">
                            <span class="badge bg-info">
                                {{ $tax->products_count }} Products
                            </span>
                        </td>
                        <td class="text-center">
                            @if($tax->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-danger">Inactive</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($tax->is_default)
                                <span class="badge bg-warning text-dark">
                                    <i class="fas fa-star"></i> Default
                                </span>
                            @else
                                <button class="btn btn-sm btn-outline-primary set-default" data-id="{{ $tax->id }}">
                                    <i class="fas fa-star"></i> Set Default
                                </button>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('taxes.edit', $tax) }}" class="btn btn-sm btn-info" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-warning toggle-status" 
                                        data-id="{{ $tax->id }}" data-name="{{ $tax->name }}" title="Toggle Status">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-danger delete-tax" 
                                        data-id="{{ $tax->id }}" data-name="{{ $tax->name }}" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <form id="toggle-form-{{ $tax->id }}" action="{{ route('taxes.toggle', $tax) }}" method="POST" style="display: none;">
                                @csrf
                                @method('PUT')
                            </form>
                            
                            <form id="default-form-{{ $tax->id }}" action="{{ route('taxes.set-default', $tax) }}" method="POST" style="display: none;">
                                @csrf
                                @method('PUT')
                            </form>
                            
                            <form id="delete-form-{{ $tax->id }}" action="{{ route('taxes.destroy', $tax) }}" method="POST" style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5">
                            <i class="fas fa-percent fa-3x text-muted mb-3 d-block"></i>
                            <p class="text-muted mb-2">No tax rates found</p>
                            <a href="{{ route('taxes.create') }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-plus"></i> Create Your First Tax Rate
                            </a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="mt-3">
            {{ $taxes->links() }}
        </div>
    </div>
</div>

<div class="card mt-3 bg-light">
    <div class="card-body">
        <h6><i class="fas fa-lightbulb text-warning me-2"></i>Tax Management Tips:</h6>
        <ul class="mb-0 small">
            <li><strong>Percentage Tax:</strong> Calculated as a percentage of the subtotal (e.g., 10% VAT)</li>
            <li><strong>Fixed Tax:</strong> A fixed amount added to each transaction (e.g., $5 service fee)</li>
            <li><strong>Default Tax:</strong> The tax rate that will be pre-selected in POS</li>
            <li><strong>Inactive Taxes:</strong> Won't appear in the POS tax selection dropdown</li>
            <li>You can have multiple tax rates and switch between them during checkout</li>
        </ul>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    $('#taxesTable').DataTable({
        pageLength: 10,
        responsive: true,
        ordering: true,
        searching: true,
        language: {
            search: "Search taxes:",
            lengthMenu: "Show _MENU_ taxes per page",
            info: "Showing _START_ to _END_ of _TOTAL_ taxes"
        }
    });
    
    // Set default tax
    $('.set-default').click(function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Set as Default Tax?',
            text: 'This tax rate will be automatically selected in POS',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, set as default!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('default-form-' + id).submit();
            }
        });
    });
    
    // Toggle status
    $('.toggle-status').click(function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        
        Swal.fire({
            title: 'Toggle Tax Status?',
            html: `Are you sure you want to change status of <strong>${name}</strong>?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, toggle it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('toggle-form-' + id).submit();
            }
        });
    });
    
    // Delete tax
    $('.delete-tax').click(function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        
        Swal.fire({
            title: 'Delete Tax Rate?',
            html: `Are you sure you want to delete <strong>${name}</strong>?<br><small class="text-danger">This action cannot be undone.</small>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    });
});
</script>
@endpush
@endsection