@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('device.device') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="home">{{ trans('device.home') }}</a>
                    </li>
                    <li class="breadcrumb-item active">{{ trans('device.device') }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="device-listing">
        <div class="row">
            @if (isset($status))
                <div class="col-12">
                    @foreach ($status['messages'] as $m)
                        <div class="alert alert-{{ $status['code'] }}" role="alert">
                            <div class="alert-body"><strong>{{ $m }}</strong></div>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom d-flex justify-content-between align-items-center flex-wrap gap-1 py-1">
                        <h4 class="card-title mb-0">{{ trans('device.device_listing') }}</h4>
                        <div class="d-flex align-items-center gap-1">
                            <form method="GET" action="{{ route('device.index', ['alias' => $alias]) }}"
                                class="d-flex align-items-center gap-1 ajax-devices-form loder-disabled">
                                @if ($deviceUse)
                                    <input type="hidden" name="device_use" value="{{ $deviceUse }}">
                                @endif
                                @if ($deviceName)
                                    <input type="hidden" name="device" value="{{ $deviceName }}">
                                @endif
                                @if ($perPage != 10)
                                    <input type="hidden" name="per_page" value="{{ $perPage }}">
                                @endif
                                <input type="text" name="search" value="{{ $search }}"
                                    class="form-control form-control-sm" style="min-width: 200px;"
                                    placeholder="Search by name or serial number">
                                <button type="submit" class="btn btn-sm btn-primary">
                                    <i data-feather="search" class="font-small-4"></i>
                                </button>
                                @if ($search !== '')
                                    <a href="{{ route('device.index', ['alias' => $alias] + ($deviceUse ? ['device_use' => $deviceUse] : []) + ($deviceName ? ['device' => $deviceName] : [])) }}"
                                        class="btn btn-sm btn-outline-secondary ajax-devices-link">Reset</a>
                                @endif
                            </form>
                            <a href="{{ route('device.export', ['alias' => $alias] + $request->only(['search', 'device_use', 'device'])) }}"
                                class="btn btn-sm btn-outline-secondary">
                                <i data-feather="download" class="font-small-4 me-25"></i>Excel
                            </a>
                            @if (Auth::user()->can_role('Device Installed Add'))
                                <a href="/{{ $alias }}/device/create" class="btn btn-sm btn-primary">
                                    <i data-feather="plus" class="font-small-4 me-25"></i>{{ trans('device.add_new_devices') }}
                                </a>
                            @endif
                        </div>
                    </div>

                    <div id="devices-table-container">
                        <div class="text-center text-muted py-5">
                            <div class="spinner-border spinner-border-sm me-1" role="status"></div>
                            Loading devices&hellip;
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script>
        $(window).on('load', function() {
            if (window.feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });

        $(function() {
            var $tableContainer = $('#devices-table-container');
            var loadingHtml = '<div class="text-center text-muted py-5">' +
                '<div class="spinner-border spinner-border-sm me-1" role="status"></div>' +
                'Loading devices&hellip;</div>';

            function loadDevices(url, pushState) {
                $tableContainer.html(loadingHtml);
                $.ajax({
                        url: url,
                        global: false
                    })
                    .done(function(html) {
                        $tableContainer.html(html);
                        if (pushState !== false) {
                            window.history.pushState({}, '', url);
                        }
                        if (window.feather) {
                            feather.replace({
                                width: 14,
                                height: 14
                            });
                        }
                    })
                    .fail(function() {
                        $tableContainer.html('<div class="text-center text-danger py-5">Failed to load devices. Please try again.</div>');
                    });
            }

            $(document).on('submit', '.ajax-devices-form', function(e) {
                e.preventDefault();
                loadDevices($(this).attr('action') + '?' + $(this).serialize());
            });

            $(document).on('click', '.ajax-devices-link', function(e) {
                e.preventDefault();
                loadDevices($(this).attr('href'));
            });

            $tableContainer.on('click', '.pagination a.page-link', function(e) {
                e.preventDefault();
                loadDevices($(this).attr('href'));
            });

            $(window).on('popstate', function() {
                loadDevices(window.location.href, false);
            });

            loadDevices(window.location.href, false);

            $('body').on('click', '#sync-pending-data', function(e) {
                e.preventDefault();

                let url = $(this).attr('href');

                Swal.fire({
                    title: "Are you Sure ?..",
                    text: "Please make sure all data has been synced from device",
                    icon: "warning",
                    showCancelButton: true,
                }).then(function(isConfirm) {
                    if (isConfirm['isConfirmed']) {
                        $.ajax({
                            url,
                            type: 'POST',
                            data: {
                                '_token': '{{ csrf_token() }}',
                            },
                            success: function(response) {
                                Swal.fire({
                                    title: "Success",
                                    text: response.message,
                                    icon: "success",
                                    confirmButtonColor: "#00c292",
                                    confirmButtonText: "Ok",
                                    closeOnConfirm: true
                                }).then(function() {
                                    loadDevices(window.location.href, false);
                                });
                            }
                        });
                    }
                });
            });

            $('body').on('click', '.sa-params', function() {
                var id = $(this).data('user-id');
                Swal.fire({
                    title: "@lang('messages.sweetAlertTitle')",
                    text: "@lang('messages.confirmation.recoverDeleteUser')",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "@lang('messages.deleteConfirmation')",
                    cancelButtonText: "@lang('messages.confirmNoArchive')",
                    closeOnConfirm: true,
                    closeOnCancel: true
                }).then(function(isConfirm) {
                    if (isConfirm['isConfirmed']) {
                        var url = "{!! route('device.delete', ['alias' => $alias, 'device' => 'managerId']) !!}";
                        url = url.replace('managerId', id);

                        var token = "{{ csrf_token() }}";

                        $.ajax({
                            type: 'DELETE',
                            url: url,
                            data: {
                                '_token': token,
                                '_method': 'DELETE'
                            },
                            success: function(response) {
                                if (response.code == "success") {
                                    Swal.fire({
                                        title: "Success",
                                        text: response.messages[0],
                                        icon: "success",
                                        confirmButtonColor: "#00c292",
                                        confirmButtonText: "Ok",
                                        closeOnConfirm: true
                                    }).then(function() {
                                        loadDevices(window.location.href, false);
                                    });
                                } else {
                                    Swal.fire({
                                        title: "Error!",
                                        text: response.messages[0],
                                        icon: "warning",
                                        confirmButtonColor: "#DD6B55",
                                        confirmButtonText: "Ok",
                                        closeOnConfirm: true
                                    });
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush