@extends('layouts/contentNavbarLayout')
@section('title', 'Tables - Basic Tables')
@section('page-script')
    <script src="{{ asset('assets/js/form-basic-inputs.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/app-kanban.css') }}">
@endsection
@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">CRM /</span> Manage CRM
</h4>

<hr class="my-5">
@if (session('success') || session('error'))
<div class="alert alert-{{ session('success') ? 'success' : 'danger' }}">
    {{ session('success') ? session('success') : session('error') }}
</div>
@endif


    <div class="app-kanban" >
        <div class="row">
            <div class="col-12">
                <div class="d-flex">
                    <h5></h5>
                    <!-- Button to open the Add Progress Modal -->
                    @if (isset($userGroupPermissions['contacts']) && $userGroupPermissions['contacts']['adds'] == 1)
                        <a class="btn1 btn-success mb-4 me-2" href="/manageprogress">Add Crm Progress</a>
                    @endif
                   
                </div>
                <div class="row mb-4">
                    <div class="col-md-3">
                        <!-- State Dropdown -->
                        <select id="filterState" class="form-select" name="state" form="searchForm">
                            <option value="">Select a State</option>
                            @foreach($crmstates as $state)
                                <option value="{{ $state->code }}" {{ request('state') == $state->code ? 'selected' : '' }}>
                                    {{ $state->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <!-- District Dropdown -->
                        <select id="filterDistrict" class="form-select" name="district" form="searchForm">
                            <option value="">Select a District</option>
                            @foreach($crmdistricts as $district)
                                <option value="{{ $district->id }}" {{ request('district') == $district->id ? 'selected' : '' }}>
                                    {{ $district->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
            <div class="col-md-2">
                <form id="searchForm" method="GET" action="{{ route('crm.index') }}">
                    <!-- Hidden Fields for Type and Add To CRM -->
                    <input type="hidden" name="type" value="0">
                    <input type="hidden" name="add_to_crm" value="1">
                    
                    <!-- Search Button -->
                    <button type="submit" class="btn btn-primary">Search</button>
                </form>
            </div>
                </div>
            </div>
            
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    // When state changes, fetch districts
                    document.getElementById('filterState').addEventListener('change', function () {
                        const stateCode = this.value;
                        const districtSelect = document.getElementById('filterDistrict');
                        
                        // Reset district options
                        districtSelect.innerHTML = '<option value="">Select a District</option>'; 
                        
                        if (stateCode) {
                            // Send an AJAX request to fetch districts based on the selected state
                            fetch(`/get-districts/${stateCode}`)
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error('Network response was not ok');
                                    }
                                    return response.json();
                                })
                                .then(data => {
                                    // Populate district options based on response
                                    if (data.districts && Array.isArray(data.districts)) {
                                        data.districts.forEach(district => {
                                            const option = document.createElement('option');
                                            option.value = district.id;
                                            option.textContent = district.name;
                                            districtSelect.appendChild(option);
                                        });
                                    }
                                })
                                .catch(error => console.error('Error fetching districts:', error));
                        }
                    });
                });
            </script>
            
        </div>

        <!-- Scroll buttons -->
  <div class="scroll-controls d-flex justify-content-between mb-4">
            <button class="btn btn-outline-primary" id="scroll-left"><i class="mdi mdi-chevron-left"></i> Scroll Left</button>
            <button class="btn btn-outline-primary" id="scroll-right">Scroll Right <i class="mdi mdi-chevron-right"></i></button>
        </div>

        <!-- Scrollable Kanban Wrapper -->
        <div class="kanban-wrapper ps ps--active-x ps--active-y" style="overflow-x: auto; white-space: nowrap;">
            <div class="kanban-container d-flex" style="width: max-content;">
                @foreach ($boards as $board)
                    <div data-id="board-{{ $board->id }}" data-order="{{ $loop->index + 1 }}" 
                         class="kanban-board" 
                         style="width: 250px; margin-left: 15px; display: inline-block;">
                        <header class="kanban-board-header">
                            <div class="kanban-title-board" contenteditable="true">{{ $board->name }}</div>
                            <div class="dropdown">
                                <i class="dropdown-toggle mdi mdi-dots-vertical ri-20px cursor-pointer" id="board-dropdown"
                                   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="board-dropdown">
                                    <a class="dropdown-item delete-board" href="javascript:void(0)">
                                        <i class="ri-delete-bin-7-line"></i> <span class="align-middle">Delete</span>
                                    </a>
                                    <a class="dropdown-item" href="javascript:void(0)">
                                        <i class="ri-edit-2-line"></i> <span class="align-middle">Rename</span>
                                    </a>
                                </div>
                            </div>
                            
                        </header>
                        <main class="kanban-drag" style="height:400px; scrollbar-width: thin; overflow-y: auto; overflow-x: hidden;">
                            @foreach ($paginationdata as $item)
                                @if ($item->status == $board->id)
                                    <div class="kanban-item" data-eid="{{ $item->id }}" data-badge="info" data-due-date="{{ $item->due_date }}">
                                        <div class="d-flex justify-content-between flex-wrap align-items-center mb-2">
                                            {{-- <div class="item-badges d-flex">
                                                <div class="badge rounded-pill bg-label-info">{{ $board->name }}</div>
                                            </div> --}}
                                            <div class="item-badges d-flex">
                                                <div class="badge rounded-pill 
                                                    @if($board->id == 1) bg-label-info
                                                    @elseif($board->id == 2) bg-label-success
                                                    @elseif($board->id == 3) bg-label-warning
                                                    @elseif($board->id == 4) bg-label-danger
                                                    @else bg-label-secondary
                                                    @endif">
                                                    {{ $board->name }}
                                                </div>
                                            </div>
                                            
                                            <div class="dropdown kanban-tasks-item-dropdown">
                                                <i class="dropdown-toggle mdi mdi-dots-vertical" data-bs-toggle="dropdown"></i>

                                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="board-dropdown">
                                                        <a class="dropdown-item delete-board" href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#editCrmOffcanvas{{ $item->id }}" aria-controls="editCrmOffcanvas{{ $item->id }}">
                                                            <i class="mdi mdi-pencil"></i> <span class="align-middle">Edit</span>
                                                        </a>
                                                        @if (isset($userGroupPermissions['contacts']) && $userGroupPermissions['contacts']['deletes'] == 1)
                                                        <form action="{{ route('contacts.updateRemoveToCrm', $item->id) }}" method="POST" id="addToCrmForm{{ $item->id }}" class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="button" class="dropdown-item waves-effect add-crm-btn" 
                                                        data-bs-toggle="modal" data-bs-target="#confirmModal{{ $item->id }}">                                       
                                                        <i class="mdi mdi-trash-can-outline"></i> <span class="align-middle">Delete</span>
                                                        </button>
                                                        </form>
                                                        @else
                                                        <button class="btn p-0 text-muted" type="button" disabled data-bs-toggle="tooltip" title="You don't have permission to delete this item">
                                                        <i class="mdi mdi-trash-can-outline"></i>
                                                        </button>
                                                        @endif
                                                   
                                                        <a class="dropdown-item"  data-bs-toggle="modal" data-bs-target="#detailsModal{{ $item->id }}">
                                                            <i class="mdi mdi-file-find"></i> <span class="align-middle">Detailed View</span>
                                                        </a>
                                                    </div>
                                            </div>
                                        </div>
                                        <a href="" data-bs-toggle="modal" data-bs-target="#detailsModal{{ $item->id }}"><span class="kanban-text">{{ $item->name }}</span></a>
                                        <p>{{ $item->email }}</p>
                                        <p>{{ $item->phone_number }}</p>
                                        <div class="d-flex justify-content-between align-items-center flex-wrap ">
                                            <div> 
                                                <span class="align-middle">
                                                    <ul class="timeline mb-0">
                                                        @foreach($item->followUps->filter(function($followUp) {
                                                            $nextFollowUpDate = \Carbon\Carbon::parse($followUp->next_follow_up_date);
                                                            return $nextFollowUpDate->isToday() || $nextFollowUpDate->isAfter(\Carbon\Carbon::now()); // Include Today
                                                        })->sortBy('next_follow_up_date')->take(1) as $followUp)
                                                            <li class="d-flex pb-2">
                                                                <small>Current Interaction : </small> 
                                                                <small>{{ optional($followUp->crmstatusmodal)->name ?? 'N/A' }}</small>
                                                            </li>
                                                    
                                                            <li class="d-flex pb-2">
                                                                <small>Upcoming Follow-up : </small> 
                                                                <small class="badge px-2 rounded-pill bg-label-warning">
                                                                    @php
                                                                        $nextFollowUpDate = \Carbon\Carbon::parse($followUp->next_follow_up_date);
                                                                        if ($nextFollowUpDate->isToday()) {
                                                                            echo 'Today <span class="notification-dot"></span>';
                                                                        } elseif ($nextFollowUpDate->isTomorrow()) {
                                                                            echo 'Tomorrow <span class="notification-dot"></span>'; // Notification dot for tomorrow
                                                                        } else {
                                                                            echo $nextFollowUpDate->format('Y-m-d'); // Future dates
                                                                        }
                                                                    @endphp
                                                                </small>
                                                            </li>
                                                    
                                                            @if (optional($followUp->crmstatusmodal)->description)
                                                                <li>
                                                                    <strong>Details of Current Status:</strong> 
                                                                    <small>{{ optional($followUp->crmstatusmodal)->description ?? 'No Description' }}</small>
                                                                </li>
                                                            @endif
                                                        @endforeach
                                                    </ul>
                                                    
                                                    <span>  
                                                        
                                                     {{--    <a href="{{ route('crm.createFollowUp', $item->id) }}" 
                                                        class="btn p-0 me-3 text-primary" data-bs-toggle="tooltip" title="Add Follow-up">
                                                        <i class="mdi mdi-calendar-plus"></i> </a>  --}}
                                                        <a href="" data-bs-toggle="offcanvas"
                                                        data-bs-target="#editOffcanvas{{ $item->id }}" class="mt-2"> <i class="mdi mdi-calendar-plus"></i> Next Followups</a>
                                                        
                                                    </span>
                                                </span>
                                            </div>
                                            
                                        </div>
                                    </div>
                                @endif


                                <div class="offcanvas offcanvas-end " tabindex="-1" id="editCrmOffcanvas{{ $item->id }}" aria-labelledby="editCrmOffcanvasLabel{{ $item->id }}">
                                    <div class="offcanvas-header">
                                        <h5 id="editCrmOffcanvasLabel{{ $item->id }}">Edit CRM</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <div class="offcanvas-body">
                                        <!-- Form to Edit CRM -->
                                        <form method="POST" action="{{ route('crm.update', $item->id) }}">
                                            @csrf
                                            @method('PATCH')
                                            
                                            <div id="dynamicFields">
                                                @foreach($columns as $column)
                                                    @if($column != 'id' && $column != 'add_to_crm' && $column != 'created_at' && $column != 'updated_at' && $column != 'type') <!-- Skip ID, type, add_to_crm, created_at, and updated_at columns -->
                                                        <div class="form-floating form-floating-outline mb-4">
                                                            @if($column == 'message') <!-- Check if the column is 'message' -->
                                                                <textarea id="{{ $column }}" class="form-control" name="{{ $column }}" rows="4">{{ old($column, $item->{$column}) }}</textarea>
                                                            @elseif($column == 'state') <!-- State Dropdown -->
                                                                <select id="state" class="form-select" name="{{ $column }}">
                                                                    <option value="">Select a state</option>
                                                                    @foreach($crmstates as $state)
                                                                        <option value="{{ $state->code }}" 
                                                                            @if(old($column, $item->{$column}) == $state->code) selected @endif>
                                                                            {{ $state->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            @elseif($column == 'district') 
                                                            <select id="district" class="form-select" name="{{ $column }}" data-old-value="{{ old($column, $item->{$column}) }}">
                                                                <option value="">Select a district</option>
                                                                @foreach($crmdistricts as $district)
                                                                    <option value="{{ $district->id }}" 
                                                                        @if(old($column, $item->{$column}) == $district->id) selected @endif>
                                                                        {{ $district->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @elseif($column == 'status') <!-- Solution Dropdown -->
                                                            <select id="status" class="form-select" name="{{ $column }}">
                                                            <option value="">Select a status</option>
                                                            @foreach($dropboards as $status)
                                                            <option value="{{ $status->id }}" 
                                                            @if(old($column, $item->{$column}) == $status->id) selected @endif>
                                                            {{ $status->name }}
                                                            </option>
                                                            @endforeach
                                                            </select>
                                
                                                            
                                                            @elseif($column == 'industry') <!-- Industry Dropdown -->
                                                                <select id="industry" class="form-select" name="{{ $column }}">
                                                                <option value="">Select an industry</option>
                                                                @foreach($crmindustry as $industry)
                                                                <option value="{{ $industry->id }}" 
                                                                @if(old($column, $item->{$column}) == $industry->id) selected @endif>
                                                                {{ $industry->page_name }}
                                                                </option>
                                                                @endforeach
                                                                </select>
                                                             @elseif($column == 'solution') <!-- Solution Dropdown -->
                                                                <select id="solution" class="form-select" name="{{ $column }}">
                                                                <option value="">Select a solution</option>
                                                                @foreach($crmsolutions as $solution)
                                                                <option value="{{ $solution->id }}" 
                                                                @if(old($column, $item->{$column}) == $solution->id) selected @endif>
                                                                {{ $solution->page_name }}
                                                                </option>
                                                                @endforeach
                                                                </select>
                                                               
                                                            @else
                                                                <input type="text" id="{{ $column }}" class="form-control" name="{{ $column }}" value="{{ old($column, $item->{$column}) }}">
                                                            @endif
                                                            <label for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                    
                                            <!-- Hidden fields for type and add_to_crm -->
                                            <input type="hidden" name="type" value="0">
                                            <input type="hidden" name="add_to_crm" value="1">
                                    
                                            <button type="submit" class="btn btn-primary">Save Changes</button>
                                        </form>
                                    </div>
                                </div>
                                
                                <div class="modal fade" id="confirmModal{{ $item->id }}" tabindex="-1" aria-labelledby="confirmModalLabel{{ $item->id }}" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="confirmModalLabel{{ $item->id }}">Confirm Action</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                Are you sure you want to remove this contact to the CRM?
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary" form="addToCrmForm{{ $item->id }}">Confirm</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal fade" id="detailsModal{{ $item->id }}" tabindex="-1"
                                    aria-labelledby="detailsModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="detailsModalLabel">View Details
                                                </h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body"
                                                style="word-break: unset !important; word-wrap: break-word !important;">
                                                <dl class="row">
                                                    @foreach ($item->getTableColumns() as $column)
                                                        @if ($column !== 'id'&& $column !== 'add_to_crm' && $column !== 'type')
                                                            <dt class="col-sm-4">{{ ucfirst(str_replace('_', ' ', $column)) }}:
                                                            </dt>
                                                            <dd class="col-sm-8">
                                                                @if ($column === 'image_path' && !empty($item->{$column}))
                                                                    <img src="{{ asset('storage/' . $item->{$column}) }}"
                                                                        alt="{{ $item->image_alt }}" class="img-thumbnail"
                                                                        style="max-width: 50px; max-height: 50px;">
                                                                @elseif ($column === 'status')
                                                                    {{ $item->{$column} == 1 ? 'Active' : 'Inactive' }}
                                                                @else
                                                                    {{ $item->{$column} }}
                                                                @endif
                                                            </dd>
                                                        @endif
                                                    @endforeach
                                                </dl>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="offcanvas offcanvas-end" tabindex="-1" id="addItemOffcanvas" aria-labelledby="addItemOffcanvasLabel">
                                    <div class="offcanvas-header">
                                        <h5 id="addItemOffcanvasLabel">Add Item</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <div class="offcanvas-body">
                                        <!-- Form to Add Item -->
                                        <form id="addItemForm" method="POST" action="{{ route('crm.store') }}">
                                            @csrf
                                            <div id="dynamicFields">
                                                <!-- Dynamically generated fields will go here -->
                                                @foreach($columns as $column)
                                                    @if($column != 'id' && $column != 'add_to_crm' && $column != 'created_at' && $column != 'updated_at' && $column != 'type')
                                                        <div class="form-floating form-floating-outline mb-4">
                                                            @if($column == 'message') 
                                                                <!-- Textarea for 'message' column -->
                                                                <textarea id="{{ $column }}" class="form-control" name="{{ $column }}" placeholder="Enter your {{ $column }}" rows="4"></textarea>
                                                                <label for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                            @elseif($column == 'state')
                                                                <!-- Dropdown for 'state' column -->
                                                                <select id="{{ $column }}" class="form-select" name="{{ $column }}" onchange="getDistricts(this.value)">
                                                                    <option value="">Select a state</option>
                                                                    @foreach($crmstates as $state)
                                                                        <option value="{{ $state->code }}">{{ $state->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            @elseif($column == 'district')
                                                                <!-- Dropdown for 'district' column -->
                                                                <select id="{{ $column }}" class="form-select" name="{{ $column }}">
                                                                    <option value="">Select a district</option>
                                                                    @foreach($crmdistricts as $district)
                                                                        <option value="{{ $district->id }}">{{ $district->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            @elseif($column == 'industry')
                                                                <!-- Dropdown for 'industry' column -->
                                                                <select id="{{ $column }}" class="form-select" name="{{ $column }}">
                                                                    <option value="">Select an industry</option>
                                                                    @foreach($crmindustry as $industry)
                                                                        <option value="{{ $industry->id }}">{{ $industry->page_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            @elseif($column == 'solution')
                                                                <!-- Dropdown for 'solution' column -->
                                                                <select id="{{ $column }}" class="form-select" name="{{ $column }}">
                                                                    <option value="">Select a solution</option>
                                                                    @foreach($crmsolutions as $solution)
                                                                        <option value="{{ $solution->id }}">{{ $solution->page_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            @elseif($column == 'status')
                                                                <!-- Hidden Status Field (Pre-filled with Selected Board ID) -->
                                                               <!-- Hidden Status Field (Pre-filled with Selected Board ID) -->
                                                            <input type="hidden" id="status" name="{{ $column }}" value="">


                                                            @else
                                                                <!-- Input field for other columns -->
                                                                <input type="text" id="{{ $column }}" class="form-control" name="{{ $column }}" placeholder="Enter your {{ $column }}">
                                                                <label for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                            @endif
                                                        </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                
                                            <!-- Hidden fields for type and add_to_crm -->
                                            <input type="hidden" name="type" value="0">
                                            <input type="hidden" name="add_to_crm" value="1">
                                
                                            <button type="submit" class="btn btn-primary">Save Item</button>
                                        </form>
                                    </div>
                                </div>

                                {{-- edit followup --}}
                                <div class="offcanvas offcanvas-end kanban-update-item-sidebar" id="editOffcanvas{{ $item->id }}">
                                    <div class="offcanvas-header border-bottom">
                                        <h5 class="offcanvas-title">Edit Task</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                    </div>
                                    <div class="offcanvas-body pt-2">
                                        <ul class="nav nav-tabs mb-2 border-bottom" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link waves-effect" data-bs-toggle="tab" data-bs-target="#tab-update-{{ $item->id }}" 
                                                        aria-controls="tab-update-{{ $item->id }}" aria-selected="false" role="tab">
                                                    <i class="ri-edit-box-line me-1_5"></i>
                                                    <span class="align-middle">Add Followups</span>
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link waves-effect active" data-bs-toggle="tab" data-bs-target="#tab-activity-{{ $item->id }}" 
                                                        aria-controls="tab-activity-{{ $item->id }}" aria-selected="true" role="tab">
                                                    <i class="ri-pie-chart-line me-1_5"></i>
                                                    <span class="align-middle">
                                                        Activity Timeline
                                                        </span>
                                                </button>
                                            </li>
                                        </ul>
                                
                                        <div class="tab-content px-0 pb-0 pt-4">
                                            <!-- Update item/tasks -->
                                            <div class="tab-pane fade" id="tab-update-{{ $item->id }}" role="tabpanel">
                                                <form method="POST" action="{{ route('crm.storeFollowUp') }}" enctype="multipart/form-data">
                                                    @csrf    
                                                    @foreach ($columns1 as $column1)
                                                        @if ($column1 === 'file')
                                                            <div class="mb-4">
                                                                <label for="{{ $column1 }}" class="form-label">{{ ucfirst($column1) }}</label>
                                                                <input type="file" id="{{ $column1 }}" class="form-control" name="{{ $column1 }}">
                                                            </div>
                                                        @elseif ($column1 === 'created_at' || $column1 === 'updated_at' || $column1 === 'id')
                                                            
                                                        @elseif ($column1 === 'next_follow_up_date')
                                                            <!-- Dropdown for the status field -->
                                                            <div class="mb-4">
                                                                <label for="{{ $column1 }}" class="form-label">{{ ucfirst($column1) }}</label>
                                                                <input type="date" id="{{ $column1 }}" class="form-control" name="{{ $column1 }}">
                                                            </div>
                                                        @elseif ($column1 === 'status')
                                                            <div class="mb-4">
                                                                <label for="{{ $column1 }}" class="form-label">{{ ucfirst($column1) }}</label>
                                                                <select id="{{ $column1 }}" class="form-control" name="{{ $column1 }}">
                                                                    <option value="">Select Status</option>
                                                                    @foreach ($crmstatus as $status)
                                                                        <option value="{{ $status->id }}">{{ $status->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            @elseif($column1 == 'contact_id')
                                                            <!-- Hidden Contact ID Field -->
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input type="hidden" id="contact_id" name="contact_id" value="{{ $item->id }}">
                                                             
                                                            </div>
                                                       
                                                        @elseif ($column1 === 'notes')  
                                                            <div class="mb-4">
                                                                <label for="{{ $column1 }}" class="form-label">{{ ucfirst($column1) }}</label>
                                                                <textarea name="{{ $column1 }}" id="{{ $column1 }}" class="form-control"></textarea>
                                                            </div>  
                                                        @else
                                                            <div class="form-floating form-floating-outline mb-4">
                                                                <input type="text" id="{{ $column1 }}" class="form-control"
                                                                name="{{ $column1 }}" placeholder="Enter your {{ $column1 }}">
                                                                <label for="{{ $column1 }}">{{ ucfirst($column1) }}</label>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                
                                                    <div class="demo-inline-spacing">
                                                        <button type="submit" class="btn btn-primary">
                                                            <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>Save Follow-up
                                                        </button>
                                                    </div>
                                                </form>
                                                 
                                            </div>
                                
                                           <!-- Activities -->
                                            <!-- Activities -->
<!-- Activities Tab -->
<!-- Activities Tab -->
<div class="tab-pane fade show active text-heading" id="tab-activity-{{ $item->id }}" role="tabpanel">
    @if(isset($followups[$item->id]) && $followups[$item->id] instanceof \Illuminate\Support\Collection && $followups[$item->id]->isNotEmpty())
        <ul class="timeline card-timeline mb-0">
            @foreach($followups[$item->id]->sortBy('next_follow_up_date') as $followUp)
                @php
                    // Check if the follow-up date is in the past
                    $isPastDue = optional($followUp)->next_follow_up_date ? \Carbon\Carbon::parse($followUp->next_follow_up_date)->isPast() : false;
                @endphp
                 
                <li class="timeline-item timeline-item-transparent {{ $isPastDue ? 'opacity-50' : '' }}">
                    <span class="timeline-point timeline-point-primary"></span>
                    <div class="timeline-event">
                        <div class="timeline-header mb-3">
                            <h6 class="mb-2">{{ optional($followUp)->title ?? 'No Title' }}</h6>
                            <small class="text-muted">
                                {{ optional($followUp)->next_follow_up_date ? \Carbon\Carbon::parse($followUp->next_follow_up_date)->format('d M, Y') : 'N/A' }}
                            </small>
                        </div>
                        <p>Status: <small>{{ optional($followUp->crmstatusmodal)->name ?? 'N/A' }}</small></p>
                        <p class="mb-2">{{ optional($followUp)->notes ?? 'No Notes' }}</p>

                        @if(optional($followUp)->file)
                        <div class="d-flex align-items-center mb-1">
                            <div class="badge bg-lightest">
                                <a href="{{ asset('storage/' . $followUp->file) }}" target="_blank">
                                    <img src="{{ asset('assets/img/download.png') }}" alt="File" width="25" class="me-2">
                                    <span class="h6 mb-0">File Preview</span>
                                </a>
                            </div>
                        </div>
                        @endif
                    </div>
                </li>
            @endforeach
        </ul>
    @else
        <p class="text-muted">No follow-ups recorded yet.</p>
    @endif
</div>




                                        </div>
                                    </div>
                                </div>
                                
                                {{-- /edit followup --}}
                            @endforeach
                            <footer>
                                <button
                                class="btn btn-default text-heading fw-normal shadow-none text-capitalize"
                                data-bs-toggle="offcanvas" 
                                data-bs-target="#addItemOffcanvas"
                                onclick="setBoardStatus('{{ $board->id }}')">
                                + Add New Item
                            </button>
                            
                             
                            
                            </footer>
                            <script>
                                function setBoardStatus(boardId) {
                                    let statusInputs = document.querySelectorAll('input[name="status"]'); // Select all status fields
                                    statusInputs.forEach(input => {
                                        input.value = boardId; // Set the boardId to each status field
                                    });
                                }
                            </script>
                            
                            
                        </main>
                    </div>
                @endforeach
            </div>
        </div>
    </div>




<!-- Pagination -->
<script>
    // Function to load districts based on the selected state
// Function to load districts based on the selected state
function getDistricts(stateCode, offcanvasId) {
    if (stateCode) {
        // Make an AJAX request to get the districts for the selected state
        fetch(`/get-districts/${stateCode}`)
            .then(response => response.json())
            .then(data => {
    const districtDropdown = document.querySelector(`#${offcanvasId} #district`);
    districtDropdown.innerHTML = '<option value="">Select a district</option>'; // Clear previous options
    data.districts.forEach(district => {
        let option = document.createElement('option');
        option.value = district.id;
        option.textContent = district.name;
        districtDropdown.appendChild(option);
    });

    // Pre-select the previously selected district (if any)
    const oldDistrict = districtDropdown.getAttribute('data-old-value');
    if (oldDistrict) {
        districtDropdown.value = oldDistrict;
    }
})

            .catch(error => console.error('Error fetching districts:', error));
    } else {
        // If no state is selected, clear the district dropdown
        document.querySelector(`#${offcanvasId} #district`).innerHTML = '<option value="">Select a district</option>';
    }
}


    // Attach event listeners when the page loads
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.offcanvas').forEach((offcanvas) => {
            const offcanvasId = offcanvas.id;

            // Attach state change event listener
            const stateDropdown = offcanvas.querySelector('#state');
            stateDropdown.addEventListener('change', function () {
                getDistricts(this.value, offcanvasId);
            });

            // Initialize district options if a state is already selected
            const selectedState = stateDropdown.value;
            if (selectedState) {
                getDistricts(selectedState, offcanvasId);
            }
        });
    });
</script>








<style>
    .notification-dot {
        position: absolute;
        top: 0;
        right: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #f44336; /* Red color for the dot */
        animation: pulse 1.5s infinite;
    }

    .badge {
        position: relative;
        padding-right: 20px; /* Space for the notification dot */
    }

    @keyframes pulse {
        0% {
            transform: scale(0.8);
            opacity: 0.7;
        }
        50% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(0.8);
            opacity: 0.7;
        }
    }

    .scroll-controls {
        position: relative;
        z-index: 10;
    }

    .kanban-wrapper {
        position: relative;
        overflow-x: hidden; /* Prevent horizontal scroll */
        overflow-y: auto;  /* Allow vertical scroll */
        padding-bottom: 10px;
        scrollbar-width: thin;
        
    }

    .kanban-wrapper::-webkit-scrollbar {
        height: 8px;
    }

    /* .kanban-wrapper::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .kanban-wrapper::-webkit-scrollbar-thumb:hover {
        background: #555;
    } */
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    const scrollLeftBtn = document.getElementById('scroll-left');
    const scrollRightBtn = document.getElementById('scroll-right');
    const kanbanWrapper = document.querySelector('.kanban-wrapper');

    scrollLeftBtn.addEventListener('click', () => {
        kanbanWrapper.scrollBy({
            left: -300,
            behavior: 'smooth'
        });
    });

    scrollRightBtn.addEventListener('click', () => {
        kanbanWrapper.scrollBy({
            left: 300,
            behavior: 'smooth'
        });
    });
});

</script>
@endsection