@extends('layouts.admin_app')

@section('content')
    @if (Session::has('success_message'))
        <div class="alert alert-success alert-dismissible fade show">
            <span class="glyphicon glyphicon-ok"></span>
            {!! session('success_message') !!}
            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if (Session::has('error_message'))
        <div class="alert alert-danger alert-dismissible fade show">
            <span class="glyphicon glyphicon-remove"></span>
            {!! session('error_message') !!}
            <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <!-- Reports Section -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="mb-3">
                <div class="float-left">
                    <h4 class="text-info font-weight-bold">Dashboard Reports</h4>
                </div>
                <div class="btn-group btn-group-sm float-right" role="group">
                    <a href="{{ route('dashboard_reports.report.create') }}" class="btn btn-info" title="Create New Report">
                        <span class="fas fa-plus" aria-hidden="true"></span> Add Report
                    </a>

                    <a href="{{ route('dashboard_reports.column.create') }}" class="btn btn-success" title="Create New Column">
                        <span class="fas fa-plus" aria-hidden="true"></span> Add Column
                    </a>
                </div>
                <div class="clearfix"></div>
            </div>

            @if (count($reports) == 0)
                <h4 class="text-info text-center">No Reports Available.</h4>
            @else
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Report Name</th>
                                {{-- <th>Report Code</th>
                                <th>Report Type</th> --}}
                                <th>Dashboard</th>
                                <th>Dashboard Report</th>
                                <th>Head Office</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($reports as $report)
                                <tr>
                                    <td>{{ $report->id }}</td>
                                    <td>{{ $report->name }}</td>
                                    {{-- <td>{{ $report->report_code ?? '-' }}</td>
                                    <td>{{ $report->report_type ?? '-' }}</td> --}}
                                    <td>{{ $report->dash_name ?? '-' }}</td>
                                    <td>
                                        <span class="badge badge-{{ $report->is_dashboard_report ? 'success' : 'secondary' }}">
                                            {{ $report->is_dashboard_report ? 'Yes' : 'No' }}
                                        </span>
                                    </td>
                                    <td>{{ $report->headOffice->company_name ?? '-' }}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ route('dashboard_reports.report.columns', $report->id) }}" 
                                               class="btn btn-primary" title="View Columns">
                                                <i class="fas fa-columns"></i>
                                            </a>
                                            <a href="{{ route('dashboard_reports.report.edit', $report->id) }}" 
                                               class="btn btn-warning" title="Edit Report">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" class="btn btn-danger" 
                                                    onclick="confirmDelete({{ $report->id }}, '{{ $report->name }}')"
                                                    title="Delete Report">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                        <form id="delete-form-{{ $report->id }}" 
                                              action="{{ route('dashboard_reports.report.destroy', $report->id) }}" 
                                              method="POST" style="display: none;">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    <!-- Automated Report Columns Section -->
    <div class="card">
        <div class="card-body">
            <div class="mb-3">
                <div class="float-left">
                    <h4 class="text-info font-weight-bold">Report Columns</h4>
                </div>
                <div class="btn-group btn-group-sm float-right" role="group">

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    function confirmDelete(reportId, reportName) {
        if (confirm('Are you sure you want to delete the report "' + reportName + '"? This will also delete all associated columns.')) {
            document.getElementById('delete-form-' + reportId).submit();
        }
    }

    function confirmDeleteColumn(columnId, columnName) {
        if (confirm('Are you sure you want to delete the column "' + columnName + '"?')) {
            document.getElementById('delete-column-form-' + columnId).submit();
        }
    }
</script>
@endsection