@extends('layouts.sample')

@section('title', 'Dashboard - Manage Products')
@section('subcontent')
    <div class="head102">
        <div class="d-flex align-items-center justify-content-between">
            <h4>Progress</h4>
            <!-- Button to open the Add Progress Modal -->
            @if (isset($userGroupPermissions['crm_progress_status']) && $userGroupPermissions['crm_progress_status']['adds'] == 1)
                <div class="btn1 btn-primary" data-bs-toggle="modal" data-bs-target="#addProgressModal">Add Crm Progress</div>
            @endif
        </div>
    </div>

    @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


    @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="example">
                <thead class="thead-dark">
                    <tr>
                        @foreach ($columns as $column)
                            @if ($column !== 'id' && $column !== 'created_at' && $column !== 'updated_at')
                                <th>{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
                            @endif
                        @endforeach
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @foreach ($crmprogress as $item)
                        <tr>
                            @foreach ($columns as $column)
                            @if ($column !== 'id' && $column !== 'created_at' && $column !== 'updated_at')
                                <td>
                                    @if ($column === 'list_in_crm')
                                        {{ $item->{$column} == 0 ? 'No' : 'Yes' }}
                                    @else
                                        {{ $item->{$column} }}
                                    @endif
                                </td>
                            @endif
                        @endforeach
                        
                            <td>
                                <div class="dropdown d-flex">
                                    @if ($item->id !== 1 && $item->id !== 2 && $item->id !== 5)
                                        <!-- Edit Link -->
                                        @if (isset($userGroupPermissions['crm_progress_status']) && $userGroupPermissions['crm_progress_status']['edits'] == 1)
                                            <a href="javascript:void(0);" data-bs-toggle="modal"
                                                data-bs-target="#exLargeModal" onclick="editRow({{ $item->id }})">
                                                <i class="mdi mdi-pencil-outline me-2"></i>
                                            </a>
                                        @endif

                                        <div class="demo-inline-spacing"></div>
                                        <!-- Delete Link -->
                                        @if (isset($userGroupPermissions['crm_progress_status']) && $userGroupPermissions['crm_progress_status']['deletes'] == 1)
                                            <form action="{{ route('crmprogress.delete', $item->id) }}" method="post"
                                                id="deleteForm{{ $item->id }}">
                                                @csrf
                                                @method('DELETE')
                                                <button class="dropdown-item delete-banner-btn" type="button"
                                                    data-category-id="{{ $item->id }}">
                                                    <i class="mdi mdi-trash-can-outline me-2"></i>
                                                </button>
                                            </form>
                                        @endif
                                    @else
                                        <!-- Optionally, you can show a message indicating these IDs are not editable/deletable -->
                                        <span class="text-muted">Not Editable / Deletable</span>
                                    @endif
                                </div>
                            </td>
                        </tr>

                        <div class="modal" id="deleteConfirmationModal" data-bs-backdrop="static" tabindex="-1">
                            <div class="modal-dialog modal-l 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"
                                            aria-label="Close"></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="btn1 btn-secondary"
                                            data-bs-dismiss="modal">Cancel</button>
                                        <button type="button" class="btn1 btn-danger" id="confirmDeleteBtn">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="exLargeModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <form id="editForm">
                                    @csrf
                                    @method('PUT') <!-- Ensure method spoofing is included -->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="exampleModalLabel4">Update
                                                Crm Progress</h4>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="row g-2">
                                                    <input type="hidden" name="id" id="editId">
                                                    @foreach ($columns as $column)
                                                    @if ($column === 'created_at' || $column === 'updated_at' || $column === 'id')
                                                        <!-- Do not display created_at, updated_at, or id -->
                                                    @elseif ($column === 'list_in_crm')
                                                        <div class="form-floating form-floating-outline mb-4">
                                                           
                                                            <select id="list_in_crm{{ $item->id }}" class="form-select" name="list_in_crm">
                                                                <option value="1" {{ $item->list_in_crm == 1 ? 'selected' : '' }}>Yes</option>
                                                                <option value="0" {{ $item->list_in_crm == 0 ? 'selected' : '' }}>No</option>
                                                            </select>
                                                            <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                                        </div>
                                                    @else
                                                        <div class="form-floating form-floating-outline mb-4">
                                                            <input type="text" id="{{ $column }}" class="form-control" name="{{ $column }}"
                                                                placeholder="Enter your {{ $column }}">
                                                            <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                                        </div>
                                                    @endif
                                                @endforeach
                                                
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn1 btn-outline-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                            <button type="button" onclick="handleSubmit()" class="btn1 btn-primary">Save
                                                changes</button>

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

                        <script>
                            function editRow(id) {
                                // Fetch the row data using AJAX and populate the modal
                                $.get('/crmprogressstatus/' + id + '/edit', function(data) {
                                    $('#editId').val(data.id);
                                    console.log(data);

                                    // Populate input fields with row data
                                    @foreach ($columns as $column)
                                        $('#{{ $column }}').val(data.{{ $column }});
                                    @endforeach
                                    // Show the modal
                                    //$('#exLargeModal').modal('show');
                                });
                            }

                            function handleSubmit() {
                                // Prevent default form submission behavior
                                var id = $('#editId').val(); // Extract the ID from the form
                                var formData = new FormData(document.getElementById('editForm')); // Get the form data
                                formData.append('_method', 'PUT'); // Ensure the PUT method is included

                                // Debug FormData content by iterating over its entries
                                for (var pair of formData.entries()) {
                                    console.log(pair[0] + ': ' + pair[1]);
                                }

                                // Make the AJAX call
                                $.ajax({
                                    url: '/crmprogressstatus/' + id, // Ensure this matches the route defined in web.php
                                    method: 'POST', // Use POST with method spoofing for PUT
                                    data: formData,
                                    processData: false,
                                    contentType: false,
                                    success: function(response) {
                                        // Handle success, e.g., close the modal, update the table, etc.
                                        console.log(response.message);
                                        $('#success-alert').hide();
                                        $('#error-alert').hide();

                                        // Redirect to the response redirect URL
                                        window.location.href = response.redirect;

                                        // Show the success message (remove one of these lines)
                                        $('#success-alert').text(response.message).show();
                                    },
                                    error: function(xhr, status, error) {
                                        // Handle error, e.g., show an error message
                                        console.error('Update failed:', error);
                                    }
                                });
                            }
                        </script>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p>You Dont Have Permission to access</p>
    @endif



    <!-- Add Progress Modal -->
    <div class="modal fade" id="addProgressModal" tabindex="-1" aria-labelledby="addProgressModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form id="banner-form" action="{{ route('crmprogress.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="addProgressModalLabel">Add New Progress</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @foreach ($columns as $column)
                            @if ($column === 'id' || $column === 'created_at' || $column === 'updated_at')
                                <!-- Skip the id, created_at, and updated_at fields -->
                                @elseif ($column === 'list_in_crm')
                                                        <div class="form-floating form-floating-outline mb-4">
                                                           
                                                            <select id="list_in_crm{{ $item->id }}" class="form-select" name="list_in_crm">
                                                                <option value="1" {{ $item->list_in_crm == 1 ? 'selected' : '' }}>Yes</option>
                                                                <option value="0" {{ $item->list_in_crm == 0 ? 'selected' : '' }}>No</option>
                                                            </select>
                                                            <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                                        </div>
                            @else
                                <!-- Text input fields -->
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="text" id="{{ $column }}" class="form-control"
                                        name="{{ $column }}" placeholder="Enter your {{ $column }}"
                                        value="{{ old($column) }}" required>
                                    <!-- Add value attribute with old input value -->
                                    <label for="{{ $column }}">{{ ucfirst($column) }}</label>
                                    <!-- Error message placeholder -->
                                    <div id="{{ $column }}-error" class="text-danger error-message"></div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn1 btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn1 btn-primary">Add Progress</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@section('page-script')

    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            // Function to show and fade out alert
            function showAlert(id) {
                const alert = document.getElementById(id);
                if (alert) {
                    alert.style.display = 'block';
                    setTimeout(function() {
                        alert.style.opacity = '0';
                        setTimeout(function() {
                            alert.style.display = 'none';
                        }, 500); // Match this with the CSS transition duration
                    }, 2000); // Show for 2 seconds
                }
            }
            // Show success and error alerts if they exist
            showAlert('success-alert');
            showAlert('error-alert');
        });

        document.addEventListener('DOMContentLoaded', function() {
            const deleteButtons = document.querySelectorAll('.delete-banner-btn');
            const deleteConfirmationModal = new bootstrap.Modal(document.getElementById('deleteConfirmationModal'));

            deleteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const bannerId = this.getAttribute('data-category-id');
                    document.getElementById('confirmDeleteBtn').setAttribute('data-category-id',
                        bannerId);
                    deleteConfirmationModal.show();
                });
            });

            const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
            confirmDeleteBtn.addEventListener('click', function() {
                const bannerId = this.getAttribute('data-category-id');
                const form = document.getElementById('deleteForm' + bannerId);
                if (form) {
                    form.submit();
                }
                deleteConfirmationModal.hide(); // Hide the modal after form submission
            });
        });
    </script>
@endsection