@extends('layouts.app')

@section('title', 'Tickets')

@section('content')
    @include('shared.crm-professional-ui')
    <!-- [ page-header ] start -->
    <div class="page-header crm-professional-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="mb-1">Tickets</h5>
                <small class="text-muted d-none d-lg-block">Manage customer requests, ownership and resolution</small>
            </div>
        </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 href="javascript:void(0);" class="btn btn-icon btn-light-brand" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne">
                        <i class="feather-bar-chart"></i>
                    </a>
                    <a href="{{ route('activities-list') }}" class="btn btn-icon btn-light-brand">
                        <i class="feather-list"></i>
                    </a>
                    <a href="{{ route('call-create') }}" class="btn btn-icon btn-light-brand">
                        <i class="feather-phone"></i>
                    </a>

                    <!-- Task Button -->
                    <a href="{{ route('task-create') }}" class="btn btn-icon btn-light-brand">
                        <i class="feather-check-circle"></i>
                    </a>

                    <!-- Event Button -->
                    <a href="{{ route('event-create') }}" class="btn btn-icon btn-light-brand">
                        <i class="feather-calendar"></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-eye"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="{{ route('tickets') }}" class="dropdown-item active">
                                <i class="feather-list me-3"></i>
                                <span>Table View</span>
                            </a>
                            <a href="{{ route('tickets-dashboard') }}" class="dropdown-item">
                                <i class="feather-grid me-3"></i>
                                <span>Dashboard View</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>
                    @can('create_tickets')
                    <a href="{{ route('ticket-create') }}" class="btn btn-primary">
                        <i class="feather-plus me-2"></i>
                        <span>Create Ticket</span>
                    </a>
                    @endcan
                </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">Today's Tickets</span>
                                        <span class="fs-24 fw-bolder d-block">{{ $todayTicketsCount }}</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">Month's Tickets</span>
                                        <span class="fs-24 fw-bolder d-block">{{ $monthTicketsCount }}</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">Year's Tickets</span>
                                        <span class="fs-24 fw-bolder d-block">{{ $yearTicketsCount }}</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">Total Tickets</span>
                                        <span class="fs-24 fw-bolder d-block">{{ $totalTicketsCount }}</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 crm-professional-list">
        <div class="row">
            <div class="col-lg-12">
                <div class="card stretch stretch-full crm-primary-list-card">
                    <div class="card-body p-0">
                        <x-server-list-toolbar form-id="ticket-filter-form" title="Filter Tickets"
                            description="Find support work by status, priority and owner" :total="$ticketPaginator->total()" total-label="Tickets"
                            placeholder="Search tickets by topic, contact, email, or phone" :filters="[
                            'stage_id'=>['label'=>'Status','options'=>$stages->pluck('name','id')->all()],
                            'priority_id'=>['label'=>'Priority','options'=>$priorities->pluck('name','id')->all()],
                            'contact_owner_id'=>['label'=>'Employee','options'=>$users->pluck('name','id')->all()],
                            'date_from'=>['label'=>'Created from','type'=>'date'],'date_to'=>['label'=>'Created to','type'=>'date'],
                        ]" />
                        <div class="table-responsive crm-list-table-scroll">
                            <table class="table table-hover crm-list-table" id="ticketServerList">
                                <thead>
                                    <tr>
                                        <th class="wd-30">
                                            <div class="btn-group mb-1">
                                                <div class="custom-control custom-checkbox ms-1">
                                                    <input type="checkbox" class="custom-control-input"
                                                        id="checkAllCustomer">
                                                    <label class="custom-control-label" for="checkAllCustomer"></label>
                                                </div>
                                            </div>
                                        </th>
                                        <th>Topic</th>
                                        <th>Contact Name</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                        <th>Assigned Employee</th>
                                        <th>Stage</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($tickets as $ticket)
                                        <tr class="single-item">
                                            <td>
                                                <div class="item-checkbox ms-1">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input checkbox"
                                                            id="checkBox_{{ $ticket->id }}">
                                                        <label class="custom-control-label"
                                                            for="checkBox_{{ $ticket->id }}"></label>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <a href="{{ route('ticket.view') }}?id={{ $ticket->id }}"
                                                        class="d-flex align-items-center flex-grow-1 ">
                                                        <div class="avatar-image avatar-md pe-2">
                                                            <img src="assets/images/default.png" alt=""
                                                                class="img-fluid">
                                                        </div>
                                                        <div>
                                                            <span>{{ $ticket->topic ?? '' }}</span>
                                                        </div>
                                                    </a>

                                                    <!-- Action Icons in the Same Row -->
                                                    <div class="d-flex align-items-center gap-3">
                                                        <!-- Add Meeting Icon -->
                                                        <!-- <a href="#" class="text-muted" data-id="meeting"
                                                            data-bs-toggle="modal" data-bs-target="#addActivity">
                                                            <i class="feather feather-calendar"></i>
                                                        </a> -->


                                                        <!-- Add Call Icon -->
                                                        <!-- <a href="#" data-id="call" data-bs-toggle="modal"
                                                            data-bs-target="#addActivity" class="text-muted">
                                                            <i class="feather feather-phone"></i>
                                                        </a> -->

                                                        <!-- Add Task Icon -->
                                                        <!-- <a href="#" data-id="task" data-bs-toggle="modal"
                                                            data-bs-target="#addActivity" class="text-muted">
                                                            <i class="feather feather-clipboard"></i>
                                                        </a> -->

                                                        <!-- Add Note Icon -->
                                                        <!-- <a href="#" data-id="event" data-bs-toggle="modal"
                                                            data-bs-target="#addActivity" class="text-muted">
                                                            <i class="feather feather-edit-3"></i>
                                                        </a> -->

                                                        <!-- Add Lead Icon -->
                                                        <!-- <a href="#" data-id="email" data-bs-toggle="modal"
                                                            data-bs-target="#addActivity" class="text-muted">
                                                            <i class="feather feather-mail"></i>
                                                        </a> -->

                                                        <!-- Dropdown Menu Icon (3 dots) -->
                                                        <div class="dropdown">
                                                            <a href="javascript:void(0)" class="avatar-text avatar-md"
                                                                data-bs-toggle="dropdown" data-bs-offset="0,21">
                                                                <i class="feather feather-more-horizontal"></i>
                                                            </a>
                                                            <ul class="dropdown-menu">
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('ticket.view') }}?id={{ $ticket->id }}">
                                                                        <i
                                                                            class="feather feather-eye me-3"></i><span>View</span>
                                                                    </a>
                                                                </li>
                                                                @can('update_tickets')
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('ticket.edit') }}?id={{ $ticket->id }}">
                                                                        <i
                                                                            class="feather feather-edit-3 me-3"></i><span>Edit</span>
                                                                    </a>
                                                                </li>
                                                                @endcan
                                                                <!-- <li>
                                                                    <a class="dropdown-item" href="">
                                                                        <i
                                                                            class="feather feather-phone-call me-3"></i><span>Make
                                                                            Call</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a class="dropdown-item" href="">
                                                                        <i
                                                                            class="feather feather-message-square me-3"></i><span>Add
                                                                            SMS</span>
                                                                    </a>
                                                                </li> -->
                                                                @can('create_leads')
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('leads-create', ['ticketId' => $ticket->id]) }}">
                                                                        <i
                                                                            class="feather feather-arrow-right-circle me-3"></i><span>Move to Lead</span>
                                                                    </a>
                                                                </li>
                                                                @endcan
                                                                @can('create_contacts')
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('contacts-create', ['ticketId' => $ticket->id]) }}">
                                                                        <i class="feather feather-arrow-right-circle me-3"></i><span>Move to Contact</span>
                                                                    </a>
                                                                </li>
                                                                @endcan
                                                                @can('create_deals')
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ route('deals-create', ['ticketId' => $ticket->id]) }}">
                                                                        <i
                                                                            class="feather feather-arrow-right-circle me-3"></i><span>Move to Deal</span>
                                                                    </a>
                                                                </li>
                                                                @endcan
                                                                @can('delete_tickets')
                                                                <li>
                                                                    <form
                                                                        action="{{ route('ticket.destroy', $ticket->id) }}"
                                                                        method="POST"
                                                                        onsubmit="return confirm('Are you sure you want to delete this ticket?');"
                                                                        style="display: inline;">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <button type="submit"
                                                                            class="dropdown-item text-danger"
                                                                            style="border: none; background: none; padding-left: 15px;">
                                                                            <i
                                                                                class="feather feather-trash-2 me-3"></i><span>Delete</span>
                                                                        </button>
                                                                    </form>
                                                                </li>
                                                                @endcan
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>{{ $ticket->contact_name }}</td>
                                            <td>{{ $ticket->phone }}</td>
                                            <td>{{ $ticket->email }}</td>
                                            <td>
                                                <div class="fw-semibold">{{ $ticket->assignedUser?->name ?? 'Not Assigned' }}</div>
                                                <small class="text-muted">{{ $ticket->assignedUser?->email ?? '' }}</small>
                                            </td>

                                            <td>
                                                <select class="form-control update-stage" data-id="{{ $ticket->id }}" data-select2-selector="status">
                                                    @php
                                                        // Fetch the first TicketStageStatus where stage_status is not 3 (Completed)
                                                        $ticketStageStatus = \App\Models\TicketStageStatus::where(
                                                            'ticket_id',
                                                            $ticket->id,
                                                        )
                                                            ->where('stage_status', '!=', 3)
                                                            ->first();

                                                        // Determine the current stage ID
                                                        $currentStageId = $ticketStageStatus
                                                            ? $ticketStageStatus->stage_id
                                                            : $ticket->stage_id;
                                                    @endphp

                                                    @foreach ($stages as $stage)
                                                        <option value="{{ $stage->id }}" data-bg="bg-success" @selected($currentStageId == $stage->id)>
                                                            {{ $stage->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="px-4 pb-4">{{ $ticketPaginator->links() }}</div>
    <!-- [ Main Content ] end -->
@endsection
@section('modals')
    <div class="modal fade" id="addActivity" aria-labelledby="addActivityLabel" aria-hidden="true" x-data>
        <form id="createActivityForm" method="POST" action="/activity/store" class="p-3" 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">Add 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">
                            </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>

                            <!-- 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> --}}

                            <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-compass"></i></div>
                                    <input type="text" class="form-control" name="direction" id="directionInput"
                                        placeholder="Direction" />
                                </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-link"></i></div>
                                    <select class="form-control" name="related_to" id="relatedToInput">
                                        <option value="" disabled 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>

                            <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-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() {
            console.log("Script is running!");

            // Ensure Select2 is initialized
            $('.update-stage').select2();

            // Attach event listener to Select2 elements
            $('.update-stage').on('change', function() {
                const ticketId = $(this).data('id'); // Get contact ID using jQuery
                const stageId = $(this).val(); // Get selected stage ID using jQuery

                console.log("Dropdown changed. Contact ID:", ticketId);
                console.log("Selected Stage ID:", stageId);

                if (ticketId && stageId) {
                    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: stageId,
                            }),
                        })
                        .then(response => {
                            if (!response.ok) throw new Error('Failed to update stage');
                            return response.json();
                        })
                        .then(data => {
                            console.log("Response received:", data.message);
                        })
                        .catch(error => {
                            console.error("Error:", error);
                        });
                } else {
                    console.warn("Contact ID or Stage ID is missing!");
                }
            });
        });
    </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-id]').forEach(function(element) {
                element.addEventListener('click', function() {
                    const selectedId = this.getAttribute('data-id');
                    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>


@endsection
