@extends('Admin.layout')

<style>
    .dt-search {
        display: none !important;
    }
</style>

@section('content')

<div class="d-flex flex-column flex-lg-row
            justify-content-between
            align-items-start
            align-items-lg-center
            gap-3 mb-4">

    <h5 class="mb-0">
        Delivery Management
    </h5>

    <a href="{{ route('admin.add_delivery_partner') }}"
       class="btn btn-primary">

        <i class="fa-solid fa-plus me-1"></i>

        Add Delivery Partner

    </a>

</div>


<div class="card shadow-sm border-0">

    <div class="card-body p-4">

        <div class="d-flex flex-column flex-lg-row
                    justify-content-between
                    align-items-start
                    align-items-lg-center
                    gap-3 mb-4">

            <div>

                <label class="form-label mb-1">
                    Show
                </label>

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

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

                </select>

            </div>


            <div class="d-flex gap-2">

                <input type="text"
                       id="searchBox"
                       class="form-control"
                       placeholder="Search delivery partner...">

                <button type="button"
                        id="exportBtn"
                        class="btn btn-primary">

                    <i class="fa-solid fa-file-pdf me-1"></i>

                    Export

                </button>

            </div>

        </div>


        <div class="table-responsive">

            <table id="table"
                   class="table align-middle">

                <thead class="bg-primary-subtle">

                    <tr>

                        <th>S.NO</th>
                        <th>PARTNER ID</th>
                        <th>PARTNER NAME</th>
                        <th>PHONE</th>
                        <th>EMAIL</th>
                        <th>TOTAL DELIVERIES</th>
                        <th>JOINED ON</th>
                        <th>STATUS</th>
                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody>
                </tbody>

            </table>

        </div>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>

$(document).ready(function() {

    const deliveryData = [

        {
            sno: 1,
            partner_id: 'DP1001',
            partner_name: 'Raj Kumar',
            phone: '9876543210',
            email: 'raj@gmail.com',
            total_deliveries: 145,
            joined_on: '10 Jan 2026',
            status: 'Active'
        },

        {
            sno: 2,
            partner_id: 'DP1002',
            partner_name: 'Arun Kumar',
            phone: '9876543211',
            email: 'arun@gmail.com',
            total_deliveries: 98,
            joined_on: '15 Jan 2026',
            status: 'Active'
        },

        {
            sno: 3,
            partner_id: 'DP1003',
            partner_name: 'Suresh',
            phone: '9876543212',
            email: 'suresh@gmail.com',
            total_deliveries: 67,
            joined_on: '20 Jan 2026',
            status: 'Inactive'
        }

    ];


    const table = $('#table').DataTable({

        data: deliveryData,

        pageLength: 10,

        searching: true,

        lengthChange: false,

        ordering: true,


        columnDefs: [

            {
                targets: '_all',
                className: 'text-nowrap text-center'
            }

        ],


        createdRow: function(row, data, dataIndex) {

            if (dataIndex % 2 != 0) {

                $(row).addClass('bg-primary-subtle');

            }

        },


        buttons: [

            {

                extend: 'pdfHtml5',

                title: 'Delivery_Partner_Report',

                filename: 'Delivery_Partner_Report',

                exportOptions: {

                    columns: [

                        0,
                        1,
                        2,
                        3,
                        4,
                        5,
                        6,
                        7

                    ]

                }

            }

        ],


        columns: [

            {
                data: 'sno'
            },

            {
                data: 'partner_id'
            },

            {
                data: 'partner_name'
            },

            {
                data: 'phone'
            },

            {
                data: 'email'
            },

            {
                data: 'total_deliveries'
            },

            {
                data: 'joined_on'
            },


            {

                data: 'status',

                render: function(data) {

                    return data === 'Active' ?

                        '<span class="badge bg-success">Active</span>' :

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

                }

            },


            {

                data: null,

                orderable: false,

                searchable: false,

                render: function() {

                    return `

                        <a href="{{ route('admin.view_delivery_partner') }}"
                           class="btn btn-primary btn-sm me-1">

                            <i class="ti tabler-eye"></i>

                        </a>


                        <a href="{{ route('admin.edit_delivery_partner') }}"
                           class="btn btn-primary btn-sm me-1">

                            <i class="ti tabler-edit"></i>

                        </a>


                        <button type="button"
                                class="btn btn-danger btn-sm"
                                data-bs-toggle="modal"
                                data-bs-target="#delete">

                            <i class="ti tabler-trash"></i>

                        </button>

                    `;

                }

            }

        ]

    });


    // SEARCH

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

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

    });


    // PAGE LENGTH

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

        const length = $(this).val();

        table.page.len(length).draw();

    });


    // EXPORT

    $('#exportBtn').on('click', function() {

        table.button('.buttons-pdf').trigger();

    });

});

</script>

@endsection