@extends('layouts.cs.main')

@section('csslips', 'active')

@section('main-content')
    <style>
        table {
            border-collapse: separate;
            border-spacing: 0 5px;
        }

        table.dataTable tbody tr {
            border-radius: 10px;
        }
    </style>

    <div class="container container-fluid container-def p-3 mt-3">
        <div class="card mb-4">
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Search</label>
                        <input type="text" class="form-control" id="search_transaction" placeholder="Transaction Number">
                    </div>
                    <div class="form-group col-md-3">
                        <label for="">Transaction Type</label>
                        <select id="transaction_type" class="form-control">
                            <option value="">Select All</option>
                            @foreach ($transactionTypes as $key => $transactionType)
                                <option value="{{ $transactionType->description }}">{{ $transactionType->description }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="">CS Party Group</label>
                        <select id="member_type" class="form-control">
                            <option value="">Select All</option>
                            @foreach ($memberTypes as $memberType)
                                <option value="{{ $memberType->description }}">{{ $memberType->description }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <table class="table text-nowrap table-borderless" id="transaction_headers" style="width: 100%">
            <thead class="table-borderless text-sm text-muted">
                <tr>
                    <td scope="col">Date</td>
                    <td scope="col">CS Party Name</td> <!-- Include the CS Member Type Below -->
                    <td scope="col">Store</td> <!-- Include the Store Code Below -->
                    <td class="text-center" scope="col">CS Number</td>
                    <td class="text-center" scope="col">Transaction</td>
                    <td class="text-center" scope="col">CS Party Approval</td>
                    <td class="text-center" scope="col">Store Head Approval</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
@endsection

@section('scripts')
    <script>
        let transactionHeadersTable;

        const csslips = {
            init: function() {
                csslips.events();
                csslips.getTransactionHeaders();
            },
            events: function() {
                $('#search_transaction, #transaction_type, #member_type').on('change keyup', function() {
                    let searchValue = $('#search_transaction').val();
                    let transactionTypeValue = $('#transaction_type').val();
                    let memberTypeValue = $('#member_type').val();

                    // Apply search criteria to specific columns
                    // Check if the value is not empty before applying the search criteria
                    transactionHeadersTable.column(3).search(searchValue);
                    transactionHeadersTable.column(4).search(transactionTypeValue);
                    transactionHeadersTable.column(1).search(memberTypeValue);

                    transactionHeadersTable.draw();
                });
            },
            getTransactionHeaders: function(filter = "") {
                if (transactionHeadersTable) {
                    transactionHeadersTable.destroy();
                }

                transactionHeadersTable = $('#transaction_headers').DataTable({
                    ajax: `/cs/get-transaction-headers`,
                    order: [
                        [3, 'desc']
                    ],
                    dom: 'tp',
                    columns: [{
                            data: 'date_created',
                            name: 'date_created',
                        },
                        {
                            data: 'member_fname',
                            name: 'member_fname',
                            render: function(data, type, row) {
                                return `<span class="d-block">${row.member_fname} ${row.member_mname} ${row.member_lname}</span>
                                <small class="text-muted">${row.member_type}</small>`;
                            },
                        },
                        {
                            data: 'store_name',
                            name: 'store_name',
                            render: function(data, type, row) {
                                return `<span class="d-block">${row.store_name}</span>
                                <small class="text-muted">${row.store_code}</small>`;
                            },
                        },
                        {
                            data: 'trans_number',
                            name: 'trans_number',
                            render: function(data, type, row) {
                                return `<div class="text-center">
                                    <a href="/cs/cs-slips/view?transaction_no=${data}"><u>${data}</u></a>
                                    </div>`
                            },
                        },
                        {
                            data: 'trans_type',
                            name: 'trans_type',
                            render: function(data, type, row) {
                                return `<div class="text-center">${data}</div>`
                            },
                        },
                        {
                            data: 'cs_approved',
                            name: 'cs_approved',
                            render: function(data, type, row) {
                                let rowColor = "";
                                switch (data) {
                                    case 'Auto-Approved':
                                    case 'Approved':
                                        rowColor = 'success';
                                        break;
                                    case 'Declined':
                                        rowColor = 'danger';
                                        break;
                                    case 'Pending':
                                        rowColor = 'warning';
                                        break;
                                    default:
                                        return `<div class="text-center">${data}</div>`;
                                }
                                return `<div class="text-center"><span class="badge badge-pill badge-${rowColor}">${data}</span></div>`;
                            },
                        },
                        {
                            data: 'sh_approved',
                            name: 'sh_approved',
                            render: function(data, type, row) {
                                let rowColor = "";
                                switch (data) {
                                    case 'Auto-Approved':
                                    case 'Approved':
                                        rowColor = 'success';
                                        break;
                                    case 'Declined':
                                        rowColor = 'danger';
                                        break;
                                    case 'Pending':
                                        rowColor = 'warning';
                                        break;
                                    default:
                                        return `<div class="text-center">${data}</div>`;
                                }
                                return `<div class="text-center"><span class="badge badge-pill badge-${rowColor}">${data}</span></div>`;
                            },
                        },
                    ],
                    initComplete: function(settings, json) {
                        $(".table").wrap(
                            "<div style='overflow:auto; width:100%;position:relative;'></div>");
                    },
                    rowCallback: function(row, data, index) {
                        // Add styling to each row
                        $(row).css({
                            'background-color': '#FFFFFF', // Example color
                            'padding': '20px', // Example padding
                            'border-radius': '10px',
                            'box-shadow': '0 1px 4px rgba(0, 0, 0, 0.1)'
                        });
                    },
                    drawCallback: function(settings) {
                        // $('#transaction_headers tbody tr').not(':last').css('margin-bottom', '10px');
                    }
                });
            },
        }

        csslips.init();
    </script>
@endsection