@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                        <h5 class="mb-0">Blocked IP List</h5>
                        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#blockIpModal">
                            <i class="bi bi-shield-x me-1"></i> Block New IP
                        </button>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger border-0 bg-danger alert-dismissible fade show">
                                <div class="text-white">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif
                        <div class="table-responsive text-nowrap">
                            <table class="table table-striped my-table2 dataTable no-footer" id="datatable_internal">
                                <thead class="table-light">
                                    <tr>
                                        <th>IP Address</th>
                                        <th>Reason</th>
                                        <th>Status</th>
                                        <th>Created By</th>
                                        <th>Blocked At</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($ipBlocks as $ip)
                                        <tr id="partenTr_{{ $ip->id }}">
                                            <td>{{ $ip->ip_address }}</td>
                                            <td>{{ $ip->reason ?? 'N/A' }}</td>
                                            <td>
                                                <div class="form-check form-switch cursor-pointer">
                                                    <input class="form-check-input update-status" type="checkbox" 
                                                           data-id="{{ $ip->id }}" {{ $ip->status ? 'checked' : '' }}>
                                                </div>
                                            </td>
                                            <td>{{ $ip->creator->name ?? 'System' }}</td>
                                            <td>{{ $ip->created_at->format('M d, Y h:i A') }}</td>
                                            <td class="text-center">
                                                <div class="action-btn-group">
                                                    <a href="javascript:void(0)" class="action-btn action-btn-danger deleteButton"
                                                        data-parentid="partenTr_{{ $ip->id }}"
                                                        data-url="{{ route('admin.ip-block.delete', $ip->id) }}"
                                                        title="Delete IP Block">
                                                        <i class="bi bi-trash3-fill"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">No IP addresses blocked yet.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Block IP Modal -->
    <div class="modal fade" id="blockIpModal" tabindex="-1" aria-labelledby="blockIpModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title" id="blockIpModalLabel">Block New IP Address</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.ip-block.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">IP Address</label>
                            <input type="text" name="ip_address" class="form-control" placeholder="0.0.0.0" value="{{ request()->ip() }}" required>
                            <small class="text-muted">Your current IP: <strong>{{ request()->ip() }}</strong></small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Reason (Optional)</label>
                            <textarea name="reason" class="form-control" rows="3" placeholder="Why are you blocking this IP?"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger">Block IP</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(document).on('change', '.update-status', function() {
                let id = $(this).data('id');
                let status = $(this).prop('checked') ? 1 : 0;

                $.ajax({
                    url: "{{ route('admin.ip-block.update-status') }}",
                    method: 'PATCH',
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: id,
                        status: status
                    },
                    success: function(res) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: res.success,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'Something went wrong!',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                });
            });
        </script>
    @endpush
@endsection