@extends('modules.head') @section('contenido')
<div class="bulk-assignment-wrapper">
    <div>
        <div>
            <span><b>Search:</b></span> <input class="search-client-input" type="text">
            <br><br>
            <table>
                <tbody id="customers-table">
                    @foreach($clients as $client)
                    <tr>
                        <td><input type='checkbox' name='client' value='{{ $client->document }}' data-name='{{ $client->first_name }}' data-id="{{ $client->id }}" /></td>
                        <td>{{ $client->document }}</td>
                        <td>{{ $client->first_name }}</td>
                        <td>
                            @foreach($client->tierPricings as $client->tierPrice)
                            <span class="badge badge-secondary">{{$client->tierPrice->name}}</span>
                            @endforeach
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div>
        <div>
            <h4><b>Selected Customers</b></h4>
            <br>
            <div class="selected-users-box">

            </div>
        </div>
    </div>
    <div>
        <h4><b>Choose Tier Pricing</b></h4>
        <br>
        <ul>
            @foreach($tierPricings as $tierPricing)
            <li>
                <input type="checkbox" name="tier_pricing" value="{{ $tierPricing->id }}" data-tier-id="{{ $tierPricing->tier_id }}" data-category-group-id="{{ $tierPricing->category_group_id }}"><span class="badge badge-secondary">{{ $tierPricing->name }}</span>
            </li>
            @endforeach
        </ul>
    </div>
    <div>
        <button id="submit-btn" class="btn btnAux pull-left">Submit</button>
    </div>
</div>

<style>
    /* Main tier-pricing-item grid */
    .bulk-assignment-wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(12, [col] 1fr);
    }

    /* Grid direct children */
    .bulk-assignment-wrapper>div {
        background-color: #fff;
        border-radius: 8px;
        padding: 30px;
        min-width: 300px;
    }

    .bulk-assignment-wrapper>div:first-child {
        grid-column: col 1 / span 12;
    }

    .bulk-assignment-wrapper>div:first-child>div, .bulk-assignment-wrapper>div:nth-child(2)>div {
        height: auto;
        max-height: 400px;
        overflow: auto;
    }

    .bulk-assignment-wrapper>div:nth-child(2) {
        grid-column: col 1 / span 4;
    }

    .bulk-assignment-wrapper>div:nth-child(3) {
        grid-column: col 5 / span 4;
    }

    .bulk-assignment-wrapper>div:nth-child(4) {
        background-color: transparent;
        grid-column: col 9 / span 4;
    }

    /* Search input */
    .search-client-input {
        border: 1px solid #dddddd
    }

    .search-client-input:focus {
        outline-width: 0;
    }

    /* Clients table */
    table {
        width: 100%;
    }

    td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    /* Selected users */
    .selected-users-box>div {
        border-bottom: 1px solid #dddddd;
        padding: 5px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
    }

    /* Tier Pricing list */
    .bulk-assignment-wrapper>div:nth-child(3) ul {
        padding: 0px;
        list-style-type: none;
    }

    .bulk-assignment-wrapper>div:nth-child(3) li {
        padding: 5px;
    }

    input[name=tier_pricing] {
        margin-right: 5px;
    }

    input[type=checkbox] {
        cursor: pointer;
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/create_filters_for_dataTables.js') }}"></script>
<script>
    $(document).ready(function() {
        // SEARCH BAR INPUT
        $(".search-client-input").on("keyup", function() {
            let value = $(this).val().toLowerCase();
            $("#customers-table tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        })

        $("#customers-table tr td a").each(function() {
            $(this).click(function() {
                let client_id = $(this).attr("data-client-id");
                $.ajax({
                    url: "/tier-pricing/get-names/" + client_id,
                    type: "GET",
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json'
                    },
                    success: function(r) {
                        renderModalWithCurrentTierPricings(r);
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            })
        })

        function setColorPerCategory(cat) {
            if (cat.startsWith('arch-')) {
                return "#0d6efd";
            } else if (cat.startsWith('railing-')) {
                return "#198754";
            } else if (cat.startsWith('shower-')) {
                return "#ffc107";
            } else {
                return "#6c757d";
            }
        }

        $("#customers-table tr td span").each(function() {
            $(this).css('backgroundColor', setColorPerCategory($(this).text().trim()));
        });

        $(".bulk-assignment-wrapper > div:nth-child(3) ul li > span").each(function() {
            $(this).css('backgroundColor', setColorPerCategory($(this).text().trim()));
        })

        // CLIENT CHECKBOXES
        $("#customers-table tr td input[name=client]").each(function() {
            $(this).click(function() {
                let data = {
                    id: $(this).attr('data-id'),
                    document: $(this).val(),
                    name: $(this).attr('data-name'),
                }
                if ($(this).prop("checked")) {
                    addClient(data);
                } else {
                    removeClient(data);
                }
            })
        })

        // SELECTED CLIENTS
        function addClient(data) {
            let child = `<div data-id=${data.id} data-document=${data.document}>${data.document} - ${data.name}</div>`;
            $(".selected-users-box").append(child);
        }

        function removeClient(data) {
            $(".selected-users-box > div").each(function() {
                if ($(this).text() == `${data.document} - ${data.name}`) {
                    $(this).remove();
                }
            });
        }

        // SUBMIT DATA
        $("#submit-btn").click(function() {
            // Validations
            let clients = getSelectedClients();
            let tierPricings = getSelectedTierPricings();

            if (clients.length == 0 || tierPricings.length == 0) {
                swal('', 'At least one client and one tier pricing must be selected.', 'info');
                return false;
            }

            swal({
                title: "",
                text: "Are you sure you want to set these new tier pricings?",
                buttons: true
            }).then(function(ok) {
                if (ok) {
                    makeRequest(clients, tierPricings);
                }
            })
        })

        function getSelectedClients() {
            const clients = [];
            $(".selected-users-box > div").each(function() {
                clients.push($(this).attr("data-id"));
            })
            return clients;
        }

        function getSelectedTierPricings() {
            const tier_pricings = [];
            $("input[name=tier_pricing]").each(function() {
                if ($(this).prop('checked')) {
                    let tier_pricing = {
                        id: $(this).val(),
                        category_group_id: $(this).attr("data-category-group-id"),
                        tier_id: $(this).attr("data-tier-id")
                    }
                    tier_pricings.push(tier_pricing);
                }
            })
            return tier_pricings;
        }

        function makeRequest(clients, tierPricings) {
            let payload = {
                clients: clients,
                tierPricings: tierPricings
            }
            const endpoint = "/tier-pricing/store-in-bulk";
            $.ajax({
                url: endpoint,
                type: "POST",
                contentType: 'application/json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(payload),
                beforeSend: function() {
                    $("#submit-btn").attr('disabled', true).text('Loading...');
                },
                complete: function() {
                    $("#submit-btn").attr('disabled', false).text('Submit');
                },
                success: function(r) {
                    if (r.status) {
                        swal('Success', r.message, 'success').then(function(ok) {
                            if (ok) {
                                location.reload();
                            }
                        });
                    } else {
                        swal('', r.message, 'info');
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        }

    });
</script>
@endsection