@extends('layouts.contentNavbarLayout')

@section('content')
<div class="container py-4">
    <h2 class="mb-4">📦 Asset Inventory Management</h2>

    {{-- Actions --}}
    <div class="d-flex gap-2 mb-4">
        <button class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#addBranchModal">+ Add Branch</button>
        <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addCategoryModal">+ Add Category</button>
        <button class="btn btn-outline-info" data-bs-toggle="offcanvas" data-bs-target="#addAssetCanvas">+ Add Asset</button>
    </div>

    @if(session('success'))
    <div class="alert alert-success" id="success-alert">
        {{ session('success') }}
    </div>
@endif

<script>
    // Auto-hide alert after 3 seconds (3000 ms)
    setTimeout(function () {
        let alert = document.getElementById('success-alert');
        if (alert) {
            alert.style.transition = "opacity 0.5s ease";
            alert.style.opacity = 0;
            setTimeout(() => alert.remove(), 500); // remove after fade out
        }
    }, 3000);
</script>

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


     {{-- Categories and Branches Cards --}}
     <div class="row">
        {{-- Assets Table - col-md-8 --}}
        <div class="col-md-8">
            <div class="card">
           
                <div class="card-body p-0">
                    <table class="table table-striped m-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Asset Name</th>
                                <th>Asset Type</th>
                                <th>Brand</th>
                                <th>Serial Number</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($assets as $key => $asset)
                            <tr class="clickable-row" data-asset-id="{{ $asset->id }}">
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $asset->name }}</td>
                                <td>{{ $asset->asset_type }}</td>
                                <td>{{ $asset->brand }}</td>
                                <td>{{ $asset->serial_number }}</td>
                                {{-- <td>
                                    <a href="{{ route('assets.edit', $asset->id) }}">Edit</a>
                                    <form action="{{ route('assets.destroy', $asset->id) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button type="submit" onclick="return confirm('Delete asset?')">Delete</button>
                                    </form>
                                    <button class="view-details-btn">View Details</button>
                                    <a href="{{ route('assets.download', $asset->id) }}" class="btn btn-success">Download</a> 
                                </td> --}}
                                <td class="actions">
                                    <a type="button" data-bs-toggle="offcanvas" data-bs-target="#editAssetCanvas{{ $asset->id }}"><span class="mdi mdi-note-edit-outline"></span></a>
                                    <form action="{{ route('assets.destroy', $asset->id) }}" method="POST" class="d-inline">
                                        @csrf @method('DELETE')
                                        <a type="button"  onclick="return confirm('Delete asset?')"><span class="mdi mdi-delete-empty-outline"></span></a>
                                    </form>
                                    <a type="button" class="view-details-btn"><span class="mdi mdi-eye-outline"></span></a>
                                   
                                </td>
                            </tr>
                            <tr class="asset-details-row" data-asset-id="{{ $asset->id }}" style="display: none;">
                                <td colspan="6">
                                    <table class="table table-sm">

                                        <tr>
                                            <th>Asset Name</th>
                                            <td>{{ $asset->name }}</td>
                                        </tr>
                                <tr>
                                    <th>Type</th>
                                    <td>{{ $asset->asset_type }}</td>
                                </tr>
                                <tr>
                                    <th>Brand</th>
                                    <td>{{ $asset->brand }}</td>
                                </tr>
                                <tr>
                                    <th>Serial Number</th>
                                    <td>{{ $asset->serial_number }}</td>
                                </tr>
                                        <tr>
                                            <th>Tag Number</th>
                                            <td>{{ $asset->tag_number }}</td>
                                        </tr>
                                        <tr>
                                            <th>Assigned To</th>
                                            <td>{{ $asset->employee->name ?? 'Not Assigned' }}</td>
                                        </tr>
                                        <tr>
                                            <th>Status</th>
                                            <td>{{ ucfirst($asset->status) }}</td>
                                        </tr>
                                        <tr>
                                            <th>Purchase Date</th>
                                            <td>{{ $asset->purchase_date }}</td>
                                        </tr>
                                        <tr>
                                            <th>Warranty Expiry</th>
                                            <td>{{ $asset->warranty_expiry_date }}</td>
                                        </tr>
                                        <tr>
                                            <th>Location</th>
                                            <td>{{ $asset->location }}</td>
                                        </tr>
                                        <tr>
                                            <th>Condition</th>
                                            <td>{{ ucfirst($asset->condition) }}</td>
                                        </tr>
                                        <tr>
                                            <th>Price</th>
                                            <td>{{ $asset->price }}</td>
                                        </tr>
                                        <tr>
                                            <td> <a href="{{ route('assets.download', $asset->id) }}" class="btn btn-success">Download</a> <!-- Updated route name --></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            {{-- Edit Asset Offcanvas --}}
                            <div class="offcanvas offcanvas-end" tabindex="-1" id="editAssetCanvas{{ $asset->id }}">
                                <div class="offcanvas-header">
                                    <h5 class="offcanvas-title">Edit Asset</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                                </div>
                                <div class="offcanvas-body">
                                    <form method="POST" action="{{ route('assets.update', $asset->id) }}">
                                        @csrf
                                        @method('PUT')
                                        @include('inventory.partials.asset-form', ['asset' => $asset])
                                        <button class="btn btn-success mt-3">Update</button>
                                    </form>
                                </div>
                            </div>
                            
                            @endforeach
                        </tbody>
                    </table>
                    
                    <!-- Add JavaScript to toggle details -->
                    <script>
                        document.querySelectorAll('.view-details-btn').forEach(button => {
                            button.addEventListener('click', function() {
                                var row = this.closest('tr'); // Get the clicked row
                                var assetId = row.dataset.assetId; // Get asset ID from the row
                    
                                var detailsRow = document.querySelector(`.asset-details-row[data-asset-id="${assetId}"]`);
                    
                                if (detailsRow.style.display === 'none' || detailsRow.style.display === '') {
                                    detailsRow.style.display = 'table-row'; // Show details row
                                } else {
                                    detailsRow.style.display = 'none'; // Hide details row
                                }
                            });
                        });
                    </script>
                    
                    
                    
                </div>
            </div>
        </div>
           {{-- Categories and Branches Accordion - col-md-4 --}}
           <div class="col-md-4 mb-4">
            <div class="accordion" id="assetAccordion">
                {{-- Categories Accordion --}}
                <div class="accordion-item mb-3">
                    <h2 class="accordion-header" id="headingCategories">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCategories" aria-expanded="true" aria-controls="collapseCategories">
                           <strong> Asset Categories</strong>
                        </button>
                    </h2>
                    <div id="collapseCategories" class="accordion-collapse collapse show" aria-labelledby="headingCategories" data-bs-parent="#assetAccordion">
                        <div class="accordion-body">
                            <ul class="list-group">
                                @foreach($assetcategories as $category)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ $category->name }}
                                        <span class="bg-label-secondary rounded-pill" style="font-size: 13px;">{{ $category->assets_count ?? 0 }} Assets</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
    
                {{-- Branches Accordion --}}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingBranches">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBranches" aria-expanded="false" aria-controls="collapseBranches">
                            <strong>Branches</strong>
                        </button>
                    </h2>
                    <div id="collapseBranches" class="accordion-collapse collapse" aria-labelledby="headingBranches" data-bs-parent="#assetAccordion">
                        <div class="accordion-body">
                            <ul class="list-group">
                                @foreach($branches as $branch)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        {{ $branch->name }}
                                        <span class="badge bg-secondary">{{ $branch->assets_count ?? 0 }} Assets</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
</div>

{{-- Add Branch Modal --}}
<div class="modal fade" id="addBranchModal" tabindex="-1" aria-labelledby="addBranchModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('branches.store') }}" class="modal-content">
            @csrf
            <div class="modal-header"><h5 class="modal-title" id="addBranchModalLabel">Add Branch</h5></div>
            <div class="modal-body">
                <input name="name" class="form-control mb-2" placeholder="Branch Name" required>
                <input name="location" class="form-control" placeholder="Location">
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Save Branch</button>
            </div>
        </form>
    </div>
</div>

{{-- Add Category Modal --}}
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('categories.store') }}" class="modal-content">
            @csrf
            <div class="modal-header"><h5 class="modal-title" id="addCategoryModalLabel">Add Category</h5></div>
            <div class="modal-body">
                <input name="name" class="form-control mb-2" placeholder="Category Name" required>
                <textarea name="description" class="form-control" placeholder="Description (optional)"></textarea>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success">Save Category</button>
            </div>
        </form>
    </div>
</div>

{{-- Add Asset Offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="addAssetCanvas">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Add Asset</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <form action="{{ route('assets.store') }}" method="POST">
            @csrf
            @include('inventory.partials.asset-form', ['asset' => null])
            <button class="btn btn-primary mt-3">Save Asset</button>
        </form>
    </div>
</div>

@endsection