@extends('Admin.layout')

@section('content')

    {{-- PAGE HEADER --}}
    <div class="d-flex flex-row justify-content-between align-items-center mb-3 gap-2">

        <h3 class="mb-0 text-nowrap">
            Customer Management
        </h3>

    </div>


    {{-- MAIN CARD --}}
    <div class="card gold-management-card p-3">

        {{-- FILTERS --}}
        <div class="row g-2 align-items-center mb-4">

            {{-- PAGE LENGTH --}}
            <div class="col-6 col-sm-4 col-md-3 col-lg-1">

                <select id="pageLength" class="form-select">

                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>

                </select>

            </div>


            {{-- SEARCH --}}
            <div class="col-12 col-sm-8 col-md-6 col-lg-4 ms-sm-auto">

                <input type="search"
                       id="customerSearch"
                       class="form-control"
                       placeholder="Search Customer">

            </div>

        </div>


        
        {{-- TABLE --}}
        <div class="gold-table-wrapper table-responsive">

            <table id="customerManagementTable"
                   class="table mb-0 w-100 text-nowrap">

                <thead>

                    <tr>

                        <th>SNO</th>

                        <th>CUSTOMER ID</th>

                        <th>CUSTOMER NAME</th>

                        <th>EMAIL</th>

                        <th>PHONE</th>

                        <th>GENDER</th>

                        <th>STATUS</th>

                        <th>CREATED DATE</th>


                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>
{{-- DATATABLES CSS --}}
<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

{{-- JQUERY --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- DATATABLES JS --}}
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>

    $(document).ready(function () {

        /* =========================
           CUSTOMER DATA
        ========================== */

        const data = [

            {
                id: 'CUS001',
                name: 'Arun Kumar',
                email: 'arun@gmail.com',
                phone: '9876543210',
                gender: 'Male',
                status: 'Active',
                joined_date: '03-10-2026'
            },

            {
                id: 'CUS002',
                name: 'Priya S',
                email: 'priya@gmail.com',
                phone: '9876543211',
                gender: 'Female',
                status: 'Active',
                joined_date: '02-10-2026'
            },

            {
                id: 'CUS003',
                name: 'Suresh Kumar',
                email: 'suresh@gmail.com',
                phone: '9876543212',
                gender: 'Male',
                status: 'Inactive',
                joined_date: '01-10-2026'
            },

            {
                id: 'CUS004',
                name: 'Anitha R',
                email: 'anitha@gmail.com',
                phone: '9876543213',
                gender: 'Female',
                status: 'Active',
                joined_date: '30-09-2026'
            },

            {
                id: 'CUS005',
                name: 'Vijay Kumar',
                email: 'vijay@gmail.com',
                phone: '9876543214',
                gender: 'Male',
                status: 'Active',
                joined_date: '29-09-2026'
            }

        ];


        /* =========================
           DATATABLE
        ========================== */

        const customerTable = $('#customerManagementTable').DataTable({

            data: data,

            pageLength: 10,

            lengthChange: false,

            searching: true,

            ordering: true,

            order: [],

            info: true,

            autoWidth: false,

            dom: 'rtip',

            columns: [

                /* SNO */
                {
                    data: null,

                    orderable: false,

                    searchable: false,

                    render: function (data, type, row, meta) {

                        return meta.row + 1;

                    }
                },


                /* CUSTOMER ID */
                {
                    data: 'id',
                    name: 'id'
                },


                /* CUSTOMER NAME */
                {
                    data: 'name',
                    name: 'name'
                },


                /* EMAIL */
                {
                    data: 'email',
                    name: 'email'
                },


                /* PHONE */
                {
                    data: 'phone',
                    name: 'phone'
                },


                /* GENDER */
                {
                    data: 'gender',
                    name: 'gender'
                },


                /* STATUS */
                {
                    data: 'status',
                    name: 'status',

                    render: function (data) {

                        if (data === 'Active') {

                            return `
                                <span class="badge bg-success">
                                    Active
                                </span>
                            `;

                        }

                        if (data === 'Inactive') {

                            return `
                                <span class="badge bg-danger">
                                    Inactive
                                </span>
                            `;

                        }

                        return data;

                    }
                },


                /* JOINED DATE */
                {
                    data: 'joined_date',
                    name: 'joined_date'
                },


                

            ]

        });


        /* =========================
           CUSTOM SEARCH
        ========================== */

        $('#customerSearch').on('keyup', function () {

            customerTable
                .search(this.value)
                .draw();

        });


        /* =========================
           PAGE LENGTH
        ========================== */

        $('#pageLength').on('change', function () {

            customerTable
                .page
                .len(parseInt(this.value))
                .draw();

        });


        /* =========================
           VIEW CUSTOMER
        ========================== */

        $(document).on('click', '.view-customer', function () {

            const customerId = $(this).data('id');

            console.log('Customer ID:', customerId);

            // Add your customer view route/modal here.

        });

    });

</script>
@endsection