@extends('layouts.partner_layout')

@section('content')
<x-page-header title="{{ $pageTitle }}" :backButton="true" />

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="centres-table" class="table table-striped table-bordered nowrap" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Centre Name</th>
                                <th>Email</th>
                                <th>Mobile Number</th>
                                <th>Director Name</th>
                                <th>Created On</th>
                                <th style="width: 120px;">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pages-scripts')
<script>
$(document).ready(function() {
    let table = $('#centres-table').DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        autoWidth: false,
        ajax: "{{ route('centre.new-created.list') }}",
        columns: [
            { data: null, render: (data, type, row, meta) => meta.row + 1 },
            { data: 'centre_name', defaultContent: 'N/A' },
            { data: 'official_email', defaultContent: 'N/A' },
            { data: 'primary_phone', defaultContent: '-' },
            { data: 'director_name', defaultContent: '-' },
            { 
                data: 'created_at', 
                defaultContent: '-', 
                render: function(data, type, row) {
                    if(!data) return '-';
                    let date = new Date(data);
                    // Format: 10 Nov 2025, 11:41 AM
                    return date.toLocaleString('en-US', { 
                        year: 'numeric', 
                        month: 'short', 
                        day: 'numeric', 
                        hour: '2-digit', 
                        minute: '2-digit',
                        hour12: true
                    });
                }
            },
            { data: 'actions', orderable: false, searchable: false }
        ]
    });
});
</script>
@endsection