@extends('layouts.adminlte')

@section('title', 'Dashboard Profile')
@section('page_title', 'Dashboard Profile')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Dashboard Profile</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('guides.index', ['section' => 'dashboard-profile']) }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i>User Guide
                </a>
                <a href="{{ route('dashboard_profile.create') }}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i>Tambah Profil
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="dashboardProfileTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th style="width:60px">#</th>
                            <th>Name</th>
                            <th>Profil Menu</th>
                            <th>Status</th>
                            <th>Updated</th>
                            <th style="width:280px">Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copyProfileModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Copy Dashboard Profile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="copyProfileId" />
                    <div class="mb-3">
                        <label class="form-label">Nama Profil</label>
                        <input type="text" class="form-control" id="copyProfileName" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Profil Menu</label>
                        <select class="form-select" id="copyProfileMenuProfile">
                            <option value="">- Pilih Profil Menu -</option>
                            @foreach ($menuProfiles as $profile)
                                <option value="{{ $profile }}">{{ $profile }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="copyProfileSubmit">Copy</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const table = $('#dashboardProfileTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'scope_value' },
                    {
                        data: 'is_active',
                        render: (v) => v
                            ? '<span class="badge text-bg-success">Active</span>'
                            : '<span class="badge text-bg-secondary">Inactive</span>'
                    },
                    { data: 'updated_at', render: (v) => v || '-' },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => `
                            <a class="btn btn-sm btn-outline-info" href="{{ url('/dashboard-profile') }}/${row.id}/preview" target="_blank" rel="noopener">Preview</a>
                            <a class="btn btn-sm btn-outline-primary" href="{{ url('/dashboard-profile') }}/${row.id}/edit">Edit</a>
                            <button class="btn btn-sm btn-outline-secondary btn-copy" data-id="${row.id}" data-name="${row.name}">Copy</button>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-id="${row.id}">Delete</button>
                        `
                    }
                ]
            });

            const loadData = () => {
                $.getJSON('{{ route('dashboard_profile.data') }}')
                    .done((resp) => {
                        table.clear().rows.add(resp.data || []).draw();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error');
                    });
            };

            $('#dashboardProfileTable').on('click', '.btn-delete', function () {
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete profile?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/dashboard-profile') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            const copyModalEl = document.getElementById('copyProfileModal');
            const copyModal = copyModalEl ? new bootstrap.Modal(copyModalEl) : null;
            const copyNameInput = document.getElementById('copyProfileName');
            const copyMenuProfileSelect = document.getElementById('copyProfileMenuProfile');
            const copyIdInput = document.getElementById('copyProfileId');
            const copySubmit = document.getElementById('copyProfileSubmit');

            $('#dashboardProfileTable').on('click', '.btn-copy', function () {
                const id = Number($(this).data('id'));
                const name = $(this).data('name') || 'Profile';
                if (copyIdInput) copyIdInput.value = id;
                if (copyNameInput) copyNameInput.value = `${name} (Copy)`;
                if (copyModal) copyModal.show();
            });

            if (copySubmit) {
                copySubmit.addEventListener('click', () => {
                    const id = Number(copyIdInput?.value || 0);
                    const name = copyNameInput?.value?.trim() || '';
                    const menuProfile = copyMenuProfileSelect?.value || '';
                    if (!id || !name || !menuProfile) {
                        Swal.fire('Error', 'Nama dan profil menu wajib diisi', 'error');
                        return;
                    }
                    $.ajax({
                        url: `{{ url('/dashboard-profile') }}/${id}/copy`,
                        type: 'POST',
                        data: { name, menu_profile: menuProfile }
                    }).done((resp) => {
                        if (copyModal) copyModal.hide();
                        loadData();
                        Swal.fire('Copied', resp?.message || 'Copied', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Copy failed', 'error');
                    });
                });
            }

            loadData();
        });
    </script>
@endpush