@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        .user-box {
            text-align: left;
        }

        .user-name {
            font-weight: 700;
            /* color: #111827; */
            margin-bottom: 4px;
        }

        .user-id {
            font-size: 13px;
            /* color: #6b7280; */
        }

        .amount {
            font-weight: 700;
            color: #059669;
        }

        .badge-soft-success {
            background: #dcfce7;
            color: #15803d;
            padding: 8px 12px;
            border-radius: 10px;
            font-weight: 700;
        }

        .badge-soft-warning {
            background: #fef3c7;
            color: #b45309;
            padding: 8px 12px;
            border-radius: 10px;
            font-weight: 700;
        }

        .action-btn {
            border-radius: 10px;
            font-size: 13px;
            padding: 7px 12px;
            font-weight: 600;
        }

        .dataTables_info,
        .dataTables_paginate {
            padding: 15px 18px !important;
        }

        @media(max-width:768px) {
            .table-wrap {
                padding: 0 10px 10px;
            }
        }
    </style>

    <div class="row align-items-center justify-content-between mt-3 mb-3 m-2">
        <div class="col-auto">
            <h5 class="page-title"><button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ url()->previous() }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M15 6l-6 6l6 6"></path>
                        </svg>
                    </a>
                </button>
                <i class="ti tabler-leaf me-2 text-primary"></i>Green Deposit Report
            </h5>
        </div>
    </div>

    <div class="card main-card m-2">

        <div class="filter-section p-3">
            <div class="row g-3 align-items-end d-flex justify-content-end">
                <div class="col-auto">
                    <select id="pageLength" class="form-select">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="All">All</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-6">
                    <label class="form-label">From Date</label>
                    <input type="date" class="form-control">
                </div>

                <div class="col-lg-2 col-md-6">
                    <label class="form-label">To Date</label>
                    <input type="date" class="form-control">
                </div>

                <div class="col-lg-2 col-md-6">
                    <label class="form-label">User Name</label>
                    <input type="text" class="form-control" placeholder="Search user">
                </div>

                <div class="col-lg-auto col-md-6">
                    <button class="btn btn-primary w-100">
                        <i class="ti tabler-search me-1"></i> Search
                    </button>
                </div>
                <div class="col-md-3 ms-auto">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
                </div>

                <div class="col-lg-auto col-md-6">
                    <button class="btn btn-label-secondary w-100">
                        <i class="ti tabler-download me-1"></i> Export
                    </button>
                </div>

            </div>
        </div>


        <div class="table-wrap">
            <table class="table w-100" id="usersTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>User Details</th>
                        <th>Amount</th>
                        <th>Pay Mode</th>
                        <th>Bill Number</th>
                        <th>Bill Receipt</th>
                        <th>Investment</th>
                        <th>Income Given</th>
                        <th>Deposited BY</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </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 users = [
        {
            date: '28/08/2022',
            name: 'Rahul Sharma',
            id: 'USR1025',
            amount: '50000',
            pay_mode: 'UPI',
            bill_number: 'BILL1001',
            bill_receipt: 'No receipt',
            investment: '50000',
            income_given: 'Yes',
            deposited_by: 'Admin'
        },

    ];

    let table = $('#usersTable').DataTable({
        data: users,
        pageLength: 10,
        ordering: false,
        searching: true,
        lengthChange: false,
        info: true,

        columnDefs: [{
            targets: '_all',
            className: 'text-nowrap align-middle'
        }],

        columns: [

            /* # */
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },

            /* Date */
            { data: 'date' },

            /* User Details */
            {
                data: null,
                render: function (data, type, row) {
                    return `
                        <div class="user-box">
                            <div class="user-name">
                                <i class="ti tabler-user me-1 text-primary"></i>${row.name}
                            </div>
                            <div class="user-id">
                                <i class="ti tabler-id me-1"></i>${row.id}
                            </div>
                        </div>
                    `;
                }
            },

            /* Amount */
            {
                data: 'amount',
                render: function (data) {
                    return `<span class="badge bg-success">₹ ${data}</span>`;
                }
            },

            /* Pay Mode */
            {
                data: 'pay_mode',
                render: function (data) {
                    return `<span class="badge bg-info">${data}</span>`;
                }
            },

            /* Bill Number */
            { data: 'bill_number' },

            /* Bill Receipt */
            {
                data: 'bill_receipt',
                render: function (data) {
                    return `

                            <i class="ti tabler-file-download text-primary fs-5"></i>${data}

                    `;
                }
            },

            /* Investment */
            {
                data: 'investment',
                render: function (data) {
                    return `<span class="badge bg-primary">₹ ${data}</span>`;
                }
            },

            /* Income Given */
            {
                data: 'income_given',
                render: function (data) {
                    let cls = data === 'Yes' ? 'bg-success' : 'bg-warning';
                    return `<span class="badge ${cls}">${data}</span>`;
                }
            },

            /* Deposited By */
            { data: 'deposited_by' },

            /* Action */
            {
                data: null,
                render: function () {
                    return `
                        <button class="btn btn-sm btn-label-danger action-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#delete">
                            <i class="ti tabler-trash me-1"></i>
                        </button>
                    `;
                }
            }

        ]
    });

    $('#customSearch').keyup(function () {
        table.search($(this).val()).draw();
    });

    $('#pageLength').change(function () {
        let value = $(this).val() === 'All' ? -1 : $(this).val();
        table.page.len(value).draw();
    });

});
</script>

@endsection