@extends('layouts.app')

@section('title', 'Sales Activities')

@section('content')
    <style>
        .sales-pipeline-shell { overflow-x: auto; padding-bottom: 12px; }
        .sales-pipeline-board { display: flex; gap: 16px; min-width: max-content; align-items: flex-start; }
        .sales-pipeline-column { width: 290px; border: 1px solid #e9ecef; border-radius: 12px; background: #f8fafc; }
        .sales-pipeline-column-header { padding: 14px; border-bottom: 1px solid #e9ecef; background: #fff; border-radius: 12px 12px 0 0; }
        .sales-pipeline-list { min-height: 260px; max-height: 650px; overflow-y: auto; padding: 12px; }
        .sales-pipeline-list.is-drag-over { background: #eaf2ff; outline: 2px dashed #3454d1; outline-offset: -6px; }
        .sales-pipeline-card { border: 1px solid #e9ecef; border-radius: 10px; background: #fff; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
        .sales-pipeline-card[draggable="true"] { cursor: grab; }
        .sales-pipeline-card.is-dragging { opacity: .45; cursor: grabbing; }
        .sales-pipeline-empty { min-height: 90px; display: grid; place-items: center; color: #8c98a4; text-align: center; }
    </style>
    <!-- [ page-header ] start -->
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">Sales Activities</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li>
                <li class="breadcrumb-item">Pipeline</li>
            </ul>
        </div>
        <div class="page-header-right ms-auto">
            <div class="page-header-right-items">
                <div class="d-flex d-md-none">
                    <a href="javascript:void(0)" class="page-header-right-close-toggle">
                        <i class="feather-arrow-left me-2"></i>
                        <span>Back</span>
                    </a>
                </div>
                <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    <a class="btn btn-icon btn-light-brand" data-activity-type="meeting" data-bs-toggle="modal"
                        data-bs-target="#addActivity" title="Meeting">
                        <i class="feather-calendar"></i>
                    </a>
                    <a class="btn btn-icon btn-light-brand" data-activity-type="call" data-bs-toggle="modal"
                        data-bs-target="#addActivity" title="Call">
                        <i class="feather-phone"></i>
                    </a>
                    <a class="btn btn-icon btn-light-brand" data-activity-type="task" data-bs-toggle="modal"
                        data-bs-target="#addActivity" title="Task">
                        <i class="feather-clipboard"></i>
                    </a>
                    <a class="btn btn-icon btn-light-brand" data-activity-type="event" data-bs-toggle="modal"
                        data-bs-target="#addActivity" title="Event">
                        <i class="feather-edit-3"></i>
                    </a>
                    <a class="btn btn-icon btn-light-brand" data-activity-type="email" data-bs-toggle="modal"
                        data-bs-target="#addActivity" title="Email">
                        <i class="feather-mail"></i>
                    </a>
                    <div class="dropdown">
                        <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10"
                            data-bs-auto-close="outside">
                            <i class="feather-list"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="{{ route('leads-create') }}" class="dropdown-item">
                                <i class="feather-check-circle me-3"></i>
                                <span>Create Lead</span>
                            </a>
                            <a href="{{ route('deals-create') }}" class="dropdown-item">
                                <i class="feather-file me-3"></i>
                                <span>Create Deal</span>
                            </a>
                            <a href="{{ route('ticket-create') }}" class="dropdown-item">
                                <i class="feather-tag me-3"></i>
                                <span>Create Ticket</span>
                            </a>
                        </div>
                    </div>

                    <div class="dropdown">
                        <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10"
                            data-bs-auto-close="outside">
                            <i class="feather-paperclip"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-pdf me-3"></i>
                                <span>PDF</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-csv me-3"></i>
                                <span>CSV</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-xml me-3"></i>
                                <span>XML</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-txt me-3"></i>
                                <span>Text</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-exe me-3"></i>
                                <span>Excel</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-printer me-3"></i>
                                <span>Print</span>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <div class="d-md-none d-flex align-items-center">
                <a href="javascript:void(0)" class="page-header-right-open-toggle">
                    <i class="feather-align-right fs-20"></i>
                </a>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="accordion-collapse collapse page-header-collapse">
        <div class="accordion-body pb-2">
            <div class="row">
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-users"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Total Customers</span>
                                        <span class="fs-24 fw-bolder d-block">26,595</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-success text-success">
                                    <i class="feather-arrow-up fs-10 me-1"></i>
                                    <span>36.85%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-check"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Active Customers</span>
                                        <span class="fs-24 fw-bolder d-block">2,245</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-danger text-danger">
                                    <i class="feather-arrow-down fs-10 me-1"></i>
                                    <span>24.56%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-plus"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">New Customers</span>
                                        <span class="fs-24 fw-bolder d-block">1,254</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-success text-success">
                                    <i class="feather-arrow-up fs-10 me-1"></i>
                                    <span>33.29%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-minus"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Inactive Customers</span>
                                        <span class="fs-24 fw-bolder d-block">4,586</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-danger text-danger">
                                    <i class="feather-arrow-down fs-10 me-1"></i>
                                    <span>42.47%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ page-header ] end -->
    <!-- [ Main Content ] start -->
    <div class="main-content">

        <div class="row">
            <div class="col-xxl-3 col-md-6">
                <div class="card card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="me-3">
                            <h5 class="fs-4">{{ $leadsCount ?: 0 }}</h5>
                            <span class="text-muted">Leads</span>
                        </div>
                        <div class="avatar-text avatar-lg bg-primary text-white rounded">
                            <i class="feather-check-circle"></i> <!-- or use a relevant icon -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-md-6">
                <div class="card card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="me-3">
                            <h5 class="fs-4">{{ $dealsCount ?: 0 }}</h5>
                            <span class="text-muted">Deals</span>
                        </div>
                        <div class="avatar-text avatar-lg bg-success text-white rounded">
                            <i class="feather-dollar-sign"></i> <!-- or use a relevant icon -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-md-6">
                <div class="card card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="me-3">
                            <h5 class="fs-4">{{ $ticketsCount ?: 0 }}</h5>
                            <span class="text-muted">Tickets</span>
                        </div>
                        <div class="avatar-text avatar-lg bg-warning text-white rounded">
                            <i class="feather-tag"></i> <!-- or use a relevant icon -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-md-6">
                <div class="card card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="me-3">
                            <h5 class="fs-4">{{ $campaignsCount ?: 0 }}</h5>
                            <span class="text-muted">Campaigns</span>
                        </div>
                        <div class="avatar-text avatar-lg bg-teal text-white rounded">
                            <i class="feather-mail"></i> <!-- or use a relevant icon -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="row">
            <div class="col-xxl-3 col-md-6">
                <div class="card stretch stretch-full">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-text bg-soft-primary text-primary border-0 me-3">
                                <i class="feather-check-circle"></i>
                            </div>
                            <p class="mb-0">
                                <span class="fw-bold text-primary">Today Leads</span>
                            </p>
                        </div>

                        @if ($todayLeads->isEmpty())
                            <div class="text-muted mt-2">No leads added for today.</div>
                        @else
                            @php
                                // Sort leads by priority (high first, medium, then low)
                                $sortedLeads = $todayLeads->sortBy('priority_id');
                            @endphp

                            @foreach ($sortedLeads as $lead)
                                <div class="mt-2 d-flex justify-content-between align-items-center">
                                    <!-- Title -->
                                    <span class="fw-bold text-dark text-truncate w-75">
                                        {{ $lead->topic ?? 'No Topic' }}
                                    </span>

                                    <!-- Priority -->
                                    @if ($lead->priority_id)
                                        @php
                                            $priorityClass = '';
                                            $priorityLabel = '';

                                            switch ($lead->priority_id) {
                                                case 1: // High
                                                    $priorityLabel = 'High';
                                                    $priorityClass = 'badge bg-soft-success text-success';
                                                    break;
                                                case 2: // Medium
                                                    $priorityLabel = 'Medium';
                                                    $priorityClass = 'badge bg-soft-warning text-warning';
                                                    break;
                                                case 3: // Low
                                                    $priorityLabel = 'Low';
                                                    $priorityClass = 'badge bg-soft-danger text-danger';
                                                    break;
                                                default:
                                                    $priorityLabel = 'No Priority';
                                                    $priorityClass = 'badge bg-soft-secondary text-secondary';
                                                    break;
                                            }
                                        @endphp
                                        <span class="{{ $priorityClass }} ms-auto">
                                            {{ $priorityLabel }}
                                        </span>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-xxl-3 col-md-6">
                <div class="card stretch stretch-full">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-text bg-soft-success text-success border-0 me-3">
                                <i class="feather-dollar-sign"></i>
                            </div>
                            <p class="mb-0">
                                <span class="fw-bold text-success">Today Deals</span>
                            </p>
                        </div>

                        @if ($todayDeals->isEmpty())
                            <div class="text-muted mt-2">No deals added for today.</div>
                        @else
                            @php
                                $sortedDeals = $todayDeals->sortBy('priority_id');
                            @endphp

                            @foreach ($sortedDeals as $deal)
                                <div class="mt-2 d-flex justify-content-between align-items-center">
                                    <!-- Deal Name -->
                                    <span class="fw-bold text-dark text-truncate w-75">
                                        {{ $deal->name ?? 'No Name' }}
                                    </span>

                                    <!-- Priority -->
                                    @if ($deal->priority_id)
                                        @php
                                            $priorityClass = '';
                                            $priorityLabel = '';

                                            switch ($deal->priority_id) {
                                                case 1: // High
                                                    $priorityLabel = 'High';
                                                    $priorityClass = 'badge bg-soft-success text-success';
                                                    break;
                                                case 2: // Medium
                                                    $priorityLabel = 'Medium';
                                                    $priorityClass = 'badge bg-soft-warning text-warning';
                                                    break;
                                                case 3: // Low
                                                    $priorityLabel = 'Low';
                                                    $priorityClass = 'badge bg-soft-danger text-danger';
                                                    break;
                                                default:
                                                    $priorityLabel = 'No Priority';
                                                    $priorityClass = 'badge bg-soft-secondary text-secondary';
                                                    break;
                                            }
                                        @endphp
                                        <span class="{{ $priorityClass }} ms-auto">
                                            {{ $priorityLabel }}
                                        </span>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-md-6">
                <div class="card stretch stretch-full">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-text bg-soft-warning text-warning border-0 me-3">
                                <i class="feather-tag"></i>
                            </div>
                            <p class="mb-0">
                                <span class="fw-bold text-warning">Today Tickets</span>
                            </p>
                        </div>

                        @if ($todayTickets->isEmpty())
                            <div class="text-muted mt-2">No tickets created for today.</div>
                        @else
                            @php
                                // Define custom priority order
                                $priorityOrder = ['urgent', 'highest', 'high', 'medium', 'low'];

                                // Sort tickets based on priority order
                                $sortedTickets = $todayTickets->sortBy(function ($ticket) use ($priorityOrder) {
                                    $priority = \App\Models\TicketPriority::find($ticket->priority_id);
                                    $priorityLabel = strtolower($priority->name ?? 'no priority');
                                    return array_search($priorityLabel, $priorityOrder) !== false ? array_search($priorityLabel, $priorityOrder) : count($priorityOrder);
                                });
                            @endphp

                            @foreach ($sortedTickets as $ticket)
                                <div class="mt-2 d-flex justify-between align-items-center">
                                    <!-- Ticket Topic -->
                                    <span class="fw-bold text-dark text-truncate w-75">
                                        {{ $ticket->topic ?? 'No Topic' }}
                                    </span>

                                    <!-- Ticket Priority -->
                                    @if ($ticket->priority_id)
                                        @php
                                            $priority = \App\Models\TicketPriority::find($ticket->priority_id);
                                            $priorityLabel = $priority->name ?? 'No Priority';
                                            $priorityClass = '';

                                            switch (strtolower($priorityLabel)) {
                                                case 'low':
                                                    $priorityClass = 'badge bg-soft-danger text-danger';
                                                    break;
                                                case 'medium':
                                                    $priorityClass = 'badge bg-soft-warning text-warning';
                                                    break;
                                                case 'high':
                                                    $priorityClass = 'badge bg-soft-success text-success';
                                                    break;
                                                case 'highest':
                                                    $priorityClass = 'badge bg-soft-success text-success';
                                                    break;
                                                case 'urgent':
                                                    $priorityClass = 'badge bg-soft-success text-success';
                                                    break;
                                                default:
                                                    $priorityClass = 'badge bg-secondary text-secondary';
                                                    break;
                                            }
                                        @endphp
                                        <span class="{{ $priorityClass }} ms-3">
                                            {{ $priorityLabel }}
                                        </span>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>

                </div>
            </div>
            <div class="col-xxl-3 col-md-6">
                <div class="card stretch stretch-full">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-text bg-soft-info text-info border-0 me-3">
                                <i class="feather-mail"></i>
                            </div>
                            <p class="mb-0">
                                <span class="fw-bold text-info">Today Campaigns</span>
                            </p>
                        </div>

                        @if ($todayCampaigns->isEmpty())
                            <div class="text-muted mt-2">No campaigns launched for today.</div>
                        @else
                            @php
                                $sortedCampaigns = $todayCampaigns->sortBy('priority_type_id');
                            @endphp

                            @foreach ($sortedCampaigns as $campaign)
                                <div class="mt-2 d-flex justify-between align-items-center">
                                    <span class="fw-bold text-dark">{{ $campaign->campaign_name }}</span>
                                    <span class="text-muted ms-auto">{{ $campaign->budgeted_cost ?? 'N/A' }}</span>

                                    @if ($campaign->priority_type_id)
                                        @php
                                            $priorityClass = '';
                                            $priorityLabel = '';

                                            switch ($campaign->priority_type_id) {
                                                case 1:
                                                    $priorityLabel = 'High';
                                                    $priorityClass = 'badge bg-soft-success text-success';
                                                    break;
                                                case 2:
                                                    $priorityLabel = 'Medium';
                                                    $priorityClass = 'badge bg-soft-warning text-warning';
                                                    break;
                                                case 3:
                                                    $priorityLabel = 'Low';
                                                    $priorityClass = 'badge bg-soft-danger text-danger';
                                                    break;
                                                default:
                                                    $priorityLabel = 'No Priority';
                                                    $priorityClass = 'badge bg-soft-secondary text-secondary';
                                                    break;
                                            }
                                        @endphp
                                        <span class="{{ $priorityClass }} ms-3">{{ $priorityLabel }}</span>
                                    @endif
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

        </div> --}}

        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                <div>
                    <h5 class="mb-1">Deal Pipeline</h5>
                    <small class="text-muted">Move open Deals between statuses. Won and Lost closures are completed from the Deal Profile.</small>
                </div>
                <a href="{{ route('deals') }}" class="btn btn-outline-primary btn-sm">
                    <i class="feather-list me-1"></i>Deals List
                </a>
            </div>
            <div class="card-body p-3 sales-pipeline-shell">
                <div class="sales-pipeline-board">
                    @foreach ($dealStages as $stage)
                        @php
                            $pipelineDeals = $deals->where('stage_id', $stage->id);
                            $pipelineValue = $pipelineDeals->sum(fn ($deal) => (float) ($deal->estimate_amount ?? 0));
                        @endphp
                        <section class="sales-pipeline-column" data-stage-id="{{ $stage->id }}">
                            <header class="sales-pipeline-column-header">
                                <div class="d-flex align-items-center justify-content-between gap-2">
                                    <h6 class="mb-0 text-truncate" title="{{ $stage->name }}">{{ $stage->name }}</h6>
                                    <span class="badge bg-soft-primary text-primary">{{ $pipelineDeals->count() }}</span>
                                </div>
                                <small class="text-muted">Value: {{ number_format($pipelineValue, 2) }}</small>
                            </header>
                            <div class="sales-pipeline-list" data-stage-id="{{ $stage->id }}">
                                @forelse ($pipelineDeals->sortByDesc('updated_at') as $deal)
                                    <article class="sales-pipeline-card" data-deal-id="{{ $deal->id }}"
                                        data-current-stage="{{ $deal->stage_id }}"
                                        @can('update_deals') draggable="true" @endcan>
                                        <div class="d-flex justify-content-between gap-2 mb-2">
                                            <a href="{{ route('deals.view', ['id' => $deal->id]) }}"
                                                class="fw-bold text-dark text-truncate" title="{{ $deal->name }}">
                                                {{ $deal->name ?: 'Deal #'.$deal->id }}
                                            </a>
                                            <i class="feather-move text-muted"></i>
                                        </div>
                                        <div class="fw-semibold text-primary mb-2">
                                            {{ number_format((float) ($deal->estimate_amount ?? 0), 2) }}
                                        </div>
                                        <div class="small text-muted d-flex justify-content-between gap-2">
                                            <span class="text-truncate">{{ $deal->assignedUser?->name ?? 'Unassigned' }}</span>
                                            <span>{{ $deal->close_probability ?? 0 }}%</span>
                                        </div>
                                        @if ($deal->closing_date)
                                            <small class="text-muted d-block mt-1">
                                                <i class="feather-calendar me-1"></i>{{ $deal->closing_date }}
                                            </small>
                                        @endif
                                    </article>
                                @empty
                                    <div class="sales-pipeline-empty">No Deals in this status</div>
                                @endforelse
                            </div>
                        </section>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modals')
    <div class="modal fade" id="addActivity" aria-labelledby="addActivityLabel" aria-hidden="true" x-data>
        <form id="createActivityForm" method="POST" action="{{ route('activities.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="activity_type_id" x-bind:value="$store.activity.selectedButton" />

            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"
                            x-text="'Add ' + (Object.keys($store.activity.activityTypes).find(key => $store.activity.activityTypes[key] === $store.activity.selectedButton) ?? 'Select an activity')">
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">

                        <!-- Title Field -->
                        <div class="col-lg-16 mb-4">
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-tag"></i></div>
                                <input type="text" class="form-control" name="title" id="titleInput"
                                    placeholder="Title" required>
                            </div>
                        </div>


                        <!-- Title Field -->
                        <div class="col-lg-12 mb-4" x-show="([4, 2,].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="activity-date-time-row d-flex gap-2 align-items-center flex-wrap">
                                <!-- Start Date -->
                                <input type="date" class="form-control flex-grow-1" name="start_date"
                                    placeholder="Dec 9, 2024" />

                                <!-- Start Time -->
                                <input type="time" class="form-control flex-grow-1" name="start_time"
                                    placeholder="h:mm AM" />

                                <span class="align-self-center">-</span>

                                <!-- End Date -->
                                <input type="date" class="form-control flex-grow-1" name="end_date"
                                    placeholder="Dec 9, 2024" />

                                <!-- End Time -->
                                <input type="time" class="form-control flex-grow-1" name="end_time"
                                    placeholder="h:mm AM" />
                            </div>
                        </div>

                        @php
                            $selectedContactId = request('id');
                            $selectedLeadId = request('leadId');
                            $selectedDealId = request('dealId');
                        @endphp
                        <div class="row">
                            <div class="col-lg-6 mb-4">
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-user"></i></div>
                                    <select class="form-control" name="contact_id" id="contactInput">
                                        <option value="">Select
                                            Contact</option>
                                        @foreach ($contacts as $contact)
                                            <option value="{{ $contact->id }}">
                                                {{ $contact->first_name }}
                                            </option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                            <input type="hidden" name="account_id_activity" id="hiddenAccountId">

                            <!-- Hidden Inputs for lead_id and deal_id -->
                            @if ($selectedLeadId)
                                <input type="hidden" name="lead_id" value="{{ $selectedLeadId }}">
                            @endif
                            @if ($selectedDealId)
                                <input type="hidden" name="deal_id" value="{{ $selectedDealId }}">
                            @endif

                            <!-- Priority Dropdown -->
                            <div class="col-lg-6 mb-4" x-show="([1,3,4,9].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-award"></i></div>
                                    <select class="form-control" name="priority" id="priorityInput">
                                        <option value="" disabled selected>Priority</option>
                                        @foreach ($priorities as $priority)
                                            <option value="{{ $priority->id }}">{{ $priority->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>







                            {{-- <div class="col-lg-6 mb-4" x-show="([6].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-map-pin"></i></div>
                                <select class="form-control" name="location" id="locationInput">
                                    <option value="" disabled selected>Select Location</option>
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}

                            {{-- <div class="col-lg-6 mb-4" x-show="([6,10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-users"></i></div>
                                <select class="form-control" name="customer" id="customerInput">
                                    <option value="" disabled selected>Select Customer</option>
                                    <option value="1">Customer 1</option>
                                    <option value="2">Customer 2</option>
                                    <option value="3">Customer 3</option>
                                    <option value="4">Customer 4</option>
                                </select>
                            </div>
                        </div> --}}
                            {{-- <div class="col-lg-6 mb-4" x-show="([6].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-briefcase"></i></div>
                                <input type="text" class="form-control" name="service" id="serviceInput"
                                    placeholder="Service" />
                            </div>
                        </div> --}}


                            <div class="col-lg-6 mb-4" x-show="([2].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-calendar"></i></div>
                                    <select class="form-control" name="meeting_integration" id="meetingIntegrationInput">
                                        <option value="" disabled selected>Select Meeting Integration
                                        </option>
                                        @foreach ($meetings as $meeting)
                                            <option value="{{ $meeting->id }}">{{ $meeting->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>



                            <div class="col-lg-6 mb-4" x-show="([2].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-calendar"></i></div>
                                    <select class="form-control" name="allDayEventStatus" id="allDayEventStatus">
                                        <option value="" disabled selected>All Day Event Status</option>
                                        @foreach ($eventStatuses as $status)
                                            <option value="{{ $status->name }}">{{ $status->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="col-lg-6 mb-4" x-show="([1].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-user"></i></div>
                                    <input type="text" class="form-control" name="callFrom" id="callFromInput"
                                        placeholder="Call From" />
                                </div>
                            </div>

                            <div class="col-lg-6 mb-4" x-show="([1].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-phone"></i></div>
                                    <input type="text" class="form-control" name="phoneNumber" id="phoneNumberInput"
                                        placeholder="Phone Number" />
                                </div>
                            </div>

                            <div class="col-lg-6 mb-4" x-show="([1, 3, 4].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-flag"></i></div>
                                    <input type="text" class="form-control" name="regarding" id="regardingInput"
                                        placeholder="Regarding" />
                                </div>
                            </div>


                            {{-- <div class="col-lg-16 mb-4" x-show="([7].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-map-pin"></i></div>
                                <input type="text" class="form-control" name="address" id="addressInput"
                                    placeholder="Address" />
                            </div>
                        </div>
                        <div class="col-lg-6 mb-4" x-show="([8].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-printer"></i></div>
                                <input type="text" class="form-control" name="fax" id="faxInput"
                                    placeholder="Fax" />
                            </div>
                        </div> --}}



                            <!-- From Email -->
                            <div class="col-lg-6 mb-4" x-show="([9].includes($store.activity.selectedButton))"
                                x-transition>
                                <label for="fromEmailInput" class="form-label">From Email</label>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-mail"></i></div>
                                    <x-activity-email-sender id="fromEmailInput" />
                                </div>
                            </div>

                            <!-- Email To -->
                            <div class="col-lg-6 mb-4" x-show="([9].includes($store.activity.selectedButton))"
                                x-transition>
                                <label for="emailToInput" class="form-label">Email To</label>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-send"></i></div>
                                    <input type="email" class="form-control" name="email_to" id="emailToInput"
                                        placeholder="Email To" />
                                </div>
                            </div>

                            <!-- Subject -->
                            <div class="col-lg-12 mb-4" x-show="([9].includes($store.activity.selectedButton))"
                                x-transition>
                                <label for="subjectInput" class="form-label">Subject</label>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-align-left"></i></div>
                                    <input type="text" class="form-control" name="subject" id="subjectInput"
                                        placeholder="Subject" />
                                </div>
                            </div>

                            <!-- Email Body -->
                            <div class="col-lg-12 mb-4" x-show="([9].includes($store.activity.selectedButton))"
                                x-transition>
                                <label for="emailBodyInput" class="form-label">Email Body</label>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-file-text"></i></div>
                                    <textarea class="form-control" name="email_body" id="emailBodyInput" rows="5" placeholder="Email Body"></textarea>
                                </div>
                            </div>

                            <!-- Attachment -->
                            <div class="col-lg-12 mb-4" x-show="([9].includes($store.activity.selectedButton))"
                                x-transition>
                                <label for="attachmentInput" class="form-label">Attachment</label>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-paperclip"></i></div>
                                    <input type="file" class="form-control" name="attachment" id="attachmentInput" />
                                </div>
                            </div>

                            <!-- Company Dropdown -->
                            {{-- <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-briefcase"></i></div>
                                <select class="form-control" name="company" id="companyInput">
                                    <option value="" disabled selected>Select Company</option>
                                    @foreach ($companies as $company)
                                        <option value="{{ $company->id }}">{{ $company->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}


                            <!-- Owner Dropdown -->
                            <div class="col-lg-6 mb-4">
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-user"></i></div>
                                    <select class="form-control" name="owner" id="ownerInput">
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}"
                                                {{ auth()->id() == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <!-- First Name Field -->
                            {{-- <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-user"></i></div>
                                <input type="text" class="form-control" name="first_name" id="firstNameInput"
                                    placeholder="First Name" />
                            </div>
                        </div>

                        <!-- Last Name Field -->
                        <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-user"></i></div>
                                <input type="text" class="form-control" name="last_name" id="lastNameInput"
                                    placeholder="Last Name" />
                            </div>
                        </div> --}}

                            <div class="col-lg-6 mb-4" x-show="([2].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-calendar"></i></div>
                                    <input type="text" class="form-control" name="meeting_details"
                                        id="meetingDetailsInput" placeholder="Meeting Details" />
                                </div>
                            </div>

                            <div class="col-lg-6 mb-4" x-show="([2].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-monitor"></i></div>
                                    <input type="text" class="form-control" name="hosting" id="hostingInput"
                                        placeholder="Hosting" />
                                </div>
                            </div>


                            <div class="col-lg-6 mb-4" x-show="([2].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-refresh-ccw"></i></div>
                                    <select class="form-control" name="repeat_type" id="repeatTypeInput">
                                        <option value="" disabled selected>Select Repeat Type</option>
                                        @foreach ($repeats as $repeat)
                                            <option value="{{ $repeat->id }}">{{ $repeat->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>



                            {{-- <div class="col-lg-6 mb-4" x-show="([2,4].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-users"></i></div>
                                <select class="form-control" name="participants" id="participantsInput">
                                    <option value="" disabled selected>Select Participants</option>
                                    <option value="1">Lead</option>
                                    <option value="2">Contact</option>
                                    <option value="3">Deal</option>
                                    <option value="4">Account</option>
                                    <option value="5">Users</option>
                                    <option value="6">New Invite Account</option>
                                </select>
                            </div>
                        </div> --}}

                            <!-- Duration Field -->
                            <div class="col-lg-6 mb-4">
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-clock"></i></div>
                                    <input type="text" class="form-control" name="duration" id="durationInput"
                                        placeholder="Duration" />
                                </div>
                            </div>

                            <!-- Due Date Field -->
                            <div class="col-lg-6 mb-4" x-show="([1, 3, 9, 2].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-calendar"></i></div>
                                    <input type="date" class="form-control" name="due_date" id="dueDateInput"
                                        placeholder="Due Date" />
                                </div>
                            </div>

                            {{-- <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-tag"></i></div>
                                <input type="text" class="form-control" name="promotion_code"
                                    id="promotionCodeInput" placeholder="Promotion Code" />
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-target"></i></div>
                                <select class="form-control" name="related_campaign" id="relatedCampaignInput">
                                    <option value="" disabled selected>Related Campaign</option>
                                    <option value="1">Campaign 1</option>
                                    <option value="2">Campaign 2</option>
                                    <option value="3">Campaign 3</option>
                                    <option value="4">Campaign 4</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-code"></i></div>
                                <input type="text" class="form-control" name="response_code"
                                    id="responseCodeInput" placeholder="Response Code" />
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-radio"></i></div>
                                <select class="form-control" name="channel" id="channelInput">
                                    <option value="" disabled selected>Select Channel</option>
                                    <option value="1">Email</option>
                                    <option value="2">SMS</option>
                                    <option value="3">Phone</option>
                                    <option value="4">Social Media</option>
                                    <option value="5">Web</option>
                                    <option value="6">Push Notification</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <!-- Received On Input -->
                            <label for="receivedOnInput" class="form-label">Received On</label>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-calendar"></i></div>
                                <input type="date" class="form-control" name="received_on" id="receivedOnInput"
                                    placeholder="Received On" />
                            </div>
                        </div>

                        <div class="col-lg-6 mb-4" x-show="([10].includes($store.activity.selectedButton))"
                            x-transition>
                            <!-- Close By Input -->
                            <label for="closeByInput" class="form-label">Close By</label>
                            <div class="input-group">
                                <div class="input-group-text"><i class="feather-calendar"></i></div>
                                <input type="date" class="form-control" name="close_by" id="closeByInput"
                                    placeholder="Close By" />
                            </div>
                        </div> --}}

                            <!-- Call From Field -->
                            <div class="col-lg-6 mb-4" x-show="([1].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-user"></i></div>
                                    <input type="text" class="form-control" name="callFrom" id="callFromInput"
                                        placeholder="Call From" />
                                </div>
                            </div>

                            <div class="col-lg-6 mb-4" x-data="{
                                selectedRelatedTo: '',
                                selectedLead: '',
                                selectedContact: '',
                                selectedDeal: '',
                                selectedAccount: '',
                                selectedButton: 2,
                                resetRelatedFields() {
                                    this.selectedLead = '';
                                    this.selectedContact = '';
                                    this.selectedDeal = '';
                                    this.selectedAccount = '';
                                }
                            }">
                                <!-- Main Dropdown -->
                                <div class="mb-4" x-show="([2].includes($store.activity.selectedButton))" x-transition>
                                    <div class="input-group">
                                        <div class="input-group-text"><i class="feather-link"></i></div>
                                        <select class="form-control" name="related_to" id="relatedToInput"
                                            x-model="selectedRelatedTo">
                                            <option value="" selected>Related To</option>
                                            <option value="1">Lead</option>
                                            <option value="2">Contact</option>
                                            <option value="3">Deal</option>
                                            <option value="4">Account</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Leads Dropdown -->
                                <div class="col-lg-14 mb-4"
                                    x-show="([2].includes($store.activity.selectedButton)) && selectedRelatedTo == 1"
                                    x-transition>
                                    <div class="input-group">
                                        <select class="form-control" name="lead_id" id="lead-dropdown"
                                            x-model="selectedLead">
                                            <option value="" disabled selected>Select Lead</option>
                                            @foreach ($leads as $lead)
                                                <option value="{{ $lead->id }}">{{ $lead->topic }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Contacts Dropdown -->
                                <div class="col-lg-14 mb-4"
                                    x-show="([2].includes($store.activity.selectedButton)) && selectedRelatedTo == 2"
                                    x-transition>
                                    <div class="input-group">
                                        <select class="form-control" name="contact_id" id="contact-dropdown"
                                            x-model="selectedContact">
                                            <option value="" disabled selected>Select Contact</option>
                                            @foreach ($contacts as $contact)
                                                <option value="{{ $contact->id }}">{{ $contact->first_name }}
                                                    {{ $contact->last_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Deals Dropdown -->
                                <div class="col-lg-14 mb-4"
                                    x-show="([2].includes($store.activity.selectedButton)) && selectedRelatedTo == 3"
                                    x-transition>
                                    <div class="input-group">
                                        <select class="form-control" name="deal_id" id="deal-dropdown"
                                            x-model="selectedDeal">
                                            <option value="" disabled selected>Select Deal</option>
                                            @foreach ($deals as $deal)
                                                <option value="{{ $deal->id }}">{{ $deal->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <!-- Accounts Dropdown -->
                                <div class="col-lg-14 mb-4"
                                    x-show="([2].includes($store.activity.selectedButton)) && selectedRelatedTo == 4"
                                    x-transition>
                                    <div class="input-group">
                                        <select class="form-control" name="account_id" id="account-dropdown"
                                            x-model="selectedAccount">
                                            <option value="" disabled selected>Select Account</option>
                                            @foreach ($accounts as $account)
                                                <option value="{{ $account->id }}">{{ $account->account_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4" x-show="([1].includes($store.activity.selectedButton))"
                                x-transition>
                                <label class="block font-medium text-gray-700 mb-2">Direction</label>
                                <div class="input-group">
                                    <div class="flex items-center gap-4 justify-between">
                                        <label class="inline-flex items-center me-4">
                                            <input type="radio" class="form-radio text-blue-500" name="direction"
                                                value="Inbound" checked>
                                            <span class="ml-2">Inbound</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" class="form-radio text-blue-500" name="direction"
                                                value="Outbound">
                                            <span class="ml-2">Outbound</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6 mb-4" x-show="([1].includes($store.activity.selectedButton))"
                                x-transition>
                                <label class="block font-medium text-gray-700 mb-2">Call Status</label>
                                <div class="input-group">
                                    <div class="flex items-center gap-6"> <!-- Increased gap for better spacing -->
                                        <label class="inline-flex items-center me-2">
                                            <input type="radio" class="form-radio text-blue-500" name="call_status"
                                                value="Completed" checked>
                                            <span class="ml-2">Completed</span>
                                        </label>
                                        <label class="inline-flex items-center me-2">
                                            <input type="radio" class="form-radio text-blue-500" name="call_status"
                                                value="Scheduled">
                                            <span class="ml-2">Scheduled</span>
                                        </label>
                                        <label class="inline-flex items-center me-1">
                                            <input type="radio" class="form-radio text-blue-500" name="call_status"
                                                value="Current Call">
                                            <span class="ml-2">Current Call</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-16 mb-4" x-show="([1, 2, 3, 4,].includes($store.activity.selectedButton))"
                                x-transition>
                                <div class="input-group">
                                    <div class="input-group-text"><i class="feather-file-text"></i></div>
                                    <textarea class="form-control" name="description" id="descriptionInput" placeholder="Description"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="feather-activity me-2"></i>
                            <span>Create Activity</span>
                        </button>
                    </div>

                </div>

            </div>


        </form>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let draggedCard = null;
            let originalList = null;

            document.querySelectorAll('.sales-pipeline-card[draggable="true"]').forEach(function(card) {
                card.addEventListener('dragstart', function(event) {
                    draggedCard = card;
                    originalList = card.closest('.sales-pipeline-list');
                    card.classList.add('is-dragging');
                    event.dataTransfer.effectAllowed = 'move';
                    event.dataTransfer.setData('text/plain', card.dataset.dealId);
                });

                card.addEventListener('dragend', function() {
                    card.classList.remove('is-dragging');
                    document.querySelectorAll('.sales-pipeline-list').forEach(list => list.classList.remove('is-drag-over'));
                });
            });

            document.querySelectorAll('.sales-pipeline-list').forEach(function(list) {
                list.addEventListener('dragover', function(event) {
                    event.preventDefault();
                    event.dataTransfer.dropEffect = 'move';
                    list.classList.add('is-drag-over');
                });

                list.addEventListener('dragleave', function(event) {
                    if (!list.contains(event.relatedTarget)) list.classList.remove('is-drag-over');
                });

                list.addEventListener('drop', async function(event) {
                    event.preventDefault();
                    list.classList.remove('is-drag-over');
                    if (!draggedCard || !originalList) return;

                    const previousStageId = draggedCard.dataset.currentStage;
                    const nextStageId = list.dataset.stageId;
                    if (String(previousStageId) === String(nextStageId)) return;

                    list.querySelector('.sales-pipeline-empty')?.remove();
                    list.appendChild(draggedCard);

                    try {
                        const response = await fetch(`/deals/${draggedCard.dataset.dealId}/update-deal-stage`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            },
                            body: JSON.stringify({ stage_id: nextStageId }),
                        });
                        const data = await response.json().catch(() => ({}));
                        if (!response.ok) {
                            const validationMessage = data.errors
                                ? Object.values(data.errors).flat().join('\n')
                                : null;
                            throw new Error(validationMessage || data.message || 'Unable to update the Deal Status.');
                        }

                        draggedCard.dataset.currentStage = String(data.stage_id || nextStageId);
                        window.location.reload();
                    } catch (error) {
                        originalList.appendChild(draggedCard);
                        window.alert(error.message);
                    }
                });
            });
        });
    </script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.store('activity', {
                selectedButton: null, // Track the currently selected button
                activityTypes: {
                    'call': 1,
                    'meeting': 2,
                    'task': 3,
                    'event': 4,
                    'deadline': 5,
                    'otheractivity': 6,
                    'letter': 7,
                    'fax': 8,
                    'email': 9,
                    'campaign': 10
                },
            });
        });

        document.addEventListener('DOMContentLoaded', function() {

            document.querySelectorAll('[data-activity-type]').forEach(function(element) {
                element.addEventListener('click', function() {
                    const selectedId = this.getAttribute('data-activity-type');
                    console.log(selectedId); // Log the selected ID for debugging

                    // Map selectedId to numeric value based on activityTypes
                    const activityType = Alpine.store('activity').activityTypes[selectedId];
                    Alpine.store('activity').selectedButton = activityType;

                    // Open the modal using Bootstrap's JavaScript API
                    const modal = document.querySelector('#addActivity');

                });
            });

            // Event listener for modal close
            const modalElement = document.querySelector('#addActivity');
            modalElement.addEventListener('hidden.bs.modal', function() {
                // Remove the backdrop after modal is closed
                removeBackdrop();
            });
        });

        // Function to add the backdrop if it's not there
        function addBackdrop() {
            if (!document.querySelector('.modal-backdrop')) {
                const backdrop = document.createElement('div');
                backdrop.classList.add('modal-backdrop', 'fade', 'show');
                document.body.appendChild(backdrop);
            }
        }

        // Function to remove the backdrop if exists
        function removeBackdrop() {
            const existingBackdrop = document.querySelector('.modal-backdrop');
            if (existingBackdrop) {
                existingBackdrop.remove();
            }
        }
    </script>
    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.ticket-list').forEach(function(list) {
                let sortable = new Sortable(list, {
                    group: 'shared',
                    animation: 150,
                    onEnd(evt) {
                        let ticketId = evt.item.getAttribute('data-ticket-id');

                        let newStageId = evt.item.closest('td').getAttribute('data-stage-id');

                        console.log("Ticket ID:", ticketId);
                        console.log("New Stage ID:", newStageId);

                        if (evt.from !== evt.to) {
                            fetch(`/tickets/${ticketId}/update-ticket-stage`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': document.querySelector(
                                            'meta[name="csrf-token"]').getAttribute(
                                            'content')
                                    },
                                    body: JSON.stringify({
                                        stage_id: newStageId
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    console.log('Ticket stage updated', data);
                                })
                                .catch(error => console.error('Error updating ticket stage:',
                                    error));
                        }
                    }
                });
            });
        });
    </script> --}}
@endsection
