@extends('layouts.tenant.master')
@section('title', 'Tax Menu')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ dynamic_url('assets/main/css/owlcarousel.css') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.dataTables.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
@endsection

@section('style')
@endsection

@section('breadcrumb-title')
    <h2>Manage<span> Sales Tax</span></h2>
@endsection

@section('breadcrumb-items')
    <li class="breadcrumb-item">Setting</li>
    <li class="breadcrumb-item">List</li>
    <li class="breadcrumb-item active">Sales Tax</li>
@endsection

@section('content')

    <div class="table-responsive table-xs">
        <table id="taxTable" class="table p-0 m-0 table-striped table-bordered table-sm" style="width:100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>County</th>
                    <th>State</th>
                    <th>Tax(%)</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="myTable">
                @foreach ($sales_taxes as $tax)
                    <tr>
                        <td>{{ $tax->id ?? 'N/A' }}</td>
                        <td>{{ $tax->counties ?? 'N/A' }}</td>
                        <td>{{ $tax->state->name ?? 'N/A' }}</td>
                        <td>{{ $tax->tax ?? 'N/A' }}</td>
                        <td>
                            <a class="" href="{{ route('tenant_setting_sales_tax_edit', $tax->id) }}">
                                <i class="fa fa-edit"></i> Edit
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr>
                    <th>ID</th>
                    <th>Country</th>
                    <th>State</th>
                    <th>Tax(%)</th>
                    <th>Actions</th>
                </tr>
            </tfoot>
        </table>
    </div>
@endsection

@section('script')
    <script>
        new DataTable('#taxTable', {
            // order: [
            //     [6, 'desc']
            // ], // [columnIndex, 'asc' or 'desc']
            initComplete: function() {
                this.api()
                    .columns()
                    .every(function(index) {
                        let column = this;
                        let input = $('thead tr:eq(1) th').eq(index).find('input');
                        if (input.length) {
                            input.on('keyup change', function() {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                        }
                    });
            }
        });
    </script>
    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: '{{ session('success') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @elseif(session('error'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: '{{ session('error') }}',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
    <script src="{{ dynamic_url('assets/main/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ dynamic_url('assets/main/js/select2/select2-custom.js') }}"></script>
@endsection