@extends('admin.layout.master')
@section('title', 'Manage Assets')
@section('section', __('asset.Manage Assets'))

@section('body')

    <style>
        .filter-form {
            display: none;
            border: 1px solid #ccc;
            padding: 20px;
            margin-top: 20px;
        }
    </style>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row" id="st-row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h2 class="m-0 font-weight-bold text-danger">@lang('asset.All Assets')</h2>
                    @can('create-asset')
                        <button type="button" class="btn btn-danger ml-2" data-bs-toggle="modal" data-bs-target="#AddAsset">
                            @lang('button.Add Asset')
                        </button>
                    @endcan
                    @canany(['edit-asset', 'export-asset', 'delete-asset', 'import-asset', 'assign-asset'])
                        <div class="p-2">
                            <button type="button" id="editBtn" class="btn btn-primary btn-sm d-none">
                                Edit Selected
                                <div class="dropdown">
                                    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="editDropdown"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        @lang('button.Actions')
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="editDropdown">
                                        @can('edit-asset')
                                            <a class="dropdown-item text-info" href="#" id="editAction">@lang('button.Edit')</a>
                                        @endcan
                                        @can('delete-asset')
                                            <a class="dropdown-item text-danger" href="#"
                                                id="deleteAction">@lang('button.Delete')</a>
                                        @endcan
                                        @can('export-asset')
                                            <a class="dropdown-item text-primary" href="#"
                                                id="exportAction">@lang('button.Export')</a>
                                        @endcan

                                        @can('import-asset')
                                            <a href="#" data-bs-toggle="modal" data-bs-target="#emportAsset"
                                                class="dropdown-item has-icon text-primary"> @lang('button.Import')
                                            </a>
                                        @endcan
                                        @can('assign-asset')
                                            <a class="dropdown-item" href="{{ route('tasks.asset') }}">@lang('button.Distribution of tasks')
                                            </a>
                                        @endcan
                                        @can('download-asset-images')
                                            <a class="dropdown-item" href="{{ route('download.all_image') }}">@lang('button.Download All Images')
                                            </a>
                                        @endcan
                                    </div>
                                </div>
                            </button>
                            <button type="button" class="btn btn-danger ml-2" id="filterButton">
                                @lang('button.Filter')
                            </button>
                        </div>
                    @endcanany

                    <div id="filterForm" class="filter-form">
                        <form>
                            <div class="row">
                                <div class="col mb-2">
                                    <label for="description">@lang('asset.Description'):</label>
                                    <select id="description" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($descriptions as $description)
                                            <option value="{{ $description }}">{{ $description }}</option>
                                        @endforeach
                                    </select>
                                </div>


                                <div class="col-md-6 col-12l mb-2">
                                    <label for="country">@lang('asset.Country'):</label>
                                    <select id="countryData" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->name }}">{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-6 mb-2">
                                    <label for="region">@lang('asset.Region'):</label>
                                    <select id="regionData" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($regions as $region)
                                            <option value="{{ $region->name }}">{{ $region->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-6 mb-2">
                                    <label for="city">@lang('asset.City'):</label>
                                    <select id="cityData" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($cities as $city)
                                            <option value="{{ $city->name }}">{{ $city->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-6 mb-2">
                                    <label for="level_3">@lang('asset.Level 3'):</label>
                                    <select id="level_3" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($level3s as $level3)
                                            <option value="{{ $level3->name }}">{{ $level3->name_ar }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-6 mb-2">
                                    <label for="building_number">@lang('asset.Building Number'):</label>
                                    <select id="building_number" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($buildings as $building)
                                            <option value="{{ $building }}">{{ $building }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-6 mb-2">
                                    <label for="floor_number">@lang('asset.Floor Number'):</label>
                                    <select id="floor_number" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($floors as $floor)
                                            <option value="{{ $floor }}">{{ $floor }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-6">
                                    <label for="room_office_number">@lang('asset.Room Number'):</label>
                                    <select id="room_office_number" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($rooms as $room)
                                            <option value="{{ $room }}">{{ $room }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="row">

                                <div class="col-6 mb-2">
                                    <label for="asset_assign">@lang('asset.Asset Assign ( Data Entry )'):</label>
                                    <select id="asset_assign" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($data_entry_users as $user)
                                            <option value="{{ $user->username }}">{{ $user->username }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-6">
                                    <label for="asset_owner">@lang('asset.Asset Owner ( Field User )'):</label>
                                    <select id="asset_owner" class="form-control select2 col-6">
                                        <option value="" selected>Choose..</option>
                                        @foreach ($field_users as $user)
                                            <option value="{{ $user->username }}">{{ $user->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>



                            <div class="row">

                                <div class="col-12">
                                    <label for="asset_type">@lang('asset.Asset Type'):</label>
                                    <select id="type" class="form-control" class="asset_type">
                                        <option value="" selected>Choose..</option>
                                        <option value="furniture">Furniture</option>
                                        <option value="plantAndMachinery">Plant & Machinery</option>
                                    </select>
                                </div>

                                <div class="col-12 my-2">
                                    <label for="asset_type">@lang('asset.Multi Tags')</label>
                                    <input class="form-control" type="text" name="filterInput" data-role="tagsinput"
                                        id="multi_tags">
                                </div>

                            </div>
                            <input type="button" id="filterAsset" class="btn btn-danger mt-2"
                                value="@lang('button.Filter')">
                            <input type="button" id="resetAsset" class="btn btn-primary mt-2"
                                value="@lang('button.Reset')">
                        </form>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="dataTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" name="select_main_checkbox" id="checkall"><label></label>
                                    </th>
                                    <th>@lang('asset.Image')</th>
                                    <th>@lang('asset.Asset Type')</th>
                                    <th>@lang('asset.Country')</th>
                                    <th>@lang('asset.Region')</th>
                                    <th>@lang('asset.City')</th>
                                    <th>@lang('asset.Level 3')</th>
                                    <th>@lang('asset.Description')</th>
                                    <th>@lang('asset.Tag Number')</th>
                                    <th>@lang('asset.Building Number')</th>
                                    <th>@lang('asset.Floor Number')</th>
                                    <th>@lang('asset.Room/Office Number')</th>
                                    <th>@lang('asset.Asset Assign')</th>
                                    <th>@lang('asset.User Status')</th>
                                    <th>@lang('asset.Admin Status')</th>
                                    <th>@lang('button.Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- DataTable body will be populated here -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="AddAsset" tabindex="-1" role="dialog" aria-labelledby="AddAssetTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">@lang('asset.Please Select Asset Type')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <a href="{{ route('create.asset', ['type' => 'furniture']) }}"><button type="button"
                            class="btn btn-danger">@lang('asset.Furniture')</button></a>
                    <a href="{{ route('create.asset', ['type' => 'plantAndMachinery']) }}"><button type="button"
                            class="btn btn-danger">@lang('asset.Plant & Machinery')</button></a>
                </div>
            </div>
        </div>
    </div>


    <!-- Import Assets Modal-->
    <div class="modal fade" id="emportAsset" 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">@lang('button.Import Xlsx')</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('importAssets') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <label for="xlsxFile">@lang('button.Only .xlsx file allowed:')</label><br>
                        <input class="form-control" type="file" id="xlsxFile" name="file" accept=".xlsx"><br>
                        <button class="btn btn-danger" type="submit">@lang('button.Create')</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for image preview -->
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel"
        aria-hidden="true" data-base-url="{{ asset('storage') }}">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imagePreviewModalLabel">Images </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 id="imageGallery" class="gallery gallery-md">
                        <!-- Gallery items will be dynamically added here -->
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="exportFieldsModal" tabindex="-1" role="dialog"
        aria-labelledby="exportFieldsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportFieldsModalLabel">@lang('asset.Select Fields to Export')</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="exportFieldsForm">
                        <!-- List of checkboxes for each field -->
                        @foreach ($columns as $column)
                            <div class="form-check">
                                <input class="form-check-input {{ $column }}" type="checkbox"
                                    value="{{ $column }}" {{ $column === 'asset_type' ? 'disabled' : '' }} checked>
                                <label class="form-check-label" for="defaultCheck1">
                                    {{ $column }}
                                </label>
                            </div>
                        @endforeach
                        <!-- Add checkboxes for other fields here -->
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('button.Cancel')</button>
                    <button type="button" class="btn btn-primary" id="confirmExportBtn">@lang('button.Export')</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            var table = $('#dataTable').DataTable({
                stateSave: true,
                searching: false,
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('get.assets') }}",
                    data: function(d) {
                        d.asset_type = $('#type').val();
                        d.search = $('input[type="search"]').val();
                        // Add additional fields for searching
                        d.description = $('#description').val();
                        d.country = $('#countryData').val();
                        d.region = $('#regionData').val();
                        d.city = $('#cityData').val();
                        d.barcode_number = $('#barcode_number').val();
                        d.level_3 = $('#level_3').val();
                        d.building_number = $('#building_number').val();
                        d.floor_number = $('#floor_number').val();
                        d.room_office_number = $('#room_office_number').val();
                        d.multi_tags = $('#multi_tags').val();
                        d.asset_assign = $('#asset_assign').val();
                        d.asset_owner = $('#asset_owner').val();
                    }
                },
                lengthMenu: [10, 20, 50, 100, 500, 1000, 5000, 10000, 20000, 50000],
                columns: [{
                        data: 'checkbox',
                        name: 'checkbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'image',
                        name: 'image',
                        render: function(data, type, full, meta) {
                            return '<img src="' + data +
                                '" alt="Image" class="img-thumbnail" width="40" height="40">';
                        }
                    },
                    {
                        data: 'asset_type',
                        name: 'asset_type'
                    },
                    {
                        data: 'country',
                        name: 'country'
                    },
                    {
                        data: 'region',
                        name: 'region'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },
                    {
                        data: 'level3',
                        name: 'level3',
                    },
                    {
                        data: 'asset_description',
                        name: 'asset_description',
                        render: function(data, type, row) {
                            // Check if the data length is greater than 15 characters
                            if (data.length > 15) {
                                // If yes, return the first 15 characters followed by "..."
                                return data.substr(0, 15) + '...';
                            } else {
                                // If not, return the full data
                                return data;
                            }
                        }
                    },
                    {
                        data: 'tag_number',
                        name: 'tag_number'
                    },
                    {
                        data: 'building_number',
                        name: 'building_number'
                    },
                    {
                        data: 'floor_number',
                        name: 'floor_number'
                    },
                    {
                        data: 'room_office_number',
                        name: 'room_office_number'
                    },
                    {
                        data: 'asset_assign',
                        name: 'asset_assign'
                    },
                    {
                        data: 'user_status',
                        name: 'user_status'
                    },
                    {
                        data: 'admin_status',
                        name: 'admin_status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#filterAsset').on('click', function() {
                var assetType = $('#type').val();

                table.columns('asset_type').search(assetType).draw();
                // Add additional searches for each input field
                table.columns('asset_description').search($('#description').val()).draw();
                table.columns('country').search($('#country').val()).draw();
                table.columns('region').search($('#region').val()).draw();
                table.columns('city').search($('#city').val()).draw();
                table.columns('barcode_number').search($('#barcode_number').val()).draw();
                table.columns('level_3').search($('#level_3').val()).draw();
                table.columns('building_number').search($('#building_number').val()).draw();
                table.columns('floor_number').search($('#floor_number').val()).draw();
                table.columns('room_office_number').search($('#room_office_number').val()).draw();
                table.columns('multi_tags').search($('#multi_tags').val()).draw();

                // Hide the #filterForm element
                $('#filterForm').hide();
            });

            $(function() {
                // Function to handle reset button click
                $('#resetAsset').on('click', function() {
                    // Reset all input fields
                    $('input[type="text"]').val('');
                    $('select').val('');

                    // Clear DataTable search and redraw
                    table.search('').columns().search('').draw();

                    // Hide the #filterForm element
                    $('#filterForm').hide();
                });
            });

            $(document).on('click', 'img.img-thumbnail', function() {
                var rowData = table.row($(this).closest('tr')).data(); // Get the data of the clicked row
                var allImages = rowData.allImage; // Directly access the array of image URLs

                $('#imageGallery').empty(); // Clear previous gallery items

                // Base URL
                var baseUrl = $('#imagePreviewModal').data('base-url');

                if (allImages.length > 0) {
                    // Loop through each image URL and create HTML elements for them
                    allImages.forEach(function(imageUrl) {
                        // Prepend base URL to image URL
                        var fullImageUrl = baseUrl + '/' + imageUrl;

                        var galleryItem = $(
                            '<div class="gallery-item" style="width: 150px !important; height: 150px !important;"></div>'
                        ); // Create a gallery item
                        galleryItem.attr('data-image', fullImageUrl); // Set data-image attribute
                        galleryItem.attr('data-title', 'Image'); // Set data-title attribute
                        galleryItem.attr('href', fullImageUrl); // Set href attribute
                        galleryItem.attr('title', 'Image'); // Set title attribute
                        galleryItem.css('background-image', 'url(' + fullImageUrl +
                            ')'); // Set background image style
                        $('#imageGallery').append(
                            galleryItem); // Append gallery item to the gallery
                    });
                } else {
                    // If no images are present, display a message
                    $('#imageGallery').html('<p style="color: red;">No images available</p>');
                }

                $('#imagePreviewModal').modal('show'); // Show the modal
            });


            $('#checkall').change(function() {
                if ($(this).prop('checked')) {
                    $('#deleteAllBtn').attr('class', 'btn btn-primary btn-sm deleteAllBtn');
                    // $('#deleteAllBtn').attr('data-bs-toggle', 'modal');
                    // $('#deleteAllBtn').attr('data-bs-target', '#deletePop2');
                    $('.sub_checkboxes').map(function() {
                        $(this).is(':disabled') ? '' : $(this).prop('checked', true);
                    });
                } else {
                    $('.sub_checkboxes').prop('checked', false);

                    $('#deleteAllBtn').attr('class', 'btn btn-primary btn-sm d-none');
                    // $('#deleteAllBtn').attr('data-bs-toggle', 'modal');
                    // $('#deleteAllBtn').attr('data-bs-target', '#deletePop2');
                }
            }); //this is for check all the checkboxes function #checkall


            $("#dataTable").on('click', '.sub_checkboxes', function() {


                $('#deleteAllBtn').attr('class', 'btn btn-primary btn-sm');
                // $('#deleteAllBtn').attr('data-bs-toggle', 'modal');
                // $('#deleteAllBtn').attr('data-bs-target', '#deletePop2');
            });

            $('#editAction').click(function() {
                // Get the number of selected checkboxes
                var selectedCount = $(".sub_checkboxes:checked").length;

                // Check if at least one checkbox is selected
                if (selectedCount > 0) {
                    // Get the IDs of selected checkboxes
                    var selectedIds = $(".sub_checkboxes:checked").map(function() {
                        return $(this).val();
                    }).get();

                    if (confirm('Are You Sure')) {
                        // Send an AJAX request to the edit route
                        var url = "{{ route('asset.edit_all') }}?ids=" + selectedIds.join(',');
                        window.location.href = url;
                    }
                } else {
                    alert('Please select at least one asset to edit.');
                }
            });


            $('#deleteAction').click(function() {
                // Get the number of selected checkboxes
                var selectedCount = $(".sub_checkboxes:checked").length;

                // Check if at least one checkbox is selected
                if (selectedCount > 0) {
                    var id = $(".sub_checkboxes:checked").map(function() {
                        return $(this).val();
                    }).get();

                    if (confirm('Are You Sure')) {
                        $.ajax({
                            url: "{{ route('asset.delete_all') }}",
                            headers: {
                                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
                            },
                            type: "GET",
                            data: {
                                id: id,
                            },
                            contentType: false,
                            processData: true,
                            success: function(response) {
                                if (response.code == 500) {
                                    confirm('Internal Server Error Or Selected one Checkbox');
                                } else {
                                    table.ajax.reload();
                                    // Additional logic if needed
                                }
                            }
                        });
                    }
                } else {
                    alert('Please select at least one asset to delete.');
                }
            });

            $('#exportAction').click(function() {
                // Get the number of selected checkboxes
                var selectedCount = $(".sub_checkboxes:checked").length;

                // Check if at least one checkbox is selected
                if (selectedCount > 0) {
                    $('#exportFieldsModal').modal('show');

                } else {
                    alert('Please select at least one asset to export.');
                }
            });

            $('#confirmExportBtn').click(function() {
                // Get the number of selected checkboxes
                var selectedCount = $(".sub_checkboxes:checked").length;

                // Check if at least one checkbox is selected
                if (selectedCount > 0) {
                    // Get the IDs of selected checkboxes
                    var selectedIds = $(".sub_checkboxes:checked").map(function() {
                        return $(this).val();
                    }).get();

                    console.log(selectedIds); // Verify that you have the correct IDs

                    var selectedFields = $('#exportFieldsForm input:checked').map(function() {
                        return $(this).val();
                    }).get();

                    console.log(selectedFields);

                    // Construct the export URL with selected fields and IDs
                    var url = "{{ route('bulk_export.asset') }}?ids=" + selectedIds.join(',') +
                        "&fields=" +
                        selectedFields.join(',');

                    // Perform the export
                    window.location.href = url;
                } else {
                    alert('Please select at least one asset to export.');
                }
            });

        });

        document.addEventListener('DOMContentLoaded', function() {
            var filterButton = document.getElementById('filterButton');
            var filterForm = document.getElementById('filterForm');

            filterButton.addEventListener('click', function() {
                if (filterForm.style.display === 'none' || filterForm.style.display === '') {
                    filterForm.style.display = 'block';
                } else {
                    filterForm.style.display = 'none';
                }
            });
        });

        $(document).ready(function() {
            // Manually initialize select2 when a collapse element becomes visible
            $('.collapse').on('shown.bs.collapse', function() {
                $(this).find('.select2').select2();
            });
        });
    </script>

@endsection