@extends('backend.app')

@section('title', 'Store Managers')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Store Managers</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Managers</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="mb-3 d-flex justify-content-end">
                    <a href="{{ route('admin.managers.create') }}" class="btn btn-primary">
                        <i class="fe fe-user-plus me-1"></i> Add Manager
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Store</th>
                                <th>Status</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($managers as $manager)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $manager->name }}</td>
                                    <td>{{ $manager->email }}</td>
                                    <td>{{ $manager->store?->name ?? '—' }}</td>
                                    <td>
                                        @php
                                            $bg = $manager->status === 'active' ? '#4CAF50' : '#ccc';
                                        @endphp
                                        <span class="manager-status-badge"
                                              data-id="{{ $manager->id }}"
                                              data-status="{{ $manager->status }}"
                                              style="background:{{ $bg }};color:#fff;padding:6px 14px;border-radius:5px;cursor:pointer;display:inline-block;font-weight:500;transition:opacity 0.2s;"
                                              title="Click to change status">
                                            {{ ucfirst($manager->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $manager->created_at->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4">No managers found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#datatable')) {
            $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                pagingType: "full_numbers",
                dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",
            });
        }
    });

    const statusOptions = [
        { value: 'active',   label: 'Active',   color: '#4CAF50', icon: '✅' },
        { value: 'inactive', label: 'Inactive', color: '#ccc',    icon: '❌' },
    ];

    $(document).on('click', '.manager-status-badge', function () {
        let badge = $(this);
        let managerId = badge.data('id');
        let currentStatus = badge.data('status');

        let buttonsHtml = '<div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">';
        statusOptions.forEach(function (opt) {
            let isActive = opt.value === currentStatus;
            let outline = isActive ? 'outline:3px solid ' + opt.color + ';outline-offset:2px;' : '';
            let opacity = isActive ? 'opacity:0.7;' : '';
            buttonsHtml += '<button type="button" class="swal-status-btn" data-value="' + opt.value + '" ' +
                'style="background:' + opt.color + ';color:#fff;border:none;padding:12px 20px;border-radius:8px;' +
                'font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;' + outline + opacity +
                'display:flex;align-items:center;justify-content:center;gap:8px;">' +
                '<span style="font-size:18px;">' + opt.icon + '</span> ' + opt.label +
                (isActive ? ' <span style="font-size:12px;opacity:0.8;">(current)</span>' : '') +
                '</button>';
        });
        buttonsHtml += '</div>';

        Swal.fire({
            title: 'Change Manager Status',
            html: buttonsHtml,
            showConfirmButton: false,
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            didOpen: function () {
                document.querySelectorAll('.swal-status-btn').forEach(function (btn) {
                    btn.addEventListener('mouseenter', function () {
                        if (this.dataset.value !== currentStatus) {
                            this.style.transform = 'scale(1.03)';
                            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                        }
                    });
                    btn.addEventListener('mouseleave', function () {
                        this.style.transform = 'scale(1)';
                        this.style.boxShadow = 'none';
                    });
                    btn.addEventListener('click', function () {
                        let newStatus = this.dataset.value;
                        if (newStatus === currentStatus) {
                            Swal.close();
                            return;
                        }
                        updateManagerStatus(managerId, newStatus);
                        Swal.close();
                    });
                });
            }
        });
    });

    function updateManagerStatus(managerId, newStatus) {
        let statusUrl = '{{ route('admin.managers.status', ':id') }}'.replace(':id', managerId);

        $.ajax({
            type: 'PATCH',
            url: statusUrl,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { status: newStatus },
            success: function (resp) {
                if (resp.success) {
                    toastr.success(resp.message);
                    location.reload();
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('Failed to update status. Please try again.');
            }
        });
    }
</script>
@endpush