@extends('adminlte::page')

@section('title', 'Fixed Asset Movement Schedule')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-weight-bold text-dark">Fixed Asset Movement Schedule</h1>
        <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left mr-1"></i> Reports Center</a>
    </div>
@stop

@section('content')
<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-white py-3">
        <h5 class="card-title mb-0 text-indigo font-weight-bold"><i class="fas fa-filter mr-2"></i> Filter Period</h5>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
        </div>
    </div>
    <div class="card-body">
        <form action="{{ route('reports.fixed_asset_schedule') }}" method="GET">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="small font-weight-bold text-muted">Start Date</label>
                        <input type="date" name="start_date" class="form-control" value="{{ request('start_date', $startDate->format('Y-m-d')) }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="small font-weight-bold text-muted">End Date</label>
                        <input type="date" name="end_date" class="form-control" value="{{ request('end_date', $endDate->format('Y-m-d')) }}">
                    </div>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <div class="form-group w-100">
                        <button type="submit" class="btn btn-primary btn-block shadow-sm" style="background-color: #4f46e5; border-color: #4f46e5;"><i class="fas fa-sync-alt mr-1"></i> Generate Schedule</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="card shadow-md border-0 rounded-lg">
    <div class="card-body">
        <div class="table-responsive">
            <table id="schedule-table" class="table table-bordered table-striped w-100 text-center schedule-table">
                <thead class="bg-light text-muted uppercase">
                    <tr>
                        <th class="text-left border-bottom-0">Metric</th>
                        @foreach($schedule as $cat)
                            <th class="border-bottom-0">{{ $cat['category'] }}</th>
                        @endforeach
                        <th class="border-bottom-0 font-weight-bold text-dark">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Cost Section -->
                    <tr class="bg-light">
                        <td class="text-left font-weight-bold text-indigo border-right-0">
                            <i class="fas fa-money-bill-wave mr-1"></i> Cost
                        </td>
                        @foreach($schedule as $cat) <td class="border-left-0 border-right-0"></td> @endforeach
                        <td class="border-left-0"></td>
                    </tr>
                    <tr>
                        <td class="text-left font-weight-bold pl-4">Opening</td>
                        @foreach($schedule as $cat) <td>{{ number_format($cat['cost_opening'], 2) }}</td> @endforeach
                        <td class="font-weight-bold">{{ number_format($totals['cost_opening'], 2) }}</td>
                    </tr>
                    <tr>
                        <td class="text-left font-weight-bold pl-4">Additions</td>
                        @foreach($schedule as $cat) <td class="text-success">{{ number_format($cat['cost_addition'], 2) }}</td> @endforeach
                        <td class="font-weight-bold text-success">{{ number_format($totals['cost_addition'], 2) }}</td>
                    </tr>
                    <tr>
                        <td class="text-left font-weight-bold pl-4">Transfers / Disposals</td>
                        @foreach($schedule as $cat) <td class="text-danger">{{ number_format($cat['cost_transfer'], 2) }}</td> @endforeach
                        <td class="font-weight-bold text-danger">{{ number_format($totals['cost_transfer'], 2) }}</td>
                    </tr>
                    <tr style="background-color: #f8fafc;">
                        <td class="text-left font-weight-bold pl-4 text-dark">Closing Cost</td>
                        @foreach($schedule as $cat) <td class="font-weight-bold">{{ number_format($cat['cost_closing'], 2) }}</td> @endforeach
                        <td class="font-weight-bold text-dark">{{ number_format($totals['cost_closing'], 2) }}</td>
                    </tr>

                    <!-- Accumulated Depreciation Section -->
                    <tr class="bg-light">
                        <td class="text-left font-weight-bold text-indigo mt-3 border-top border-right-0">
                            <i class="fas fa-chart-pie mr-1"></i> Accumulated Depreciation
                        </td>
                        @foreach($schedule as $cat) <td class="border-top border-left-0 border-right-0"></td> @endforeach
                        <td class="border-top border-left-0"></td>
                    </tr>
                    <tr>
                        <td class="text-left font-weight-bold pl-4">Opening</td>
                        @foreach($schedule as $cat) <td>{{ number_format($cat['dep_opening'], 2) }}</td> @endforeach
                        <td class="font-weight-bold">{{ number_format($totals['dep_opening'], 2) }}</td>
                    </tr>
                    <tr>
                        <td class="text-left font-weight-bold pl-4">Depreciation for Period</td>
                        @foreach($schedule as $cat) <td class="text-danger">{{ number_format($cat['dep_addition'], 2) }}</td> @endforeach
                        <td class="font-weight-bold text-danger">{{ number_format($totals['dep_addition'], 2) }}</td>
                    </tr>
                    <tr style="background-color: #f8fafc;">
                        <td class="text-left font-weight-bold pl-4 text-dark">Closing Accum. Dep.</td>
                        @foreach($schedule as $cat) <td class="font-weight-bold">{{ number_format($cat['dep_closing'], 2) }}</td> @endforeach
                        <td class="font-weight-bold text-dark">{{ number_format($totals['dep_closing'], 2) }}</td>
                    </tr>

                    <!-- Net Book Value Section -->
                    <tr class="bg-light border-top">
                        <td class="text-left font-weight-bold text-indigo mt-3 border-right-0">
                            <i class="fas fa-balance-scale mr-1"></i> Net Book Value (NBV)
                        </td>
                        @foreach($schedule as $cat) <td class="border-left-0 border-right-0"></td> @endforeach
                        <td class="border-left-0"></td>
                    </tr>
                    <tr>
                        <td class="text-left font-weight-bold pl-4">Opening NBV</td>
                        @foreach($schedule as $cat) <td>{{ number_format($cat['nbv_opening'], 2) }}</td> @endforeach
                        <td class="font-weight-bold">{{ number_format($totals['nbv_opening'], 2) }}</td>
                    </tr>
                    <tr style="background-color: #e0f2fe;">
                        <td class="text-left font-weight-bold pl-4 text-primary">Closing NBV</td>
                        @foreach($schedule as $cat) <td class="font-weight-bold text-primary">{{ number_format($cat['nbv_closing'], 2) }}</td> @endforeach
                        <td class="font-weight-bold text-primary">{{ number_format($totals['nbv_closing'], 2) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@stop

@section('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; }
        .text-indigo { color: #4f46e5 !important; }
        .dataTables_wrapper .dt-buttons .btn { border-radius: 20px; margin-right: 5px; font-size: 0.8rem; }

        /* Compact schedule table */
        .schedule-table { font-size: 0.78rem; }
        .schedule-table thead th {
            font-size: 0.75rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            background-color: #343a40;
            color: #fff;
            padding: 6px 8px;
            white-space: normal;      /* Allow header wrapping */
            word-break: break-word;
            min-width: 80px;
        }
        /* First (Metric) column wider and left-aligned */
        .schedule-table thead th:first-child,
        .schedule-table tbody td:first-child {
            min-width: 140px;
            max-width: 180px;
            white-space: normal;
            word-break: break-word;
            text-align: left;
        }
        /* Data cells: compact, numeric alignment */
        .schedule-table tbody td {
            padding: 5px 8px;
            white-space: nowrap;    /* Keep numbers on one line */
            vertical-align: middle;
        }
        /* Section header rows: no background override for text */
        table.dataTable tbody tr.bg-light td { background-color: #f8f9fa; }
    </style>
@stop

@section('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>
        $(document).ready(function() {
            var table = $('#schedule-table').DataTable({
                responsive: true,
                autoWidth: false,
                ordering: false, // Maintain our custom row order
                paging: false,   // Since it's a schedule, we don't paginate
                searching: false, // No searching needed for a fixed schedule
                info: false,
                dom: '<"row mb-3"<"col-md-12 text-right"B>>rt',
                buttons: [
                    { extend: 'excel', className: 'btn btn-success btn-sm shadow-sm', text: '<i class="fas fa-file-excel mr-1"></i> Excel' },
                    { 
                        extend: 'pdf', 
                        className: 'btn btn-danger btn-sm shadow-sm', 
                        text: '<i class="fas fa-file-pdf mr-1"></i> PDF',
                        orientation: 'landscape',
                        pageSize: 'A3'
                    },
                    { extend: 'print', className: 'btn btn-secondary btn-sm shadow-sm', text: '<i class="fas fa-print mr-1"></i> Print' }
                ]
            });
        });
    </script>
@stop