@extends('admin.layout.main')

@section('content')
    @push('meta')
        <meta name="csrf-token" content="{{ csrf_token() }}">
    @endpush

    @push('styles')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <style>
            body {
                font-family: Arial, sans-serif;
            }

            input#labelcolor,
            input#update-labelcolor {
                color: #000;
                background: #fff;

            }

            .color-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
                gap: 5px;
                max-width: 650px;
            }

            .color-card,
            .update-color-card {
                width: 50px;
                height: 50px;
                border: 1px solid #ccc;
                cursor: pointer;
                transition: transform 0.2s;
            }

            .color-card:hover,
            .update-color-card:hover {
                transform: scale(1.1);
            }
        </style>
    @endpush

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('label_list') }}">Label</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Label List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addLabel">Add Label</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Contentbar -->
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title">Label Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="label_table" class="table-bordered display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Label</th>
                                        <th>Color</th>
                                        <th>Created at</th>
                                        <th>Updated at</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Label Modal -->
    <div class="modal fade" id="createLabelModal" tabindex="-1" role="dialog" aria-labelledby="createStatusModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createStatusModalLabel">Add Label</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createStatusForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="label">Label</label>
                            <input type="text" class="form-control" id="label" name="label" required>
                            <div id="label-error" class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="labelcolor">Color</label>
                            <input type="text" class="form-control" id="labelcolor" name="labelcolor" readonly required>
                            <div id="labelcolor-error" class="invalid-feedback"></div>
                        </div>
                        <div class="color-grid">
                            <div class="color-card" data-color="#2E8B57" style="background-color: #2E8B57;"></div>
                            <div class="color-card" data-color="#32CD32" style="background-color: #32CD32;"></div>
                            <div class="color-card" data-color="#90EE90" style="background-color: #90EE90;"></div>

                            <div class="color-card" data-color="#DAA520" style="background-color: #DAA520;"></div>
                            <div class="color-card" data-color="#FFD700" style="background-color: #FFD700;"></div>
                            <div class="color-card" data-color="#FFFF00" style="background-color: #FFFF00;"></div>

                            <div class="color-card" data-color="#D2691E" style="background-color: #D2691E;"></div>
                            <div class="color-card" data-color="#FFA500" style="background-color: #FFA500;"></div>
                            <div class="color-card" data-color="#FFD580" style="background-color: #FFD580;"></div>

                            <div class="color-card" data-color="#B22222" style="background-color: #B22222;"></div>
                            <div class="color-card" data-color="#FF0000" style="background-color: #FF0000;"></div>
                            <div class="color-card" data-color="#FF6347" style="background-color: #FF6347;"></div>

                            <div class="color-card" data-color="#4B0082" style="background-color: #4B0082;"></div>
                            <div class="color-card" data-color="#8A2BE2" style="background-color: #8A2BE2;"></div>
                            <div class="color-card" data-color="#DDA0DD" style="background-color: #DDA0DD;"></div>

                            <div class="color-card" data-color="#000080" style="background-color: #000080;"></div>
                            <div class="color-card" data-color="#0000FF" style="background-color: #0000FF;"></div>
                            <div class="color-card" data-color="#1E90FF" style="background-color: #1E90FF;"></div>

                            <div class="color-card" data-color="#008080" style="background-color: #008080;"></div>
                            <div class="color-card" data-color="#20B2AA" style="background-color: #20B2AA;"></div>
                            <div class="color-card" data-color="#00CED1" style="background-color: #00CED1;"></div>

                            <div class="color-card" data-color="#556B2F" style="background-color: #556B2F;"></div>
                            <div class="color-card" data-color="#6B8E23" style="background-color: #6B8E23;"></div>
                            <div class="color-card" data-color="#9ACD32" style="background-color: #9ACD32;"></div>

                            <div class="color-card" data-color="#800000" style="background-color: #800000;"></div>
                            <div class="color-card" data-color="#8B4513" style="background-color: #8B4513;"></div>
                            <div class="color-card" data-color="#A0522D" style="background-color: #A0522D;"></div>

                            <div class="color-card" data-color="#2F4F4F" style="background-color: #2F4F4F;"></div>
                            <div class="color-card" data-color="#708090" style="background-color: #708090;"></div>
                            <div class="color-card" data-color="#000" style="background-color: #000;"></div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add Label</button>
                    </div>
                </form>
            </div>
        </div>
    </div>




    <div class="modal fade" id="updateLabelModal" tabindex="-1" role="dialog" aria-labelledby="updateLabelModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateLabelModalLabel">Update Label</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateLabelForm">
                    <div class="modal-body">
                        <input type="hidden" id="label_id" name="id">
                        <div class="form-group">
                            <label for="update-label">Label</label>
                            <input type="text" class="form-control" id="update-label" name="label" required>
                            <div id="update-label-error" class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="update-labelcolor">Color</label>
                            <input type="text" class="form-control" id="update-labelcolor" name="labelcolor" readonly
                                required>
                            <div id="update-labelcolor-error" class="invalid-feedback"></div>
                        </div>
                        <div class="color-grid">
                            <div class="update-color-card" update-data-color="#2E8B57"
                                style="background-color: #2E8B57;"></div>
                            <div class="update-color-card" update-data-color="#32CD32"
                                style="background-color: #32CD32;"></div>
                            <div class="update-color-card" update-data-color="#90EE90"
                                style="background-color: #90EE90;"></div>

                            <div class="update-color-card" update-data-color="#DAA520"
                                style="background-color: #DAA520;"></div>
                            <div class="update-color-card" update-data-color="#FFD700"
                                style="background-color: #FFD700;"></div>
                            <div class="update-color-card" update-data-color="#FFFF00"
                                style="background-color: #FFFF00;"></div>

                            <div class="update-color-card" update-data-color="#D2691E"
                                style="background-color: #D2691E;"></div>
                            <div class="update-color-card" update-data-color="#FFA500"
                                style="background-color: #FFA500;"></div>
                            <div class="update-color-card" update-data-color="#FFD580"
                                style="background-color: #FFD580;"></div>

                            <div class="update-color-card" update-data-color="#B22222"
                                style="background-color: #B22222;"></div>
                            <div class="update-color-card" update-data-color="#FF0000"
                                style="background-color: #FF0000;"></div>
                            <div class="update-color-card" update-data-color="#FF6347"
                                style="background-color: #FF6347;"></div>

                            <div class="update-color-card" update-data-color="#4B0082"
                                style="background-color: #4B0082;"></div>
                            <div class="update-color-card" update-data-color="#8A2BE2"
                                style="background-color: #8A2BE2;"></div>
                            <div class="update-color-card" update-data-color="#DDA0DD"
                                style="background-color: #DDA0DD;"></div>

                            <div class="update-color-card" update-data-color="#000080"
                                style="background-color: #000080;"></div>
                            <div class="update-color-card" update-data-color="#0000FF"
                                style="background-color: #0000FF;"></div>
                            <div class="update-color-card" update-data-color="#1E90FF"
                                style="background-color: #1E90FF;"></div>

                            <div class="update-color-card" update-data-color="#008080"
                                style="background-color: #008080;"></div>
                            <div class="update-color-card" update-data-color="#20B2AA"
                                style="background-color: #20B2AA;"></div>
                            <div class="update-color-card" update-data-color="#00CED1"
                                style="background-color: #00CED1;"></div>

                            <div class="update-color-card" update-data-color="#556B2F"
                                style="background-color: #556B2F;"></div>
                            <div class="update-color-card" update-data-color="#6B8E23"
                                style="background-color: #6B8E23;"></div>
                            <div class="update-color-card" update-data-color="#9ACD32"
                                style="background-color: #9ACD32;"></div>

                            <div class="update-color-card" update-data-color="#800000"
                                style="background-color: #800000;"></div>
                            <div class="update-color-card" update-data-color="#8B4513"
                                style="background-color: #8B4513;"></div>
                            <div class="update-color-card" update-data-color="#A0522D"
                                style="background-color: #A0522D;"></div>

                            <div class="update-color-card" update-data-color="#2F4F4F"
                                style="background-color: #2F4F4F;"></div>
                            <div class="update-color-card" update-data-color="#708090"
                                style="background-color: #708090;"></div>
                            <div class="update-color-card" update-data-color="#000" style="background-color: #000;">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update Label</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            $(document).ready(function() {
                var table = $('#label_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('label_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'label',
                            name: 'label'
                        },
                        {
                            data: 'labelcolor',
                            name: 'labelcolor'
                        },
                        {
                            data: 'created_at',
                            name: 'created_at',
                            render: function(data, type, row) {
                                let date = new Date(data);

                                // Format date as "23 Aug 2024"
                                let formattedDate = date.toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                });

                                return formattedDate;
                            }
                        },
                        {
                            data: 'updated_at',
                            name: 'updated_at',
                            render: function(data, type, row) {
                                let date = new Date(data);

                                // Format date as "23 Aug 2024"
                                let formattedDate = date.toLocaleDateString('en-GB', {
                                    day: '2-digit',
                                    month: 'short',
                                    year: 'numeric'
                                });

                                return formattedDate;
                            }
                        },
                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                        <button type="button" class="btn btn-round btn-secondary" data-id="${row.id}" id="editLabel"><i class="feather icon-edit"></i></button>
                        <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteLabel"><i class="feather icon-trash-2"></i></button>
                    `;
                            }
                        }
                    ]
                });
                $('#addLabel').on('click', function() {
                    $('#createLabelModal').modal('show');
                });
                $('#createStatusForm').on('submit', function(e) {
                    e.preventDefault();

                    // Disable the submit button to prevent multiple submissions
                    let $submitButton = $('#createStatusForm button[type="submit"]');
                    $submitButton.prop('disabled', true);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_label_form') }}",
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#createLabelModal').modal('hide');
                                $('#label_table').DataTable().ajax.reload();
                                Swal.fire('Added!', 'The Label has been added.', 'success');
                                $('#createStatusForm')[0].reset();
                                $('.form-control').removeClass('is-invalid');
                                $('.invalid-feedback').empty();
                            } else {
                                addHandleErrors(response.errors); // Updated function name
                                Swal.fire('Error!', response.message ||
                                    'An unexpected error occurred.', 'error');
                            }
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) {
                                var response = xhr.responseJSON;
                                addHandleErrors(response.errors); // Updated function name

                            } else {
                                console.log(xhr.responseText); // Debugging
                                Swal.fire('Error!', 'An unexpected error occurred.', 'error');
                            }
                        },
                        complete: function() {
                            // Re-enable the submit button after request completes
                            $submitButton.prop('disabled', false);
                        }
                    });
                });

                function addHandleErrors(errors) {
                    // Clear previous error messages
                    $('.form-control').removeClass('is-invalid');
                    $('.invalid-feedback').empty();

                    // Show new error messages
                    if (errors) {
                        $.each(errors, function(field, messages) {
                            // Use a more dynamic way to locate error element if needed
                            let errorElement = $('#' + field + '-error');
                            if (errorElement.length) {
                                errorElement.html(messages.join('<br>')).show(); // Ensure it is shown
                                $('#' + field).addClass('is-invalid');
                            }
                        });
                    }
                }




                $('body').on('click', '#deleteLabel', function() {
                    var id = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        // Use 'warning' for better visibility
                        showCancelButton: true,

                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "DELETE",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: "{{ route('delete_label', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Label has been deleted.', 'success');

                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'Label is used in Leads.', 'error');
                                }
                            });
                        }
                    });
                });

                $('body').on('click', '#editLabel', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_label', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateLabelModal').modal('hide');
                            } else {
                                var label = response.label;
                                $('#label_id').val(label.data.id);

                                $('#updateLabelModal').modal('show');
                                $('#label_update').val(label.data.label);
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#updateLabelForm').on('submit', function(e) {
                    e.preventDefault();

                    let $submitButton = $('#updateLabelForm button[type="submit"]');
                    $submitButton.prop('disabled', true);

                    let id = $('#label_id').val();
                    let url = "{{ route('update_label_form', ['id' => ':id']) }}".replace(':id', id);

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: url,
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#updateLabelModal').modal('hide');
                                $('#label_table').DataTable().ajax.reload();
                                Swal.fire('Updated!', response.message, 'success');
                                $('#updateLabelForm')[0].reset();
                                clearErrors();
                            } else {
                                handleErrors(response.errors);
                            }
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) {
                                var response = xhr.responseJSON;
                                handleErrors(response.errors);
                            } else {
                                console.log("AJAX Error: ", xhr);
                                Swal.fire('Error!', 'An unexpected error occurred', 'error');
                            }
                        },
                        complete: function() {
                            $submitButton.prop('disabled', false);
                        }
                    });
                });

                function handleErrors(errors) {
                    clearErrors();

                    if (errors) {
                        $.each(errors, function(field, messages) {
                            let errorElement = $('#update-' + field + '-error');
                            errorElement.html(messages.join('<br>'));
                            $('#update-' + field).addClass('is-invalid');
                        });
                    }
                }

                function clearErrors() {
                    $('.form-control').removeClass('is-invalid');
                    $('.invalid-feedback').empty();
                }


            });


            document.addEventListener('DOMContentLoaded', () => {
                const colorCards = document.querySelectorAll('.color-card');
                const selectedColorInput = document.getElementById('labelcolor');

                colorCards.forEach(card => {
                    card.addEventListener('click', () => {
                        const color = card.getAttribute('data-color');
                        selectedColorInput.value = color;
                    });
                });
            });

            $(document).ready(function() {
                $('.update-color-card').on('click', function() {
                    let color = $(this).attr('update-data-color');
                    $('#update-labelcolor').val(color);
                    $('.update-color-card').removeClass('selected');
                    $(this).addClass('selected');
                });
            });
        </script>
    @endpush
@endsection