@extends('layouts.sneat')

@section('title', 'Dashboard - Manage CRM Progress')

@section('content')
<div class="head102 mb-3 d-flex justify-content-between align-items-center">
    <h4>Progress</h4>
    @if(isset($userGroupPermissions['crm_progress_status']) && $userGroupPermissions['crm_progress_status']['adds'] == 1)
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProgressModal">Add CRM Progress</button>
    @endif
</div>

{{-- Alerts --}}
@if(session('success'))
    <div class="alert alert-success fade-out" id="success-alert">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger fade-out" id="error-alert">{{ session('error') }}</div>
@endif

{{-- CRM Progress Table --}}
@if(isset($userGroupPermissions['crm_progress_status']) && $userGroupPermissions['crm_progress_status']['views'] == 1)
<div class="table-responsive text-nowrap">
    <table class="table table-bordered table-hover" id="crmProgressTable">
        <thead>
            <tr>
                @foreach($columns as $column)
                    @if(!in_array($column, ['id','created_at','updated_at']))
                        <th>{{ ucfirst(str_replace('_',' ',$column)) }}</th>
                    @endif
                @endforeach
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($crmprogress as $item)
            <tr>
                @foreach($columns as $column)
                    @if(!in_array($column, ['id','created_at','updated_at']))
                        <td>
                            @if($column === 'list_in_crm')
                                {{ $item->{$column} ? 'Yes' : 'No' }}
                            @else
                                {{ $item->{$column} }}
                            @endif
                        </td>
                    @endif
                @endforeach
                <td>
                    @if(!in_array($item->id, [1,2,5]))
                        @if($userGroupPermissions['crm_progress_status']['edits'])
                        <a href="javascript:void(0);" onclick="editRow({{ $item->id }})">
                            <i class="mdi mdi-pencil-outline me-2"></i>
                        </a>
                        @endif

                        @if($userGroupPermissions['crm_progress_status']['deletes'])
                        <form id="deleteForm{{ $item->id }}" action="{{ route('crmprogress.delete', $item->id) }}" method="POST" style="display:none;">
                            @csrf
                            @method('DELETE')
                        </form>
                        <button class="btn btn-link text-danger p-0" onclick="confirmDelete({{ $item->id }})">
                            <i class="mdi mdi-trash-can-outline"></i>
                        </button>
                        @endif
                    @else
                        <span class="text-muted">Not Editable / Deletable</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@else
<p>You do not have permission to view CRM progress.</p>
@endif

{{-- Add Progress Modal --}}
<div class="modal fade" id="addProgressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('crmprogress.store') }}" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Progress</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="add_name" class="form-label">Name</label>
                        <input type="text" name="name" id="add_name" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="add_list_in_crm" class="form-label">List in CRM</label>
                        <select name="list_in_crm" id="add_list_in_crm" class="form-select">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add Progress</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Edit Progress Modal --}}
<div class="modal fade" id="editProgressModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="editProgressForm">
            @csrf
            @method('PUT')
            <input type="hidden" id="editId" name="id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Progress</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">Name</label>
                        <input type="text" id="edit_name" name="name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label for="edit_list_in_crm" class="form-label">List in CRM</label>
                        <select id="edit_list_in_crm" name="list_in_crm" class="form-select">
                            <option value="1">Yes</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="submitEdit()">Save Changes</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Delete Confirmation Modal --}}
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this progress?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="deleteConfirmBtn">Delete</button>
            </div>
        </div>
    </div>
</div>

{{-- Scripts --}}


<script>
$(document).ready(function() {
    $('#crmProgressTable').DataTable({
        responsive: true,
        autoWidth: false
    });

    // Auto-fade alerts
    setTimeout(() => {
        $('#success-alert').fadeOut();
        $('#error-alert').fadeOut();
    }, 3000);
});

// Edit row
function editRow(id){
    $.get('/crmprogressstatus/' + id + '/edit', function(data){
        $('#editId').val(data.id);
        $('#edit_name').val(data.name);
        $('#edit_list_in_crm').val(data.list_in_crm);
        const editModal = new bootstrap.Modal(document.getElementById('editProgressModal'));
        editModal.show();
    }).fail(function(){
        alert('Failed to fetch data for edit.');
    });
}


// Submit edit via AJAX
function submitEdit(){
    let id = $('#editId').val();
    let formData = {
        _token: '{{ csrf_token() }}',
        _method: 'PUT',
        name: $('#edit_name').val(),
        list_in_crm: $('#edit_list_in_crm').val()
    };

    $.ajax({
        url: '/crmprogressstatus/' + id,
        type: 'POST',
        data: formData,
        success: function(response){
            window.location.href = response.redirect;
        },
        error: function(xhr){
            alert('Update failed');
        }
    });
}


// Delete confirmation
let deleteId = null;
function confirmDelete(id){
    deleteId = id;
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmationModal'));
    deleteModal.show();
}
document.getElementById('deleteConfirmBtn').addEventListener('click', function(){
    if(deleteId){
        document.getElementById('deleteForm'+deleteId).submit();
    }
});
</script>
@endsection