@extends('layouts/contentNavbarLayout')
@section('title', 'Tables - Basic Tables')
@section('page-script')
    <script src="{{ asset('assets/js/form-basic-inputs.js') }}"></script>
@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="head102">
    <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
        @if (isset($userGroupPermissions['contacts']) && $userGroupPermissions['contacts']['adds'] == 1)
        <a class="btn1 btn-primary mb-4" href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#addCrmOffcanvas" aria-controls="addCrmOffcanvas">Add CRM</a>
    @endif
    </div>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="addCrmOffcanvas" aria-labelledby="addCrmOffcanvasLabel">
    <div class="offcanvas-header">
      <h5 id="addCrmOffcanvasLabel">Add CRM</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <!-- Form to Add CRM -->
      <form id="addCrmForm" 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 'state' 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')
                            <select id="{{ $column }}" class="form-select" name="{{ $column }}">
                                <option value="">Select a industry</option>
                                @foreach($crmindustry as $industry)
                                    <option value="{{ $industry->id }}">{{ $industry->page_name }}</option>
                                @endforeach
                            </select>
                            @elseif($column == 'solution')
                            <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>
                            
                            <label for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                        @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 CRM</button>
    </form>
    
    
    </div>
  </div>


{{-- search --}}
<!-- Search Filters -->
<!-- Search Filters -->
<div class="card p-25 mb-50 d-flex">
    
    <div class="row mb-4">

        <div class="col-md-5">
            <!-- 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-5">
            <!-- 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>
    
    <!-- Search Form -->
    
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // When state changes, fetch districts
        document.getElementById('filterState').addEventListener('change', function () {
            const stateCode = this.value;
            if (stateCode) {
                // Send an AJAX request to fetch districts based on the selected state
                fetch(`/get-districts/${stateCode}`)
                    .then(response => response.json())
                    .then(data => {
                        const districtSelect = document.getElementById('filterDistrict');
                        districtSelect.innerHTML = '<option value="">Select a District</option>'; // Reset district options

                        // Populate district options based on response
                        if (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));
            } else {
                // Reset district dropdown if no state is selected
                document.getElementById('filterDistrict').innerHTML = '<option value="">Select a District</option>';
            }
        });
    });
</script>




    <div class="card">  
        <div class="table-responsive text-nowrap">
            <table class="table">
                <thead>
                    <tr>
                        @foreach ($columns as $column)
                            @if ($column !== 'id' && $column !== 'updated_at' && $column !== 'add_to_crm' && $column !== 'middle_name' 
                            && $column !== 'organization'
                            && $column !== 'address'
                            && $column !== 'website'
                            && $column !== 'last_name' 
                            && $column !== 'adderess' 
                            && $column !== 'message' 
                            && $column !== 'subject' 
                            && $column !== 'state' 
                            && $column !== 'district' 
                            && $column !== 'location' 
                            && $column !== 'industry' 
                            && $column !== 'solution' 
                          )
                                {{-- Skip the 'id' column --}}
                                @if ($column === 'image_path')
                                    <th>Banner Image</th>
                 {{--                @elseif ($column === 'add_to_crm')
                                    <th>Enquiry Type</th> --}}
                                @else
                                    <th>{{ ucfirst($column) }}</th>
                                @endif
                            @endif
                        @endforeach
                        <th>Next Follow-ups</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach ($paginationdata as $item)
                        <tr>
                            @foreach ($columns as $column)
                                @if ($column !== 'id' && $column !== 'updated_at' && $column !== 'add_to_crm' && $column !== 'middle_name' 
                                && $column !== 'organization'
                                && $column !== 'address'
                                && $column !== 'website'
                                && $column !== 'last_name' 
                                && $column !== 'adderess' 
                                && $column !== 'message' 
                                && $column !== 'subject'
                                && $column !== 'state' 
                            && $column !== 'district' 
                            && $column !== 'location' 
                            && $column !== 'industry' 
                            && $column !== 'solution' 
                                 )
                                    {{-- Skip the 'id' column --}}
                                    <td>
                                        @if ($column === 'image_path')
                                            {{-- Display thumbnail image --}}
                                            @if (!empty($item->{$column}))
                                                <img src="{{ asset('storage/' . $item->image_path) }}"
                                                    alt="{{ $item->alt }}" class="img-thumbnail"
                                                    style="max-width: 50px; max-height: 50px;">
                                            @endif
                                            @elseif ($column === 'type')
                                            {{-- Display "Walking" or "Online" with badge --}}
                                            @if ($item->type == 0)
                                                <span class="badge px-2 rounded-pill bg-label-warning text-capitalize">Walking</span>
                                            @else
                                                <span class="badge px-2 rounded-pill bg-label-info text-capitalize">Online</span>
                                            @endif
                                        @else
                                            {{ $item->{$column} }}
                                        @endif
                                    </td>
                                @endif
                            @endforeach
                            <td>
                                <ul class="timeline mb-0">
                                    @foreach($item->followUps->filter(function($followUp) {
                                        $nextFollowUpDate = \Carbon\Carbon::parse($followUp->next_follow_up_date);
                                        return $nextFollowUpDate->isAfter(\Carbon\Carbon::now()); // Only future dates (strictly after now)
                                    })->sortBy('next_follow_up_date')->take(1) as $followUp)
                                        <li class="d-flex">
                                            <h6>Current Interaction:</h6> 
                                            <small>{{ $followUp->crmstatusmodal->name }}</small>
                                        </li>
                            
                                        <li class="d-flex">
                                            <h6>Upcoming Follow-up:</h6> 
                                            <small class="badge px-2 rounded-pill bg-label-success">
                                                @php
                                                    $nextFollowUpDate = \Carbon\Carbon::parse($followUp->next_follow_up_date);
                                                    if ($nextFollowUpDate->isTomorrow()) {
                                                        echo 'Tomorrow';
                                                        // Add notification dot next to "Tomorrow"
                                                        echo '<span class="notification-dot"></span>';
                                                    } else {
                                                        // Display future dates in YYYY-MM-DD format
                                                        echo $nextFollowUpDate->format('Y-m-d');
                                                    }
                                                @endphp
                                            </small>
                                        </li>
                            
                                        @if ($followUp->crmstatusmodal->description)
                                            <li>
                                                <strong>Details of Current Status:</strong> 
                                                <small>{{ $followUp->crmstatusmodal->description }}</small>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </td>
                            
                            <td>
                                <div class="action-list d-flex align-items-center">
                                     <!-- Edit Action -->
                                    <a href="javascript:void(0)" class="btn p-0 me-3 text-warning" 
                                    data-bs-toggle="offcanvas" data-bs-target="#editCrmOffcanvas{{ $item->id }}" aria-controls="editCrmOffcanvas{{ $item->id }}" 
                                    title="Edit">
                                    <i class="mdi mdi-pencil"></i>
                                    </a>
                                    <!-- Detailed View -->
                                    <a class="btn p-0 me-3" data-bs-toggle="modal" data-bs-target="#detailsModal{{ $item->id }}" data-bs-toggle="tooltip" title="Detailed View">
                                        <i class="mdi mdi-file-find"></i>
                                    </a>
                                    <!-- Add Follow-up -->
                                    <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>
                                    <!-- Delete Action -->
                                    @if (isset($userGroupPermissions['contacts']) && $userGroupPermissions['contacts']['deletes'] == 1)
                                       {{--  <form action="{{ route('contacts.destroy', $item->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn p-0 text-danger delete-speaker-btn" type="submit" data-bs-toggle="tooltip" title="Delete">
                                                <i class="mdi mdi-trash-can-outline"></i>
                                            </button>
                                        </form> --}}
                                        <form action="{{ route('contacts.updateRemoveToCrm', $item->id) }}" method="POST" id="addToCrmForm{{ $item->id }}" class="d-inline">
                                            @csrf
                                            @method('PATCH')
                                            <button type="button" class="btn p-0 text-danger delete-speaker-btn add-crm-btn" 
                                                data-bs-toggle="modal" data-bs-target="#confirmModal{{ $item->id }}">
                                                <i class="mdi mdi-trash-can-outline"></i>
                                            </button>
                                        </form>
                                        {{-- Confirmation Modal --}}
                                        <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>
                                    @else
                                        <!-- Disabled Delete Button -->
                                        <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
                                </div>  
                            </td>
                        </tr>
                        <!-- Edit CRM Off-canvas -->
                        <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 == '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="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>
                    @endforeach
                </tbody>
            </table>
            <!-- Display pagination links -->
        </div>
    </div><br>
    <div class="d-flex justify-content-center col-md-2 pagination">
        {{ $paginationdata->links() }}
    </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;
    }
}

</style>
@endsection