@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @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" aria-label="Close"></button>
                </div>
            @endif

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">Tax Rates</h4>
                    <a href="{{ url('/admin/tax-rates/create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Add New Tax Rate
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>State</th>
                                    <th>Code</th>
                                    <th>Country</th>
                                    <th>Rate</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($taxRates as $taxRate)
                                <tr>
                                    <td>{{ $taxRate->state_name }}</td>
                                    <td>{{ $taxRate->state_code }}</td>
                                    <td>{{ $taxRate->country }}</td>
                                    <td>{{ number_format($taxRate->rate, 2) }}%</td>
                                    <td>{{ $taxRate->description }}</td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input type="checkbox" class="form-check-input toggle-status" 
                                                   data-id="{{ $taxRate->id }}" 
                                                   {{ $taxRate->active ? 'checked' : '' }}>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ url('/admin/tax-rates/'.$taxRate->id.'/edit') }}" 
                                           class="btn btn-sm btn-info">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        <form action="{{ url('/admin/tax-rates/'.$taxRate->id) }}" 
                                            method="POST" class="d-inline">
                                          @csrf
                                          @method('DELETE')
                                          <button type="submit" class="btn btn-sm btn-danger" 
                                                  onclick="return confirm('Are you sure you want to delete this tax rate?')">
                                              <i class="fas fa-trash"></i> Delete
                                          </button>
                                      </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center">No tax rates found</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
$(document).ready(function() {
    // Delete button click
    $('.delete-btn').click(function() {
        let id = $(this).data('id');
        Swal.fire({
            title: 'Are you sure?',
            text: "This tax rate will be permanently deleted!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/admin/tax-rates/${id}`,
                    type: 'DELETE',
                    data: {_token: '{{ csrf_token() }}'},
                    success: function() {
                        location.reload();
                    }
                });
            }
        });
    });

    // Toggle status
    $('.toggle-status').change(function() {
        let id = $(this).data('id');
        let active = $(this).prop('checked');
        $.ajax({
            url: `/admin/tax-rates/${id}`,
            type: 'PUT',
            data: {
                _token: '{{ csrf_token() }}',
                active: active
            },
            success: function() {
                toastr.success('Status updated successfully');
            },
            error: function() {
                toastr.error('Failed to update status');
            }
        });
    });
});

    // Auto dismiss alerts after 5 seconds
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, 5000);
</script>

@endsection