@extends('adminlte::page')

@section('title', 'Depreciation Records')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-weight-bold text-dark">Depreciation Records</h1>
        <a class="btn btn-primary shadow-sm" href="{{ route('depreciations.dashboard') }}">
            <i class="fas fa-chart-line mr-2"></i> Dashboard
        </a>
    </div>
@stop

@section('content')
    @if ($message = Session::get('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="fas fa-check-circle mr-2"></i> {{ $message }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="card border-0 shadow-sm rounded-lg">
        <div class="card-body">
            <table id="depreciations-table" class="table table-hover table-striped w-100">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="border-0">Date</th>
                        <th class="border-0">Asset</th>
                        <th class="border-0">Amount</th>
                        <th class="border-0">Accumulated</th>
                        <th class="border-0">Book Value</th>
                        <th class="border-0 text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($depreciations as $depreciation)
                    <tr>
                        <td class="align-middle" data-order="{{ $depreciation->depreciation_date->format('Y-m-d') }}">
                            {{ $depreciation->depreciation_date->format('d M, Y') }}
                        </td>
                        <td class="align-middle font-weight-bold text-primary">{{ $depreciation->asset->name ?? 'N/A' }}</td>
                        <td class="align-middle text-danger font-weight-bold">&#8358;{{ number_format($depreciation->amount, 2) }}</td>
                        <td class="align-middle font-weight-bold">&#8358;{{ number_format($depreciation->accumulated_amount, 2) }}</td>
                        <td class="align-middle font-weight-bold text-success">&#8358;{{ number_format($depreciation->book_value, 2) }}</td>
                        <td class="align-middle text-right">
                             <div class="btn-group">
                                <a class="btn btn-sm btn-light text-info shadow-sm" href="{{ route('depreciations.show',$depreciation->id) }}" data-toggle="tooltip" title="Show">
                                    <i class="fas fa-eye"></i>
                                </a>

                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('css')
    {{-- DataTables CSS --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.bootstrap4.min.css">
    <style>
        .card { border-radius: 0.75rem; }
        .table thead th { font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; }
        .btn-group .btn { border-radius: 0.25rem !important; margin: 0 2px; }
        .dataTables_wrapper .dataTables_filter input { border-radius: 20px; padding: 5px 15px; border: 1px solid #ddd; }
        .dataTables_wrapper .dt-buttons .btn { border-radius: 20px; margin-right: 5px; font-size: 0.85rem; }
    </style>
@stop

@section('js')
    {{-- DataTables JS --}}
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

    <script>
        $(document).ready(function() {
            var table = $('#depreciations-table').DataTable({
                responsive: true,
                autoWidth: false,
                "order": [[ 0, "asc" ]],
                dom: '<"row mb-3"<"col-md-6"B><"col-md-6"f>>rt<"row"<"col-md-6"i><"col-md-6"p>>',
                buttons: [
                    { extend: 'copy',   className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-copy mr-1"></i> Copy' },
                    { extend: 'csv',    className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-file-csv mr-1"></i> CSV' },
                    { extend: 'excel',  className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-file-excel mr-1"></i> Excel' },
                    { extend: 'pdf',    className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-file-pdf mr-1"></i> PDF' },
                    { extend: 'print',  className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-print mr-1"></i> Print' },
                    { extend: 'colvis', className: 'btn btn-secondary btn-sm', text: '<i class="fas fa-columns mr-1"></i> Columns' }
                ],
                "columnDefs": [
                    { "orderable": false, "targets": 5 }
                ],
                language: {
                    search: "",
                    searchPlaceholder: "Search depreciations..."
                }
            });
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>
@stop