@extends('layouts.app')

@section('title', 'Allowed Domains')

@section('head')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('content')
<div class="max-w-7xl mx-auto my-10">
    <h1 class="text-center font-semibold text-4xl">👾 Quản lý danh sách domain</h1>
    <div class="flex align-center justify-center my-4">
        <button class="bg-green-300 hover:opacity-90 p-3 rounded font-semibold text-gray-800 hover:scale-105 btn-add">🤖 Thêm domain</button>
    </div>

    <!-- Pagination Top -->
    <div class="d-flex justify-content-between align-items-center mb-3 small text-muted">
        <span>
            Hiển thị {{ $allowed_domains->firstItem() ?? 0 }} - {{ $allowed_domains->lastItem() ?? 0 }} 
            trong tổng số {{ $allowed_domains->total() }} bản ghi ({{ $allowed_domains->perPage() }} bản ghi/trang)
        </span>
        <div>{{ $allowed_domains->links() }}</div>
    </div>

    <!-- Bảng dữ liệu -->
    <div class="mt-6 overflow-x-auto">
        <table class="min-w-full border border-gray-300 rounded-lg overflow-hidden">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-4 py-2 border">ID</th>
                    <th class="px-4 py-2 border">Domain</th>
                    <th class="px-4 py-2 border">Hoạt động</th>
                    <th class="px-4 py-2 border">Mô tả</th>
                    <th class="px-4 py-2 border">Người tạo</th>
                    <th class="px-4 py-2 border">Người sửa</th>
                    <th class="px-4 py-2 border">Thời gian tạo</th>
                    <th class="px-4 py-2 border">Hành động</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($allowed_domains as $item)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-2 border text-center">{{ $item->id }}</td>
                        <td class="px-4 py-2 border">{{ $item->domain }}</td>
                        <td class="px-4 py-2 border text-center">
                            @if($item->is_active)
                                <span class="text-green-600 font-semibold">Hoạt động</span>
                            @else
                                <span class="text-red-600 font-semibold">Không hoạt động</span>
                            @endif
                        </td>
                        <td class="px-4 py-2 border">{{ $item->description }}</td>
                        <td class="px-4 py-2 border text-center">{{ $item->created_by_name }}</td>
                        <td class="px-4 py-2 border text-center">{{ $item->updated_by_name }}</td>
                        <td class="px-4 py-2 border text-center">{{ Carbon\Carbon::parse($item->created_at)->addHours(7)->format('H:i d/m/Y') }}</td>
                        <td class="px-4 py-2 border text-center">
                            <button 
                                class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded btn-edit"
                                data-id="{{ $item->id }}">
                                ✏️
                            </button>
                            <button 
                                class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded btn-delete"
                                data-id="{{ $item->id }}">
                                🗑️
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-4 py-4 text-center text-gray-500">Không có dữ liệu</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination Bottom -->
    <div class="d-flex justify-content-between align-items-center mt-3 small text-muted">
        <span>
            Hiển thị {{ $allowed_domains->firstItem() ?? 0 }} - {{ $allowed_domains->lastItem() ?? 0 }} 
            trong tổng số {{ $allowed_domains->total() }} bản ghi ({{ $allowed_domains->perPage() }} bản ghi/trang)
        </span>
        <div>{{ $allowed_domains->links() }}</div>
    </div>

    <!-- MODAL ADD -->
    <div id="modalAdd" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
        <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
            <h2 class="text-2xl font-semibold mb-4 text-center">🗂️ Thêm Domain</h2>

            <form id="formAdd">
                @csrf

                <div class="mb-3">
                    <label class="font-semibold">Domain:</label>
                    <input type="text" name="domain" class="w-full border p-2 rounded" required>
                </div>

                <div class="mb-3">
                    <label class="font-semibold">Mô tả:</label>
                    <textarea name="description" class="w-full border p-2 rounded"></textarea>
                </div>

                <div class="mb-3">
                    <label class="font-semibold">Kích hoạt:</label>
                    <select name="is_active" class="w-full border p-2 rounded">
                        <option value="1">Hoạt động</option>
                        <option value="0">Không hoạt động</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 mt-4">
                    <button type="button" class="px-4 py-2 bg-gray-300 rounded btn-close-add">Hủy</button>
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded">Thêm</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL EDIT -->
    <div id="modalEdit" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
        <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-lg">
            <h2 class="text-2xl font-semibold mb-4 text-center">✏️ Sửa Domain</h2>

            <form id="formEdit" method="POST">
                @csrf
                <input type="hidden" name="id" id="edit_id">

                <div class="mb-3">
                    <label class="font-semibold">Domain:</label>
                    <input type="text" name="domain" id="edit_domain" class="w-full border p-2 rounded" required>
                </div>

                <div class="mb-3">
                    <label class="font-semibold">Mô tả:</label>
                    <textarea name="description" id="edit_description" class="w-full border p-2 rounded"></textarea>
                </div>

                <div class="mb-3">
                    <label class="font-semibold">Kích hoạt:</label>
                    <select name="is_active" id="edit_is_active" class="w-full border p-2 rounded">
                        <option value="1">Hoạt động</option>
                        <option value="0">Không hoạt động</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 mt-4">
                    <button type="button" class="px-4 py-2 bg-gray-300 rounded btn-close-edit">Hủy</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Cập nhật</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Mở modal add
        $('.btn-add').click(function() {
            $('#modalAdd').removeClass('hidden');
        });

        // Đóng modal add
        $('.btn-close-add').click(function() {
            $('#modalAdd').addClass('hidden');
        });

        // Mở modal add
        $('.btn-edit').click(function() {
            const id = $(this).data('id');

            // Tạo url delete
            let urlShow = "{{ route('allowed-domain.show', ['id' => ':id']) }}";
            urlShow = urlShow.replace(':id', id);

            $.ajax({
                url: urlShow,
                type: 'GET',
                success: function(response) {
                    const data = response.data;
                    
                    $('#edit_id').val(data.id);
                    $('#edit_domain').val(data.domain);
                    $('#edit_description').val(data.description);
                    $('#edit_is_active').val(data.is_active);
                    $('#modalEdit').removeClass('hidden');
                },
                error: function(err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        });

        // Đóng modal add
        $('.btn-close-edit').click(function() {
            $('#modalEdit').addClass('hidden');
        });

        // Thêm domain
        $('#formAdd').submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('allowed-domain.store') }}",
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    Swal.fire({
                        icon: "success",
                        title: "Thành công",
                        text: "Thêm domain thành công!",
                        showConfirmButton: false,
                    }).then(() => {
                        location.reload();
                    })
                },
                error: function(err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        })

        // Cập nhật domain
        $('#formEdit').submit(function(e) {
            e.preventDefault();
            const id = $('#edit_id').val();

            // Tạo url delete
            let urlUpdate = "{{ route('allowed-domain.update', ['id' => ':id']) }}";
            urlUpdate = urlUpdate.replace(':id', id);

            $.ajax({
                url: urlUpdate,
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    Swal.fire({
                        icon: "success",
                        title: "Thành công",
                        text: "Cập nhật domain thành công!",
                        showConfirmButton: false,
                    }).then(() => {
                        location.reload();
                    })
                },
                error: function(err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        })

        // Xóa domain
        $('.btn-delete').click(function() {

            Swal.fire({
                title: "Xóa domain",
                text: "Bạn có chắc chắn muốn xóa domain này?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Xóa",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    const id = $(this).data('id');

                    // Tạo url delete
                    let urlDelete = "{{ route('allowed-domain.destroy', ['id' => ':id']) }}";
                    urlDelete = urlDelete.replace(':id', id);

                    $.ajax({
                        url: urlDelete,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Xóa domain thành công!",
                                showConfirmButton: false,
                            }).then(() => {
                                location.reload();
                            })
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            })
        })
    });
</script>
@endsection