@extends('admin.layout.app')

@section('title', 'Assets')

@section('header')
    <div class="page-header-content d-lg-flex">
        <div class="d-flex">
            <h4 class="page-title mb-0">
                Home - <span class="fw-normal">Asset Management</span>
            </h4>
        </div>
        @can('assets-create')
            <div class="d-lg-block my-lg-auto ms-lg-auto">
                <div class="d-sm-flex align-items-center mb-3 mb-lg-0 ms-lg-3 gap-2">
                    {{-- <form action="{{ route('assets.sync') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn btn-outline-primary btn-labeled btn-labeled-start rounded-pill">
                            <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                                <i class="ph-plus"></i>
                            </span>
                            Sync
                        </button>
                    </form> --}}
                    <button id="syncBtn" class="btn btn-outline-primary btn-labeled btn-labeled-start rounded-pill">
                        <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                            <i class="ph-plus"></i>
                        </span>
                        Sync
                    </button>
                    {{-- <a href="{{ route('assets.create') }}"
                        class="btn btn-outline-primary btn-labeled btn-labeled-start rounded-pill">
                        <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                            <i class="ph-plus"></i>
                        </span>
                        Create
                    </a> --}}
                </div>
            </div>
        @endcan
    </div>
@endsection

@section('content')
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Assets</h5>
            </div>
            <div class="table-responsive mb-2">
                <table class="table datatable-basic">
                    <thead class="thead">
                        <tr>
                            <th>No</th>
                            <th>Synced At</th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Subcategory</th>
                            <th>City</th>
                            <th>Site</th>
                            <th>Floor</th>
                            <th>Block</th>
                            <th>Department</th>
                            <th>Location</th>
                            <th>Asset Tcp</th>
                            <th>Asset RFID</th>
                            {{-- <th>Is Active</th> --}}

                            {{-- <th class="text-center">Actions</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($assets as $key => $asset)
                            <tr>
                                <td>{{ ++$key }}</td>
                                <td>{{ Carbon\Carbon::parse($asset->last_synced_at)->format('d-F-Y h:i:s a') }}</td>
                                <td>{{ $asset->code }}</td>
                                <td>{{ $asset->name }}</td>
                                <td>{{ $asset->description }}</td>
                                <td>{{ $asset->category?->name }}</td>
                                <td>{{ $asset->subcategory?->name }}</td>
                                <td>{{ $asset->city?->name }}</td>
                                <td>{{ $asset->site?->name }}</td>
                                <td>{{ $asset->floor?->name }}</td>
                                <td>{{ $asset->block?->name }}</td>
                                <td>{{ $asset->department?->name }}</td>
                                <td>{{ $asset->location?->name }}</td>
                                <td>{{ $asset->asset_tcp }}</td>
                                <td>{{ $asset->asset_rfid }}</td>
                                {{-- <td>{{ $asset->is_active }}</td> --}}

                                {{-- <td class="text-center">@include('admin.asset.actions')</td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{ $assets->appends(request()->query())->links('vendor.pagination.bordered-rounded') }}
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function() {
            const swalInit = swal.mixin({
                buttonsStyling: false,
                customClass: {
                    confirmButton: 'btn btn-primary',
                    cancelButton: 'btn btn-light'
                }
            });
            $(".sa-confirm").click(function(event) {
                event.preventDefault();
                swalInit.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel!',
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-danger'
                    }
                }).then((result) => {
                    if (result.isConfirmed) $(this).closest("form").submit();
                });
            });
            $('#syncBtn').click(function () {
                const $btn = $(this);
                $btn.prop('disabled', true).html(`
                    <span class="spinner-border spinner-border-sm text-white me-1"></span> Syncing...
                `);

                $.ajax({
                    url: "{{ route('assets.sync') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}"
                    },
                    success: function (res) {
                        swalInit.fire({
                            title: 'Success!',
                            text: 'Assets synced successfully!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        });
                    },
                    error: function (xhr) {
                        let msg = xhr.responseJSON?.message || 'Something went wrong!';
                        swalInit.fire({
                            title: 'Error!',
                            text: msg,
                            icon: 'error',
                            confirmButtonText: 'Close'
                        });
                    },
                    complete: function () {
                        $btn.prop('disabled', false).html(`
                            <span class="btn-labeled-icon bg-primary text-white rounded-pill">
                                <i class="ph-plus"></i>
                            </span> Sync
                        `);
                    }
                });
            });
        });
    </script>
@endsection