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

@section('body')

    @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 Finish Assets')</h2>
                    <button type="button" class="btn btn-danger ml-2" id="filterButton">
                        @lang('button.Filter')
                    </button>
                </div>


                <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 class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped" id="dataTable">
                            <thead>
                                <tr>
                                    <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.Tag Number')</th>
                                    <th>@lang('asset.Building Number')</th>
                                    <th>@lang('asset.Room/Office Number')</th>
                                    <th>@lang('asset.Asset Assign')</th>
                                    <th>@lang('asset.Flag Status')</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>



    <script type="text/javascript">
        $(function() {
            var table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                searching: false,
                // ajax: "{{ route('get.finish_assets') }}",
                ajax: {
                    url: "{{ route('get.finish_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();
                    }
                },
                columns: [{
                        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: 'tag_number',
                        name: 'tag_number'
                    },
                    {
                        data: 'building_number',
                        name: 'building_number'
                    },
                    {
                        data: 'room_office_number',
                        name: 'room_office_number'
                    },
                    {
                        data: 'asset_assign',
                        name: 'asset_assign'
                    },
                    {
                        data: 'flag',
                        name: 'flag'
                    },
                    {
                        data: 'user_status',
                        name: 'user_status'
                    },
                    {
                        data: 'admin_status',
                        name: 'admin_status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#filterAsset').on('click', function() {
                console.log('Filter button clicked');
                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();
                });
            });

            $('#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).ready(function() {
                $('#dataTable tbody').on('click', 'tr img', function() {
                    var data = table.row($(this).closest('tr')).data();
                    if (data) {
                        window.location.href = "{{ route('assets') }}/" + data.id + "/view";
                    }
                });
            });

        });

        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';
                }
            });
        });
    </script>

@endsection