@extends('admin.layouts.master')

@section('title', 'Manage Permissions')

@section('content')
    <style>
        span.select2-selection.select2-selection--single {
            height: 100%;
            padding: 6px;
        }
    </style>
    <div class="row">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-primary text-white py-3 px-4" style="padding: 9px !important">
                    <div class="row align-items-center">
                        <!-- Title -->
                        <div class="col-12 col-md-4 mb-2 mb-md-0">
                            <h4 class="mb-0 font-weight-bold text-white">
                                <i class="fas fa-key mr-2"></i> Permissions (Group Wise)
                            </h4>
                        </div>

                        <!-- Search Input -->
                        <div class="col-12 col-md-3 mb-2 mb-md-0">
                            <input type="text" id="searchInput" class="form-control" placeholder="Search Display Name">
                        </div>

                        <!-- Route Select2 -->
                        <div class="col-12 col-md-3">
                            <select id="routeSelect" class="form-control select2">
                                <option value="">All Routes</option>
                                @foreach ($routeList as $route)
                                    <option value="{{ $route['name'] }}">{{ $route['display_name'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-2">
                            <a href="{{ url('admin/security/route-read') }}" id="refreshRoute" class="btn btn-secondary">
                                <i class="fas fa-sync-alt"></i>
                            </a>
                        </div>
                    </div>
                </div>



                <div class="card-body p-2">
                    @foreach ($permissions as $prefix => $permissionList)
                        <div class="mb-4">
                            <h5 class="text-primary">{{ ucfirst($prefix) }}</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-sm permission-table mb-2">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Display Name</th>
                                            <th>Route</th>
                                            <th>URL</th>
                                            <th>Path</th>
                                            <th>Icon</th>
                                            <th>Method</th>
                                            <th>Showable</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($permissionList as $permission)
                                            @php
                                                $routeInfo = $routeList->firstWhere('name', $permission->route);
                                                $isGet = $routeInfo['isGet'] ?? 0;
                                                $isShowable = $routeInfo['isShowable'] ?? 0;
                                                $status = $permission->isShowable == 1 ? true : false;
                                                $path = $routeInfo['path'] ?? '';
                                                $disableShow =
                                                    strpos($permission->url, '?') !== false ||
                                                    strpos($permission->url, '=') !== false ||
                                                    strpos($permission->url, '{') !== false ||
                                                    strpos($permission->url, '}') !== false;
                                                $disableShow =
                                                    $disableShow == true || $permission->isGet != 'GET' ? true : false;
                                            @endphp
                                            <tr data-display="{{ strtolower($permission->display_name) }}"
                                                data-route="{{ $permission->route }}" data-id="{{ $permission->id }}">
                                                <td>{{ $permission->id }}</td>
                                                <td>{{ $permission->display_name }}</td>
                                                <td>{{ $permission->route }}</td>
                                                <td class="text-truncate" style="max-width:200px;"
                                                    title="{{ $permission->url }}">{{ $permission->url }}</td>
                                                <td>{{ $path }}</td>
                                                <td>{{ $permission->icon }}</td>
                                                <td>{{ $permission->isGet }}</td>
                                                <td>
                                                    <button
                                                        class="btn btn-sm toggle-showable {{ $status == 1 ? 'btn-success' : 'btn-danger' }}"
                                                        {{ $disableShow ? 'disabled' : '' }}>
                                                        {{ $status == 0 ? 'Hide' : 'Show' }}
                                                    </button>
                                                </td>
                                                <td>
                                                    <button class="btn btn-info btn-sm edit-permission-btn"
                                                        data-id="{{ $permission->id }}"
                                                        data-display="{{ $permission->display_name }}"
                                                        data-prefix="{{ $permission->prefix }}"
                                                        data-route="{{ $permission->route }}"
                                                        data-url="{{ $permission->url }}" data-path="{{ $path }}"
                                                        data-icon="{{ $permission->icon }}"
                                                        data-isGet="{{ $isGet }}"
                                                        data-isShowable="{{ $isShowable }}">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    @include('admin.permission.edit-modal')
@endsection

@section('js')
    <!-- Select2 CSS & JS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


    <style>
        /* Optional: rounded and shadowed toast */
        .colored-toast {
            border-radius: 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
            font-weight: bold;
            font-size: 14px;
            color: #fff !important;
        }
    </style>

    <script>
        $(document).ready(function() {

            // 🔔 Colorful Toast function
            function showToast(type, message) {
                let bgColor = '';
                switch (type) {
                    case 'success':
                        bgColor = '#28a745';
                        break; // Green
                    case 'error':
                        bgColor = '#dc3545';
                        break; // Red
                    case 'warning':
                        bgColor = '#ffc107';
                        break; // Yellow
                    case 'info':
                        bgColor = '#17a2b8';
                        break; // Blue
                    case 'question':
                        bgColor = '#6f42c1';
                        break; // Purple
                    default:
                        bgColor = '#343a40'; // Dark
                }

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: type,
                    title: message,
                    background: bgColor,
                    color: '#fff',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    customClass: {
                        popup: 'colored-toast'
                    },
                    didOpen: (toast) => {
                        toast.onmouseenter = Swal.stopTimer;
                        toast.onmouseleave = Swal.resumeTimer;
                    }
                });
            }

            // 🔍 Search by Display Name + Hide empty groups
            $('#searchInput').on('keyup', function() {
                let keyword = $(this).val().toLowerCase();

                $('.permission-table').each(function() {
                    let table = $(this);
                    let visibleRows = 0;

                    table.find('tbody tr').each(function() {
                        let tr = $(this);
                        if (tr.data('display').includes(keyword)) {
                            tr.show();
                            visibleRows++;
                        } else {
                            tr.hide();
                        }
                    });

                    // Hide entire group if no visible rows
                    if (visibleRows === 0) {
                        table.closest('div.mb-4').hide();
                    } else {
                        table.closest('div.mb-4').show();
                    }
                });
            });

            // 🔎 Filter by Route + Hide empty groups
            $('#routeSelect').on('change', function() {
                let routeName = $(this).val();

                $('.permission-table').each(function() {
                    let table = $(this);
                    let visibleRows = 0;

                    table.find('tbody tr').each(function() {
                        let tr = $(this);
                        if (routeName === '' || tr.data('route') === routeName) {
                            tr.show();
                            visibleRows++;
                        } else {
                            tr.hide();
                        }
                    });

                    // Hide entire group if no visible rows
                    if (visibleRows === 0) {
                        table.closest('div.mb-4').hide();
                    } else {
                        table.closest('div.mb-4').show();
                    }
                });
            });

            // ✅ Toggle isShowable
            $(document).on('click', '.toggle-showable', function() {
                let btn = $(this);
                if (btn.is(':disabled')) return;
                let tr = btn.closest('tr');
                let id = tr.data('id');
                let url = "{{ route('permissions.update', ['permission' => ':id']) }}".replace(':id', id);

                $.ajax({
                    url: url,
                    type: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        action: "toggle-isShowable",
                        id: id
                    },
                    success: function(res) {
                        if (res.status === "success") {
                            btn.toggleClass('btn-danger btn-success');
                            btn.html(res.isShowable);
                            showToast('success', 'Permission visibility updated');
                        } else {
                            showToast('error', 'Something went wrong!');
                        }
                    },
                    error: function() {
                        showToast('error', 'Server error occurred!');
                    }
                });
            });

            // ✏️ Edit Modal
            $(document).on('click', '.edit-permission-btn', function() {
                let btn = $(this);
                $('#edit_permission_id').val(btn.data('id'));
                $('#edit_display_name').val(btn.data('display'));
                $('#edit_prefix').val(btn.data('prefix'));
                $('#edit_route').val(btn.data('route'));
                $('#edit_url').val(btn.data('url'));
                $('#edit_path').val(btn.data('path'));
                $('#edit_icon').val(btn.data('icon'));
                $('#edit_isGet').val(btn.data('isGet'));
                $('#edit_isShowable').val(btn.data('isShowable'));
                $('#editPermissionModal').modal('show');
            });

            // 📝 Update Permission
            $('#editPermissionForm').on('submit', function(e) {
                e.preventDefault();
                let id = $('#edit_permission_id').val();
                let url = "{{ route('permissions.update', ['permission' => ':id']) }}".replace(':id', id);

                $.ajax({
                    url: url,
                    type: "PUT",
                    data: $(this).serialize() + '&action=permission-update',
                    success: function(res) {
                        if (res.status == 'success') {
                            showToast('success', 'Permission updated successfully');
                            setTimeout(() => {
                                location.reload();
                            }, 1200);
                        } else {
                            showToast('error', 'Something went wrong!');
                        }
                    },
                    error: function() {
                        showToast('error', 'Server error occurred!');
                    }
                });
            });

        });

        // Make header select searchable
        $('#routeSelect').select2({
            width: '100%',
            placeholder: "All Routes",
        });


        // Make modal select searchable and attach to modal
        $('#edit_route').select2({
            dropdownParent: $('#editPermissionModal'),
            width: '100%',
            placeholder: "Select Route",
        });
    </script>
@endsection