@extends('user.layouts.app')

@section("styles")
    <!-- Switchery CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css" rel="stylesheet">
@endsection
@section('title', "Projects" )

@section('modals')
    <div class="modal fade" id="folderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Create Folder</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="folderForm">
                        @csrf
                        <div class="form-group">
                            <label for="folderName">Folder Name</label>
                            <input type="text" class="form-control" id="folderName" name="folderName">
                            <span id="folderNameError" class="text-danger"></span>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveFolder">Save Folder</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Include this modal for renaming a folder -->
    <div class="modal fade" id="renameFolderModal" tabindex="-1" role="dialog" aria-labelledby="renameFolderModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="renameFolderModalLabel">Rename Folder</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="newFolderName">New Folder Name</label>
                        <input type="text" class="form-control" id="newFolderName" name="newFolderName">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="renameFolder">Rename Folder</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="moveProjectModal" tabindex="-1" role="dialog" aria-labelledby="moveProjectModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="moveProjectModalLabel">Move Project to Folder</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="folderDropdown">Select Folder:</label>
                        <select class="form-control" id="folderDropdown">
                            <!-- Populate this dropdown with folders using JavaScript -->
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="moveProjectButton">Move</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('content')

    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <nav class="page-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Projects</li>
            </ol>
        </nav>
        <div>

            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#folderModal">New Folder</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addSiteModal">New Project</button>
        </div>
    </div>


    <div class="row">
        <div class="col-md-6">
            <h5><i class="link-icon" data-feather="folder"></i> Folders ({{ $folders->count() }})</h5>        </div>
        <div class="col-md-6 text-right">
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Last Modified
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Date Created</a>
                    <a class="dropdown-item" href="#">Last Modified</a>
                    <a class="dropdown-item" href="#">Alphabetical</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4" id="all-folders-list">
        @foreach($folders as $folder)
            <div class="col-md-3">
                <div class="card mb-4">
                    <div class="card-body p-3">
                        <h5 class="card-title mb-1" data-folder-id="{{ $folder->id }}">{{ $folder->name }}</h5>
                        <div class="row">
                            <div class="col-10">
                                <p class="card-subtitle mb-0 text-muted">22 Projects</p>
                            </div>
                            <div class="col-2">
                                <div class="dropdown">
                                    <a type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <p class="card-subtitle mb-0 text-muted"><i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i></p>
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                        <a class="dropdown-item d-flex align-items-center rename-folder" href="javascript:;" data-folder-id="{{ $folder->id }}">
                                            <i data-feather="edit-2" class="icon-sm mr-2"></i> <span>Rename</span>
                                        </a>
                                        <a class="dropdown-item d-flex align-items-center delete-folder" href="javascript:;" data-folder-id="{{ $folder->id }}">
                                            <i data-feather="trash" class="icon-sm mr-2"></i> <span>Delete</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="row mt-5">
        <div class="col-md-6">
            <h5><i class="link-icon" data-feather="file"></i> Projects ({{ $project_count }})</h5>
        </div>
        <div class="col-md-6 text-right">
            <button class="btn btn-outline-secondary" id="selectProject" type="button">Select</button>
            <button class="btn btn-outline-secondary" id="deleteProjects" type="button">Delete</button>
            <div class="dropdown d-inline-block">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Move to
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Folder</a>
                    <a class="dropdown-item" href="#">Teamspace</a>
                </div>
            </div>
            <div class="dropdown d-inline-block">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Last Modified
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Date Created</a>
                    <a class="dropdown-item" href="#">Last Modified</a>
                    <a class="dropdown-item" href="#">Alphabetical</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        @foreach($projects as $project)
            <div class="col-3 grid-margin stretch-card project-card" data-id="{{ $project->id }}">
                <div class="card project-card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-10">
                                <h5 class="card-title mb-0 mt-1">{{ substr($project->title, 0,  40) }}...</h5>
                            </div>
                            <div class="col-2 text-right">
                                <div class="custom-control custom-checkbox mb-0 ">
                                    <input type="checkbox" class="custom-control-input project-checkbox" id="project-checkbox-{{ $project->id }}" value="{{ $project->id }}">
                                    <label class="custom-control-label" for="project-checkbox-{{ $project->id }}"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <img src="{{ $project->featured_image }}" alt="" class="img-fluid rounded mb-3">
                        <p class="d-none">PRODUCT/BRAND NAME</p>
                        <div class="d-none">{{ substr($project->title, 0,  50) }}</div>
                        <p>DESCRIPTION</p>
                        <div class="mb-0">{{ substr($project->description, 0,  100) }}</div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-10">
                                @php
                                    $created_at = $project->created_at;
                                    $now = now();
                                @endphp
                                <p><small class="text-muted"><i class="link-icon mr-1" data-feather="calendar"></i>{{ $created_at->isToday() || $created_at->isYesterday() ? $created_at->format('l \a\t h:i A') : $created_at->format('m/d/Y') }}</small></p>
                                <p>
                                    @if($project->public)
                                        <small class="text-muted"><i class="link-icon mr-2" data-feather="users"></i>Shared to Workspace</small>
                                    @else
                                        <small class="text-muted"><i class="link-icon mr-2" data-feather="user"></i>Private</small>
                                    @endif
                                </p>
                            </div>
                            <div class="col-2 text-right">
                                <div class="dropdown">
                                    <a type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                        <a class="dropdown-item d-flex align-items-center" href="javascript:;">
                                            <i data-feather="link" class="icon-sm mr-2"></i>
                                            <label class="d-inline-block pr-2 mb-0 font-weight-normal" for="project-share-checkbox-{{ $project->id }}">Share to Workspace</label>
                                            <input type="checkbox" class="js-switch share-project-on-workspace" @if($project->public) checked @endif data-id="{{ $project->id }}" value="{{ $project->id }}" id="project-share-checkbox-{{ $project->id }}">
                                        </a>
                                        <a class="dropdown-item d-flex align-items-center move-project" data-id="{{ $project->id }}"  data-toggle="modal" data-target="#moveProjectModal"><i data-feather="move" class="icon-sm mr-2"></i> <span class="">Move to Folder</span></a>
                                        <a class="dropdown-item d-flex align-items-center delete-project" href="javascript:;" data-id="{{ $project->id }}"><i data-feather="trash" class="icon-sm mr-2"></i> <span class="">Delete</span></a>
                                        <a class="dropdown-item d-flex align-items-center" href="{{ route('projects.edit', $project->id) }}" data-id="{{ $project->id }}"><i data-feather="edit" class="icon-sm mr-2"></i> <span class="">Edit</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="container text-center">
        {{ $projects->links('pagination::bootstrap-4') }}
    </div>
    <nav class="mt-4">
        <div class="nav nav-tabs nav-tabs-line" id="nav-tab" role="tablist">
            <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Queue</button>
            <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Sent</button>
            <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Draft</button>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"></div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
    </div>

@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            $('body').on("click", "#saveFolder", function () {
                var folderName = $('#folderName').val();
                var folderNameError = $('#folderNameError');

                folderNameError.text('');
                $('#folderName').removeClass('is-invalid');

                if (!folderName) {
                    folderNameError.text('Folder name is required.');
                    $('#folderName').addClass('is-invalid');
                    return;
                }

                $.ajax({
                    type: 'POST',
                    url: '{{ route('folder.store') }}',
                    data: {
                        'folderName': folderName,
                        '_token': '{{ csrf_token() }}',
                    },
                    success: function (data) {
                        if (data.success) {
                            $('#folderModal').modal('hide');
                            Swal.fire('Success', data.message, 'success');

                            var folderHTML = `
                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-body p-3">
                                    <h5 class="card-title mb-1" data-folder-id="${data.folderId}">${folderName}</h5>
                                    <div class="row">
                                        <div class="col-10">
                                            <p class="card-subtitle mb-0 text-muted">22 Projects</p>
                                        </div>
                                        <div class="col-2">
                                            <div class="dropdown">
                                                <a type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <p class="card-subtitle mb-0 text-muted"><i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i></p>
                                                </a>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                                    <a class="dropdown-item d-flex align-items-center rename-folder" href="javascript:;" data-folder-id="${data.folderId}">
                                                        <i data-feather="edit-2" class="icon-sm mr-2"></i> <span>Rename</span>
                                                    </a>
                                                    <a class="dropdown-item d-flex align-items-center delete-folder" href="javascript:;" data-folder-id="${data.folderId}">
                                                        <i data-feather="trash" class="icon-sm mr-2"></i> <span">Delete</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;

                            $('#all-folders-list').append(folderHTML);
                            $('#folderName').val('');
                        } else {
                            folderNameError.text(data.message);
                            $('#folderName').addClass('is-invalid');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(xhr.responseText);
                    },
                    complete: function(){
                        feather.replace()
                    }
                });
            });

            $(document).on('click', '.rename-folder', function () {
                var folderId = $(this).data('folder-id');
                var folderName = $(`h5[data-folder-id="${folderId}"]`).text();

                $('#newFolderName').val(folderName);
                $('#renameFolderModal').attr('data-folder-id', folderId);
                $('#renameFolderModal').modal('show');
            });

            $('#renameFolder').click(function () {
                var folderId = $('#renameFolderModal').data('folder-id');
                var newFolderName = $('#newFolderName').val();
                renameFolder(folderId, newFolderName);
            });

            function renameFolder(folderId, newName) {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('folder.rename') }}',
                    data: {
                        'folderId': folderId,
                        'newName': newName,
                        '_token': '{{ csrf_token() }}',
                    },
                    success: function (data) {
                        if (data.success) {
                            $(`h5[data-folder-id="${folderId}"]`).text(newName);
                            $('#renameFolderModal').modal('hide');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }

            $("body").on('click', '.delete-folder', function () {
                var folderId = $(this).data('folder-id');
                var folderName = $(`h5[data-folder-id="${folderId}"]`).text();

                Swal.fire({
                    title: 'Are you sure?',
                    text: `You are going to delete the folder "${folderName}". This action cannot be undone!`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        deleteFolder(folderId);
                    }
                });
            });

            function deleteFolder(folderId) {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('folder.delete') }}',
                    data: {
                        'folderId': folderId,
                        '_token': '{{ csrf_token() }}',
                    },
                    success: function (data) {
                        if (data.success) {
                            $(`[data-folder-id="${folderId}"]`).closest('.col-md-3').remove();
                            Swal.fire('Deleted!', 'Folder has been deleted.', 'success');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    </script>


    <script>
        $(document).ready(function() {
            var selected_projects = [];

            $('#selectProject, #deleteProjects').hide();
            function updateButtonText() {
                var count = selected_projects.length;
                if (count > 0) {
                    $('#selectProject').show().text('Selected (' + count + ')');
                    $('#deleteProjects').show().text('Delete (' + count + ')');
                } else {
                    $('#selectProject').hide();
                    $('#deleteProjects').hide();
                }
            }

            // Handle clicking the "delete-project" buttons
            $('.delete-project').on('click', function() {
                var projectId = $(this).data('id');
                deleteProject([projectId]); // Pass the project ID to the deleteProject function
            });

            $('.project-checkbox').on('change', function() {
                var value = $(this).val();
                if ($(this).is(':checked')) {
                    selected_projects.push(value);
                } else {
                    var index = selected_projects.indexOf(value);
                    if (index > -1) {
                        selected_projects.splice(index, 1);
                    }
                }
                updateButtonText();
            });

            $('#selectProject').on('click', function() {
                var checkboxes = $('.project-checkbox');
                var allChecked = checkboxes.length === checkboxes.filter(':checked').length;
                if (allChecked) {
                    checkboxes.prop('checked', false);
                    selected_projects = [];
                } else {
                    checkboxes.prop('checked', true);
                    selected_projects = checkboxes.map(function() {
                        return $(this).val();
                    }).get();
                }
                updateButtonText();
            });

            $('#deleteProjects').on('click', function() {
                if (selected_projects.length === 0) return;
                deleteProject(selected_projects);
            });

            // Function to delete one or more projects
            function deleteProject(projectIds) {
                Swal.fire({
                    title: `Delete ${projectIds.length} project(s)`,
                    text: 'Deleting is final and cannot be reversed. Are you sure you still want to proceed?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Confirm',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Assuming you have a route in Laravel to handle the deletion
                        $.ajax({
                            type: 'POST',
                            url: '{{ route('project.delete') }}', // Replace with your Laravel route
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                ids: projectIds // Use the projectIds array here
                            },
                            success: function(data) {
                                // Handle success response (e.g., show a success alert)
                                Swal.fire('Projects deleted', '', 'success');
                                // Clear the selected_projects array and update button text
                                selected_projects = [];
                                updateButtonText();
                            },
                            error: function(data) {
                                Swal.fire('Error', 'Something went wrong.', 'error');
                            }
                        });
                    }
                });
            }
        });
    </script>



    <script>
        $(document).ready(function(){
            var projectId = $(this).data('id');
            $('body').on('click', '.move-project', function() {
                console.log('Move Button Clicked!')
                $.ajax({
                    type: 'POST',
                    url: '{{ route('folder.index') }}',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                    },
                    success: function(data) {
                        var folderDropdown = $('#folderDropdown');
                        folderDropdown.empty(); // Clear existing options
                        $.each(data, function(index, folder) {
                            folderDropdown.append($('<option></option>')
                                .attr('value', folder.id)
                                .text(folder.name));
                        });
                    },
                    error: function(data) {
                        // Handle error response (e.g., show an error alert)
                        Swal.fire('Error', 'Something went wrong while fetching folders.', 'error');
                    }
                });
            });
            function moveProject(projectId, folderId) {
                $.ajax({
                    type: 'POST',
                    url: '{{ route('project.move') }}',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        projectId: projectId,
                        folderId: folderId
                    },
                    success: function(data) {
                        // Handle success response (e.g., show a success alert)
                        Swal.fire('Project moved to folder', '', 'success');
                        // You can perform additional actions here
                    },
                    error: function(data) {
                        // Handle error response (e.g., show an error alert)
                        Swal.fire('Error', 'Something went wrong while moving the project.', 'error');
                    }
                });
            }

            // Add a click event listener to the "Move" button inside the modal
            $('body').on('click','#moveProjectButton', function() {
                var projectId = $('#moveProjectModal').data('id');
                var folderId = $('#folderDropdown').val();

                console.log(projectId, folderId)
                if (projectId) {
                    moveProject(projectId, folderId);
                }

                // Close the modal
                $('#moveProjectModal').modal('hide');
            });

        })
    </script>


    <!-- Switchery JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
    <script>
        $(document).ready(function () {
            var checkboxes = document.querySelectorAll('.js-switch');
            checkboxes.forEach(function(checkbox) {
                new Switchery(checkbox, {
                    size: 'small',
                    color: '#219d98'
                });
            });

            $('.dropdown-menu').on('click', function(e) {
                e.stopPropagation();
            });

            $('.share-project-on-workspace').on('change', function () {
                var projectId = $(this).val();
                var isChecked = $(this).prop('checked');
                $.ajax({
                    url: '{{ route("project.share") }}',
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        projectId: projectId,
                        public: isChecked ? 'on' : 'off'
                    },
                    success: function (response) {
                        console.log(response);
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
@endsection