@extends('layouts.app')
@section('content')
    @php
        use App\Helpers\RouteHelper;
    @endphp

    @include(RouteHelper::getSidebarView())


    <main id="" class="side_user">
        <!-- Hero -->
        <div class="bg-body-light ">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill h3 my-2">
                        Customers<small
                            class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted"></small>
                    </h1>

                </div>
            </div>
        </div>
        <!-- END Hero -->


        <div class="content">

            <div class="block block-rounded">
                <div class="block-content ">
                    <div class="d-flex justify-content-end px-4">
                        @can('add-customers')
                            <a class="addbtn" id="addBtn" href="{{ route('customers.create') }}">Add</a>
                        @endcan
                        <div class="loader" id="loader" style="display: none;">
                            <div class="external-shadow">
                                <div class="central">
                                    <div class="intern"></div>
                                </div>
                            </div>
                        </div>
                        {{-- <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#addmodal">Add</button> --}}
                    </div>
                </div>


                <div class="block-content block-content-full mt-5">
                    <!-- DataTables init on table by adding .js-dataTable-full class, functionality is initialized in js/pages/be_tables_datatables.min.js which was auto compiled from _js/pages/be_tables_datatables.js -->

                    <div class="row">
                        <div class="col-sm-12">

                            <div class="table-responsive my-3">
                                {{ $dataTable->table() }}
                            </div>

                            {{-- <table class="table js-dataTable-full dataTable no-footer" id="DataTables_Table_0"
                                role="grid" aria-describedby="DataTables_Table_0_info">
                                <thead>
                                    <tr role="row">
                                        <th class="sorting" style="text-align: center;" tabindex="0"
                                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                            aria-label="Name: activate to sort column ascending">S.No</th>

                                        <th class="text-center sorting_asc" style="text-align: center; width: 30%"
                                            tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                            aria-sort="ascending" aria-label="ID: activate to sort column descending">
                                            Customer Name</th>
                                        <th class="sorting" style="text-align: center; width: 30%;" tabindex="0"
                                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                            aria-label="Name: activate to sort column ascending">Country of Origin</th>
                                        <th class="d-none d-sm-table-cell sorting" style="text-align: center; width: 20%;"
                                            tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                            aria-label="Email: activate to sort column ascending">Industry</th>

                                        <th class="d-none d-sm-table-cell sorting" style="text-align: center; width: 20%;"
                                            tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                            aria-label="Email: activate to sort column ascending">Status</th>
                                        <th style="text-align: center; width: 15%;" class="sorting" tabindex="0"
                                            aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                                            aria-label="Registered: activate to sort column ascending">Option</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($customers as $key => $customer)
                                        <tr>
                                            <td class="text-center font-size-sm sorting_1" style="width: 5%;">
                                                {{ $key + 1 }}</td>
                                            <td class="font-w600 font-size-sm" style="width: 15%;">
                                                {{ $customer->name }}
                                            </td>
                                            <td class="font-w600 font-size-sm" style="width: 15%;">
                                                {{ $customer->country_origin }}
                                            </td>
                                            <td class="d-none d-sm-table-cell font-size-sm" style="width: 15%;">
                                                {{ $customer->industry }}
                                            </td>

                                            <td class="d-none d-sm-table-cell" style="width: 15%;">
                                                <label class="switch">
                                                    <input type="checkbox" class="status-toggle"
                                                        data-id="{{ $customer->id }}"
                                                        @if ($customer->status == 1) checked @endif>
                                                    <span class="slider round"></span>
                                                </label>
                                            </td>
                                            <td style="width: 10%;">
                                                <div class="btn-group">
                                                    <div class="btn-group">
                                                        <a href="{{ route('customers.show', $customer->id) }}"
                                                            method="GET">
                                                            <button type="submit" class="btn btn btn-sm ">
                                                                <i class="fa fa-fw fa-eye"></i>
                                                            </button>
                                                        </a>
                                                        <a href="{{ route('customers.edit', $customer->id) }}"
                                                            method="GET">
                                                            <button type="submit" class="btn btn btn-sm ">
                                                                <i class="fa fa-fw fa-pencil-alt"></i>
                                                            </button>
                                                        </a>

                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach


                                </tbody>
                            </table> --}}

                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>
@endsection


@section('script')
    {{ $dataTable->scripts() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('addBtn').addEventListener('click', function(event) {
                event
                    .preventDefault(); // Prevent the default behavior of the anchor tag (navigating to a new page)
                var loader = document.getElementById('loader');
                loader.style.display = 'flex'; // Display the loader when the button is clicked

                // Simulate an asynchronous action (e.g., an AJAX request)
                setTimeout(function() {
                    // Once the action is completed (simulated with setTimeout), hide the loader
                    loader.style.display = 'none';

                    // After completing the action, you can choose to navigate to the specified route
                    window.location.href = document.getElementById('addBtn').getAttribute('href');
                }, 2000); // Adjust the time (in milliseconds) as needed
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // alert('hgfdag');
            $(document).on('change', '.status-toggle', function() {

                var customerId = $(this).data('id');
                var status = $(this).is(':checked') ? 1 : 0;
                $.ajax({
                    url: '{{ route('status.change') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: customerId,
                        type: 'customer',
                        status: status
                    },
                    success: function(response) {
                        if (response.data.status == 1) {
                            alert('Status Activated successfully!');
                        } else {
                            alert('Status Deactivated successfully!');
                        }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status.');
                    }
                });
            });

        });
    </script>
@endsection