@extends('layouts.contentNavbarLayout')

@section('content')
<div class="container">
    <h2 class="mb-4">Pipeline Management</h2>


    <!-- Add Pipeline Button -->
    <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#pipelineModal">Add Pipeline</button>
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
    <!-- Toast -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="statusToast" class="toast" role="alert" data-bs-delay="2000">
            <div class="toast-header bg-success text-white">
                <strong class="me-auto">Pipeline Updated</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                Status updated successfully.
            </div>
        </div>
    </div>

    <!-- Kanban Board -->
    <style>
        .kanban-board {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
        }
        .kanban-column {
            flex: 0 0 300px;
            background: #f4f5f7;
            border-radius: 6px;
            padding: 1rem;
            height: calc(100vh - 200px);
            overflow-y: auto;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .kanban-card {
            background: white;
            border-radius: 6px;
            padding: 0.75rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin-bottom: 1rem;
            transition: 0.2s ease;
        }
        .kanban-card:hover {
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
    </style>

    <div class="kanban-board">
        @php
            $statuses = [
                'pending' => '🕒 Pending',
                'in_progress' => '⚙️ In Progress',
                'completed' => '✅ Completed',
            ];
        @endphp

        @foreach($statuses as $statusKey => $statusLabel)
            <div class="kanban-column" data-status="{{ $statusKey }}">
                <h5>{{ $statusLabel }}</h5>

                @foreach($pipelines->where('status', $statusKey) as $pipeline)
                    <div class="kanban-card" data-id="{{ $pipeline->id }}">
                        <h6 class="mb-1">{{ $pipeline->campaign_name }}</h6>
                        <small>Lead: {{ $pipeline->lead_source ?? 'N/A' }}</small><br>
                        <small>Assigned: {{ $pipeline->assignedTo->name ?? 'Unassigned' }}</small>
                        <div class="mt-2 d-flex justify-content-between">
                            <a href="javascript:void(0);" 
                          
                            data-bs-toggle="offcanvas" 
                            data-bs-target="#editPipelineCanvas_{{ $pipeline->id }}">
                             <span class="mdi mdi-playlist-edit"></span> Edit
                         </a>
                             
                         
                            <form action="{{ route('pipelines.destroy', $pipeline->id) }}" method="POST" onsubmit="return confirm('Delete this pipeline?')">
                                @csrf
                                @method('DELETE')
                                {{-- <button type="submit" class="btn btn-sm btn-outline-danger">×</button> --}}
                                                                <!-- Trigger Button -->
                                <a type="button"
                           class="text-danger"
                                data-bs-toggle="modal"
                                data-bs-target="#deletePipelineModal"
                                data-id="{{ $pipeline->id }}">
                                <span class="mdi mdi-delete-sweep-outline"></span> Delete
                                </a>

                            </form>
                        </div>
                    </div>

                      <!-- Edit Pipeline Offcanvas -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="editPipelineCanvas_{{ $pipeline->id }}" aria-labelledby="editPipelineCanvasLabel_{{ $pipeline->id }}">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="editPipelineCanvasLabel_{{ $pipeline->id }}">Edit Pipeline</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="editPipelineForm_{{ $pipeline->id }}" action="{{ route('pipelines.update', $pipeline->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label for="editCampaignName_{{ $pipeline->id }}">Campaign Name</label>
                <input type="text" name="campaign_name" id="editCampaignName_{{ $pipeline->id }}" value="{{ $pipeline->campaign_name }}" class="form-control" required>
            </div>

            <div class="mb-3">
                <label for="editLeadSource_{{ $pipeline->id }}">Lead Source</label>
                <input type="text" name="lead_source" id="editLeadSource_{{ $pipeline->id }}" value="{{ $pipeline->lead_source }}" class="form-control">
            </div>

            <div class="mb-3">
                <label for="editStatus_{{ $pipeline->id }}">Status</label>
                <select name="status" id="editStatus_{{ $pipeline->id }}" class="form-control" required>
                    <option value="pending" {{ $pipeline->status === 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="in_progress" {{ $pipeline->status === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="completed" {{ $pipeline->status === 'completed' ? 'selected' : '' }}>Completed</option>
                </select>
            </div>

            <div class="mb-3">
                <label for="editAssignedTo_{{ $pipeline->id }}">Assign To</label>
                <select name="assigned_to" id="editAssignedTo_{{ $pipeline->id }}" class="form-control">
                    <option value="">-- Select Employee --</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" {{ $pipeline->assigned_to == $employee->id ? 'selected' : '' }}>
                            {{ $employee->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <button type="submit" class="btn btn-success">Update Pipeline</button>
        </form>
    </div>
</div>

                @endforeach
            </div>
        @endforeach
    </div>
</div>

<!-- Add Pipeline Modal -->
<div class="modal fade" id="pipelineModal" tabindex="-1" aria-labelledby="pipelineModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('pipelines.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Pipeline</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Campaign Name</label>
                        <input type="text" name="campaign_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Lead Source</label>
                        <input type="text" name="lead_source" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label>Status</label>
                        <select name="status" class="form-control" required>
                            <option value="pending">Pending</option>
                            <option value="in_progress">In Progress</option>
                            <option value="completed">Completed</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Assign To</label>
                        <select name="assigned_to" class="form-control">
                            <option value="">-- Select Employee --</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Save Pipeline</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deletePipelineModal" tabindex="-1" aria-labelledby="deletePipelineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <form id="deletePipelineForm" method="POST">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h5 class="modal-title" id="deletePipelineModalLabel">Confirm Deletion</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 delete this pipeline?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger">Yes, Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>


  
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    function showToast() {
        const toast = new bootstrap.Toast(document.getElementById('statusToast'));
        toast.show();
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.kanban-column').forEach(column => {
            new Sortable(column, {
                group: 'pipelines',
                animation: 150,
                ghostClass: 'bg-light',
                onEnd: function (evt) {
                    const pipelineId = evt.item.dataset.id;
                    const newStatus = evt.to.dataset.status;

                    fetch(`/pipelines/${pipelineId}/update-status`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ status: newStatus })
                    })
                    .then(res => res.json())
                    .then(data => {
                        console.log('Status updated:', data.message);
                        showToast();
                    })
                    .catch(err => {
                        console.error('Failed to update status:', err);
                        alert('Error updating status.');
                    });
                }
            });
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const editButtons = document.querySelectorAll('.edit-pipeline-btn');
        const offcanvas = new bootstrap.Offcanvas(document.getElementById('editPipelineCanvas'));
    
        editButtons.forEach(button => {
            button.addEventListener('click', function () {
                const pipelineId = this.dataset.id;
    
                fetch(`/pipelines/${pipelineId}/edit`)
                    .then(res => res.json())
                    .then(data => {
                        // Fill form fields
                        document.getElementById('editPipelineId').value = data.id;
                        document.getElementById('editCampaignName').value = data.campaign_name;
                        document.getElementById('editLeadSource').value = data.lead_source || '';
                        document.getElementById('editStatus').value = data.status;
                        document.getElementById('editAssignedTo').value = data.assigned_to || '';
    
                        // Show offcanvas
                        offcanvas.show();
                    })
                    .catch(err => {
                        alert('Failed to load pipeline data.');
                        console.error(err);
                    });
            });
        });
    
        // Submit Edit Form via AJAX
        const editForm = document.getElementById('editPipelineForm');
        editForm.addEventListener('submit', function (e) {
            e.preventDefault();
    
            const pipelineId = document.getElementById('editPipelineId').value;
            const formData = new FormData(editForm);
    
            fetch(`/pipelines/${pipelineId}`, {
    method: 'PUT', // or 'PATCH'
    headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        campaign_name: formData.get('campaign_name'),
        lead_source: formData.get('lead_source'),
        status: formData.get('status'),
        assigned_to: formData.get('assigned_to')
    })
})
.then(async res => {
    const data = await res.json();

    if (!res.ok) {
        if (res.status === 422) {
            let errors = Object.values(data.errors).flat().join('\n');
            alert('Validation Error:\n' + errors);
        } else {
            alert('Something went wrong. Please try again.');
        }
        return;
    }

    if (data.success) {
        alert(data.message);
        location.reload();
    } else {
        alert('Update failed.');
    }
})
.catch(err => {
    console.error('Update error:', err);
    alert('An unexpected error occurred.');
});


        });
    });
    </script>
    
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteModal = document.getElementById('deletePipelineModal');
        deleteModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const pipelineId = button.getAttribute('data-id');
            const form = deleteModal.querySelector('#deletePipelineForm');
            form.action = `/pipelines/${pipelineId}`;
        });
    });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const inputs = document.querySelectorAll('.offcanvas input[type="text"]');
    
            inputs.forEach(input => {
                // Select text on focus
                input.addEventListener('focus', function () {
                    this.select();
                });
    
                // Select text on double click
                input.addEventListener('dblclick', function () {
                    this.select();
                });
            });
        });
    </script>
    
@endsection