@section('title',$title)
@section('description',$description)
@extends('layout.app')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">

            <div class="breadcrumb-main user-member justify-content-sm-between ">
                <div class=" d-flex flex-wrap justify-content-center breadcrumb-main__wrapper">
                    <div class="d-flex align-items-center user-member__title justify-content-center me-sm-25">
                        <h4 class="text-capitalize fw-500 breadcrumb-title">{{ trans('menu.user-table') }}</h4>
                        <span class="sub-title ms-sm-25 ps-sm-25">Home</span>
                    </div>

                    <form action="/" class="d-flex align-items-center user-member__form my-sm-0 my-2">
                        <img src="{{ asset('assets/img/svg/search.svg') }}" alt="search" class="svg">
                        <input class="form-control me-sm-2 border-0 box-shadow-none" type="search" placeholder="Search by Name" aria-label="Search">
                    </form>

                </div>
                <div class="action-btn">
                    <a href="#" class="btn px-15 btn-primary" data-bs-toggle="modal" data-bs-target="#new-project-modal">
                        <i class="las la-plus fs-16"></i>Add Profile</a>

                        <!-- Modal -->
                        <div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content radius-xl">
                                    <div class="modal-header">
                                        <h6 class="modal-title fw-500" id="projectModalLabel">Create Project</h6>
                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                            <img src="{{ asset('assets/img/svg/x.svg') }}" alt="x" class="svg">
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="project-modal">
                                            <form id="project-form" enctype="multipart/form-data">
                                                @csrf
                                                <!-- Name Field -->
                                                <div class="form-group mb-20">
                                                    <label for="project-name">Project Name</label>
                                                    <input type="text" class="form-control" id="project-name" name="name" placeholder="Enter project name" required>
                                                </div>

                                                <!-- Geo Location Field -->
                                                <div class="form-group mb-20">
                                                    <label for="geo-location">Geo Location</label>
                                                    <input type="text" class="form-control" id="geo-location" name="geo_location" placeholder="Enter geo location">
                                                </div>

                                                <!-- File Upload Field -->
                                                <div class="form-group mb-20">
                                                    <label for="project-logo">Upload Logo</label>
                                                    <input type="file" class="form-control" id="project-logo" name="logo" accept="image/*" required>
                                                </div>

                                                <!-- Button Group -->
                                                <div class="button-group d-flex pt-25">
                                                    <button type="submit" class="btn btn-primary btn-default btn-squared text-capitalize">Create Profile</button>
                                                    <button type="button" class="btn btn-light btn-default btn-squared fw-400 text-capitalize b-light color-light" data-bs-dismiss="modal">Cancel</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Modal -->

                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="userDatatable global-shadow border-light-0 p-30 bg-white radius-xl w-100 mb-30">
                <div class="table-responsive">
                    <table class="table mb-0 table-borderless">
                        <thead>
                            <tr class="userDatatable-header">
                                <th>
                                    <div class="d-flex align-items-center">
                                        <div class="custom-checkbox  check-all">
                                            <input class="checkbox" type="checkbox" id="check-44">
                                            <label for="check-44">
                                                <span class="checkbox-text userDatatable-title">Account</span>
                                            </label>
                                        </div>
                                    </div>
                                </th>
                                
                                <th>
                                    <span class="userDatatable-title">GEO</span>
                                </th>
                                <th>
                                    <span class="userDatatable-title float-end">action</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($profiles as $profile)
                            <tr>
                                <td>
                                    <div class="d-flex">
                                        <div class="userDatatable__imgWrapper d-flex align-items-center">
                                            <div class="checkbox-group-wrapper">
                                                <div class="checkbox-group d-flex">
                                                    <div class="checkbox-theme-default custom-checkbox checkbox-group__single d-flex">
                                                        <input class="checkbox" type="checkbox" id="check-grp-{{ $profile->id }}">
                                                        <label for="check-grp-{{ $profile->id }}"></label>
                                                    </div>
                                                </div>
                                            </div>
                        
                                            <!-- Display Project Logo -->
                                            <a href="#" class="profile-image rounded-circle d-block m-0 wh-38"
                                            style="background-image:url('{{ asset($profile->logo ? $profile->logo : 'storage/account_profile/default.jpg') }}'); background-size: cover;">
                                        </a>
                                        
                                        
                                        </div>
                        
                                        <div class="userDatatable-content">
                                            {{ $profile->name }}
                                        </div>
                                    </div>
                                </td>
                        
                                <!-- Display Geo Location -->
                                <td>
                                    <div class="userDatatable-content">
                                        {{ $profile->geo ?? 'N/A' }}
                                    </div>
                                </td>
                        
                                <!-- Action Buttons -->
                                <td>
                                    <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                        <li>
                                            
                                            <a href="#"   data-id="{{ $profile->id }}" class="edit edit-profile" data-bs-toggle="modal" data-bs-target="#edit-project-modal">
                                                <i class="uil uil-edit"></i>
                                            </a>

                                        </li>
                                        <li>
                                            <a href="#" class="remove delete-project" data-id="{{ $profile->id }}">
                                                <i class="uil uil-trash-alt"></i>
                                            </a>
                                        </li>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        
                    </table>
                </div>
                  {{ $profiles->links('products.pagination') }}
            </div>
             <!-- Edit Project Modal -->
            <div class="modal fade" id="edit-project-modal" tabindex="-1" aria-labelledby="editProjectModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content radius-xl">
                        <div class="modal-header">
                            <h6 class="modal-title fw-500" id="editProjectModalLabel">Edit Project</h6>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <img src="{{ asset('assets/img/svg/x.svg') }}" alt="x" class="svg">
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="edit-project-modal">
                                <form id="update-project-form" enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group mb-20">
                                        <label for="edit-project-name">Project Name</label>
                                        <input type="text"  class="form-control" id="edit-project-name" name="name" placeholder="Enter project name">
                                        <input type="hidden"  class="form-control" id="edit-project-id" name="id" >
                                    </div>
                                    <div class="form-group mb-20">
                                        <label for="edit-geo-location">Geo Location</label>
                                        <input type="text" class="form-control" id="edit-geo-location" name="geo_location" placeholder="Enter geo location">
                                    </div>
                                    <div class="form-group mb-20">
                                        <label for="edit-project-logo">Upload Logo</label>
                                        <input type="file" class="form-control" id="edit-project-logo" name="logo" accept="image/*">
                                    </div>
                                    <div class="button-group d-flex pt-25">
                                        <button type="submit" class="btn btn-primary btn-default btn-squared text-capitalize">Save Changes</button>
                                        <button type="button" class="btn btn-light btn-default btn-squared fw-400 text-capitalize b-light color-light" data-bs-dismiss="modal">Cancel</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Edit Project Modal -->

        </div>
    </div>
</div>
<!-- Include jQuery (Add this before your script) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // ✅ Ensure jQuery is Loaded Before Running the Script
        if (typeof jQuery === "undefined") {
            console.error("jQuery is not loaded! Make sure it is included before this script.");
            return;
        }

        // ✅ Set CSRF Token for All AJAX Requests
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            }
        });

        // ✅ Submit Form with AJAX (Save Profile)
        $('#project-form').on('submit', function(e) {
            e.preventDefault(); // Prevent default form submission

            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('product.profilesave') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    Swal.fire({
                        title: 'Saving...',
                        text: 'Please wait while we save your profile.',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(response) {
                    // Close the modal
                    $('#new-project-modal').modal('hide');

                    // Show success alert
                    Swal.fire({
                        icon: 'success',
                        title: 'Profile Created!',
                        text: 'Your profile has been successfully saved.',
                        timer: 3000, // Auto-close after 3 seconds
                        showConfirmButton: false
                    });

                    // Reset form fields
                    $('#project-form')[0].reset();

                    // Optionally reload the page or fetch new data
                    location.reload();
                },
                error: function(xhr) {
                    let errorMessage = "Something went wrong. Please try again.";

                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        errorMessage = Object.values(xhr.responseJSON.errors).join("\n");
                    }

                    Swal.fire({
                        icon: "error",
                        title: "Error!",
                        text: errorMessage,
                        confirmButtonColor: "#d33",
                        confirmButtonText: "OK"
                    });
                }
            });
        });

 
        $(document).on('click', '.delete-project', function(e) {  
        e.preventDefault(); // Prevent default action

        let profileId = $(this).data('id'); // Get profile ID
        let row = $('#row-' + profileId); // Reference the table row

        Swal.fire({
            title: "Are you sure?",
            text: "This profile will be permanently deleted!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                console.log("Sending AJAX request to delete profile..."); 

                $.ajax({
                    url: "{{ route('product.profiledelete') }}",  // Laravel route
                    type: "POST",  // ✅ Change DELETE to POST
                    data: {
                        id: profileId, 
                        _method: "DELETE" // ✅ Simulate DELETE request
                    },
                    success: function(response) {
                        console.log("AJAX success response:", response);

                        Swal.fire({
                            icon: "success",
                            title: "Deleted!",
                            text: "The profile has been successfully deleted.",
                            timer: 3000,
                            showConfirmButton: false
                        });

                        // Remove row from table smoothly
                        row.fadeOut(500, function() {
                            $(this).remove();
                        });
                    },
                    error: function(xhr) {
                        console.error("AJAX error response:", xhr); 

                        let errorMessage = "Something went wrong. Please try again.";
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: "error",
                            title: "Error!",
                            text: errorMessage
                        });
                    }
                });
            }
        });
    }); 
    
    
    // For edit 
      $(document).on('click', '.edit-profile', function(e) {  
        e.preventDefault(); 

        let profileId = $(this).data('id'); 
        let row = $('#row-' + profileId); 
        let route =`{{ route('product.profile_edit', ':id') }}`.replace(':id', profileId);
        $.ajax({
                    url: route, 
                    type: "GET", 
                    data: {
                        id: profileId
                    },
                    success: function(response) {
                        setFormValues(response);
  
                    },
                    error: function(xhr) {
                        console.error("AJAX error response:", xhr); 

                        let errorMessage = "Something went wrong. Please try again.";
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        Swal.fire({
                            icon: "error",
                            title: "Error!",
                            text: errorMessage
                        });
                    }
                });
    });

    // update
     $('#update-project-form').on('submit', function (e) {
        e.preventDefault(); 

        let formData = new FormData(this);
        let profileId = $('#edit-project-id').val(); 
        console.log(profileId);
        $.ajax({
            url: `{{ route('product.profile_update', ':id') }}`.replace(':id', profileId),
            type: "POST",
            data: formData,
            processData: false, 
            contentType: false, 
            cache: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // ✅ Include CSRF Token
            },
            beforeSend: function () {
                Swal.fire({
                    title: 'Saving...',
                    text: 'Please wait while we update your profile.',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            },
            success: function (response) {
                $('#edit-project-modal').modal('hide'); // ✅ Hide Modal

                Swal.fire({
                    icon: 'success',
                    title: 'Profile Updated!',
                    text: 'Your profile has been successfully updated.',
                    timer: 3000, 
                    showConfirmButton: false
                });

                $('#update-project-form')[0].reset(); // ✅ Reset Form Fields
                location.reload(); // ✅ Refresh Page
            },
            error: function (xhr) {
                let errorMessage = "Something went wrong. Please try again.";

                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join("\n");
                }

                Swal.fire({
                    icon: "error",
                    title: "Error!",
                    text: errorMessage,
                    confirmButtonColor: "#d33",
                    confirmButtonText: "OK"
                });
            }
        });
    });

    // Set value
    function setFormValues(data) {
    // Example: Setting input values
    $("#edit-project-id").val(data.id);
    $("#edit-project-name").val(data.name);
    $("#edit-geo-location").val(data.geo);

    // Show modal after setting values (if using Bootstrap modal)
    $("#edot-project-modal").modal("show");
}
});


</script>
@endsection