@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Items"
                    description="Manage items, create new entries, and update or remove existing ones.">
                    <button class="asset-btn asset-btn--primary" data-bs-toggle="modal" data-bs-target="#createModal">
                        + Create Item
                    </button>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <p class="assesstHint mb-0">
                            List of all items with creation details and quick actions.
                        </p>
                    </div>

                    <x-table
                        :headers="['#', 'Name', 'Created By', 'Created At', 'Actions']"
                        :paginator="$items"
                        emptyMessage="No items found."
                    >
                        @forelse($items as $item)
                            <tr id="item-row-{{ $item->id }}">

                                <td class="text-center">
                                    <div class="ui-muted">{{ $item->id }}</div>
                                </td>

                                <td class="text-center">
                                    <div class="ui-title">{{ $item->name }}</div>
                                </td>

                                <td class="text-center">
                                    @if(optional($item->createdBy)->full_name)
                                        <div class="task-staff-wrap">
                                            <div class="task-staff-avatar">
                                                {{ strtoupper(substr(optional($item->createdBy)->full_name, 0, 2)) }}
                                            </div>
                                            <div class="ui-title">
                                                {{ optional($item->createdBy)->full_name }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <div class="ui-muted">
                                        {{ $item->created_at->format('Y-m-d') }}
                                    </div>
                                    <small class="d-block text-muted">
                                        {{ $item->created_at->diffForHumans() }}
                                    </small>
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">

                                        <button type="button"
                                            class="table-action"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editModal"
                                            data-id="{{ $item->id }}"
                                            data-name="{{ $item->name }}"
                                            title="Edit Item">
                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                        </button>

                                        <button type="button"
                                            class="delete-action-btn"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal"
                                            data-id="{{ $item->id }}"
                                            title="Delete Item">
                                            <span class="table-action table-action--danger">
                                                <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                            </span>
                                        </button>

                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    {{-- ================= CREATE MODAL ================= --}}
    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form action="{{ route('items.store') }}" method="POST">
                @csrf

                <div class="modal-content border-0 shadow-lg rounded-4">
                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title">Create Item</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <div class="mb-3">
                            <label class="asset-label">Name</label>
                            <input required type="text" name="name" class="asset-input">
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ================= EDIT MODAL ================= --}}
    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="editForm" method="POST">
                @csrf
                @method('PUT')

                <div class="modal-content border-0 shadow-lg rounded-4">
                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title">Edit Item</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <input type="hidden" name="id" id="edit-id">

                        <div class="mb-3">
                            <label class="asset-label">Name</label>
                            <input required type="text" name="name" id="edit-name" class="asset-input">
                        </div>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="asset-btn asset-btn--primary">
                            Update
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- ================= DELETE MODAL ================= --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')

                <div class="modal-content border-0 shadow-lg rounded-4">
                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title">Delete Item</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <p class="mb-0">Are you sure you want to delete this item?</p>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-outline-danger">
                            Delete
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const editModal = document.getElementById('editModal');
    const deleteModal = document.getElementById('deleteModal');

    if (editModal) {
        editModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget;

            const id = button.getAttribute('data-id');
            const name = button.getAttribute('data-name');

            document.getElementById('edit-id').value = id;
            document.getElementById('edit-name').value = name;

            document.getElementById('editForm').action = `/items/${id}`;
        });
    }

    if (deleteModal) {
        deleteModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget;
            const id = button.getAttribute('data-id');

            document.getElementById('deleteForm').action = `/items/${id}`;
        });
    }
</script>
@endpush