@extends('modules.head') @section('contenido')

<div class="main_wrapper">
    <div class="wrapper_component choose_bd">
        <h4>Choose sales agent:</h4>
        <select id="business_developer_select" class="form-control">
            <option value="0">Select...</option>
            @foreach($salesAgents as $salesAgent)
            <option value="{{ $salesAgent->id }}">{{ $salesAgent->first_name }} {{ $salesAgent->last_name }}</option>
            @endforeach
        </select>
    </div>
    <div id="states_counties_to_be_assigned_by_bd" class="wrapper_component choose_state" style="display:none">
        <h4>Choose state:</h4>
        <select name="states_select_container" class="form-control" id="states_select_container">
            <option value="0">Select...</option>
            @foreach($states as $state)
            @if( $state->has_counties )
            <option value="{{ $state->id }}">{{ $state->code }}</option>
            @endif
            @endforeach
        </select>
    </div>
    <div id="salesAgentsPerCounties" data-already-assigned-counties="{{ $salesAgentsPerCounties }}" class="wrapper_component assigned_counties" style="display:none">
        <select name="counties_added[]" id="counties_added" multiple>
        </select>
    </div>
    <div class="wrapper_component useful_info" style="display:none">
        <p>
            Hold down the Ctrl (windows) or Command (Mac) button to select multiple options.
        </p>
    </div>
    <div class="wrapper_component arrows_container" style="display:none">
        <div>
            Counties
        </div>
        <div class="arrow_some_left">
            <p><i class="arrow left" title="Link selected counties to chosen bd"></i></p>
        </div>
        <div class="arrow_some_right">
            <p><i class="arrow right" title="Unset relation between selected bd and counties"></i></p>
        </div>
    </div>
    <div class="wrapper_component counties_checkbox_container" id="counties_checkbox_container" data-counties="{{ $counties }}" style="display:none">
        <select name="counties_to_add" id="counties_to_add" multiple>
        </select>
    </div>
    <div class="wrapper_component assigned_states" style="display:none">
        <select name="states_added[]" id="states_added" multiple>
        </select>
    </div>
    <div class="wrapper_component arrows_container_states" style="display:none">
        <div>
            States
        </div>
        <div class="arrow_some_left_states">
            <p><i class="arrow left" title="Link selected states to chosen bd"></i></p>
        </div>
        <div class="arrow_some_right_states">
            <p><i class="arrow right" title="Unset relation between selected bd and states"></i></p>
        </div>
    </div>
    <div class="wrapper_component states_container" data-states="{{ $states }}" style="display:none">
        <select name="states_to_add" id="states_to_add" multiple>
            
        </select>
    </div>
    <div class="wrapper_component selection_btn" style="display:none">
        <button id="add_selection_btn">Save</button><br>
    </div>
</div>

@endsection
<style>
    .main_wrapper {
        display: grid;
        grid-gap: 0.25%;
        grid-template-columns: repeat(8, 12%);
    }

    .wrapper_component {
        border-radius: 5px;
        padding: 20px;
        font-size: 16px;
        background-color: white;
    }

    .wrapper_component h4 {
        color: #3c8dbc;
        margin-bottom: 5px;
    }

    .choose_bd {
        grid-area: 1 / 3 / 2 / 7;
    }

    .choose_state {
        grid-area: 1 / 5 / 2 / 13;
    }

    .useful_info {
        grid-area: 2 / 1 / 3 / 13;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
    }

    .assigned_counties {
        grid-area: 3 / 1 / 4 / 4;
    }

    .list-group-item {
        font-size: 13px;
    }

    #counties_added, #counties_to_add, #states_added, #states_to_add {
        width: 100%;
        padding: 10px;
        /* height: 55vh; */
    }

    #counties_added option, #counties_to_add option, #states_added option, #states_to_add option{
        font-size: 12px;
    }

    .arrows_container {
        grid-area: 3 / 4 / 4 / 6;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .arrows_container div, .arrows_container_states div{
        margin: 5px;
        padding: 5px;
        text-align: center;
        font-size: 15px;
    }

    .arrows_container div:not(:first-child), .arrows_container_states div:not(:first-child) {
        cursor: pointer
    }

    .counties_checkbox_container {
        grid-area: 3 / 6 / 4 / 13;
    }

    .assigned_states{
        grid-area: 5 / 1 / 6 / 4;
    }

    .arrows_container_states{
        grid-area: 5 / 4 / 6 / 6;
    }

    .states_container{
        grid-area: 5 / 6 / 6 / 13;
    }

    .selection_btn {
        grid-area: 7 / 1 / 8 / 13;
    }

    .selection_btn button {
        background-color: rgb(235, 28, 36);
        color: #fff;
        padding: 5px 10px;
        font-size: 16px;
        border-style: none;
        border-radius: 5px;
    }

    .arrow {
        border: 1px solid #3c8dbc;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 5px;
    }

    .right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    .left {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }

    .up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {

        let bd_selected = 0;
        let state_selected = 0;
        let countiesPerBD = JSON.parse($('#salesAgentsPerCounties').attr('data-already-assigned-counties')); // all the records in business_dev_per_counties DB
        let selected_bd_counties = [];
        let selected_bd_states = [];
        let counties = JSON.parse($('#counties_checkbox_container').attr('data-counties')); // all counties in bo_sales_tax_codes DB
        let states = JSON.parse($('.states_container').attr('data-states')); // all states in states DB

        // bd selection
        $('#business_developer_select').change(function() {
            bd_selected = $(this).val();
            $(`#salesAgentsPerCounties, .useful_info, #counties_checkbox_container, .arrows_container, 
               .assigned_states, .arrows_container_states, .states_container, .selection_btn`).hide();

            $('#states_select_container').val(0)
            $('#salesAgentsPerCounties ol').empty();
            $("#counties_added").empty();
            $("#states_added").empty();
            selected_bd_counties.length = 0;
            selected_bd_states.length = 0;

            if (bd_selected != 0) {
                $(`#salesAgentsPerCounties, .useful_info, #counties_checkbox_container, .arrows_container, 
               .assigned_states, .arrows_container_states, .states_container, .selection_btn`).show();
               
                countiesPerBD.forEach(function(item, index) {
                    if (item.user_id == bd_selected && item.state_id == null) {
                        $("#counties_added").append(`<option class="list-group-item" value="${item.bo_sales_tax_code_id}">
                          ${capitalizeString(item.bo_sales_tax_code.code)} (${item.bo_sales_tax_code.state.code})
                        </option>`)
                        selected_bd_counties.push({
                            'county_code': capitalizeString(item.bo_sales_tax_code.code),
                            'county_id': item.bo_sales_tax_code_id,
                            'user_first_name': item.user.first_name,
                            'bd_county_id': item.id,
                        });
                    }
                    else if (item.user_id == bd_selected && item.bo_sales_tax_code_id == null) {
                        $("#states_added").append(`<option class="list-group-item" value="${item.state_id}">
                           ${item.state.name}
                        </option>`)
                        selected_bd_states.push({
                            'state_code': item.state.code,
                            'state_id':  item.state_id,
                            'state_name': item.state.name
                        });
                    }
                })
                // hardcoded state id 10 (Florida) because is the only one with counties in DB
                $('#states_select_container').val(10).change();
            }
        });

        // state selection
        $('#states_select_container').change(function() {
            state_selected = $(this).val();
            let already_selected_counties = [];
            let already_selected_states = [];

            $('#counties_to_add').children().remove();
            $('#states_to_add').children().remove();

            countiesPerBD.forEach(function(i) {
                if (i.bo_sales_tax_code_id) {
                    already_selected_counties.push(i.bo_sales_tax_code_id);
                }
                if (i.state_id) {
                    already_selected_states.push(i.state_id);
                }
            })
            
            let filtered_counties = counties.filter(function(item) {
                return !already_selected_counties.includes(item.id)
            });
            
            filtered_counties.forEach((county, index) => {
                if (county.state_id == state_selected) {
                    $('#counties_to_add').append(`<option id="${county.id}" value="${county.id}" class="list-group-item">
                      ${capitalizeString(county.code)} (${county.state.code})
                    </option>`);
                }
            });
            let filtered_states = states.filter(function(item) {
                return !already_selected_states.includes(item.id)
            });
            filtered_states.forEach((state, index) => {
                   if(!state.has_counties){
                    $('#states_to_add').append(`<option id="${state.id}" value="${state.id}" class="list-group-item">
                      ${state.name}
                    </option>`);
                   }
                   
            });

        });

        // from left to right counties
        $('.arrow_some_left').click(function() {
            let new_counties = $('#counties_to_add').val();
            if (!new_counties) {
                swal('At least one county needs to be selected');
            } else {
                new_counties.forEach(function(new_county, index) {
                    $(`#counties_to_add option[value="${new_county}"]`).remove();
                    counties.forEach(function(county, i) {
                        if (county.id == new_county) {
                            $("#counties_added").append(`<option class="list-group-item" value="${county.id}">
                               ${capitalizeString(county.code)} (${county.state.code})
                             </option>`)
                        }
                    })
                })
            }

        });

        // from left to right counties
        $('.arrow_some_right').click(function() {
            let deleted_counties = $('#counties_added').val();
            let counties_in_left_select = [];
            $("#counties_added option").each(function() {
                counties_in_left_select.push($(this).val());
            });

            if (counties_in_left_select.length) {
                if (!deleted_counties) {
                    swal('At least one county needs to be selected');
                } else {
                    let reverted_array = deleted_counties.reverse();
                    if (reverted_array) {
                        reverted_array.forEach(function(deleted_county, index) {
                            counties.forEach(function(county, i) {
                                if (county.id == deleted_county) {
                                    if (county.state_id == state_selected) {
                                        $(`#counties_added option[value="${deleted_county}"]`).remove();
                                        $("#counties_to_add").prepend(`<option class="list-group-item" value="${county.id}">
                                           ${capitalizeString(county.code)} (${county.state.code})
                                         </option>`)
                                    } else {
                                        swal('County needs to be from the selected state');
                                    }

                                }
                            })
                        })
                    }
                }

            } else {
                swal('At least one county in left box is needed');
            }
        })

         // from left to right states
         $('.arrow_some_left_states').click(function() {
            let new_states = $('#states_to_add').val();
            if (!new_states) {
                swal('At least one state needs to be selected');
            } else {
                new_states.forEach(function(new_state, index) {
                    $(`#states_to_add option[value="${new_state}"]`).remove();
                    states.forEach(function(state, i) {
                        if (state.id == new_state) {
                            $("#states_added").append(`<option class="list-group-item" value="${state.id}">
                                  ${state.name}
                             </option>`)
                        }
                    })
                })
            }

        });

         // from left to right states
         $('.arrow_some_right_states').click(function() {
            let deleted_states = $('#states_added').val();
            let states_in_left_select = [];
            $("#states_added option").each(function() {
                states_in_left_select.push($(this).val());
            });

            if (states_in_left_select.length) {
                if (!deleted_states) {
                    swal('At least one state needs to be selected');
                } else {
                    let reverted_array = deleted_states.reverse();
                    if (reverted_array) {
                        reverted_array.forEach(function(deleted_state, index) {
                            states.forEach(function(state, i) {
                                if (state.id == deleted_state) {
                                    $(`#states_added option[value="${deleted_state}"]`).remove();
                                        $("#states_to_add").prepend(`<option class="list-group-item" value="${state.id}">
                                           ${state.name}
                                         </option>`)

                                }
                            })
                        })
                    }
                }

            } else {
                swal('At least one state in left box is needed');
            }
        })

        // submit new selection
        $('#add_selection_btn').click(function(e) {
            let counties_to_submit = [];
            let states_to_submit = [];
            $("#counties_added option").each(function() {
                counties_to_submit.push($(this).val());
            });
            $("#states_added option").each(function() {
                states_to_submit.push($(this).val());
            });

            if (!selected_bd_counties.length && !selected_bd_states.length && !counties_to_submit.length  && !states_to_submit.length) {
                swal('No county or state has been selected yet...')
            } else {
                let url = '/business-developer/new-state-and-counties';
                let data = {
                    bd: bd_selected,
                    state: state_selected,
                    counties: counties_to_submit,
                    states : states_to_submit
                }
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    data: data,
                    url: url,
                    success: function(r) {
                        if (r.status == 'success') {
                            swal({
                                title: "Success!",
                                text: r.message,
                                icon: "success"
                            }).then(function() {
                                location.reload();
                            })
                        }
                        else if (r.status == 'error'){
                            swal({
                                title: "Error",
                                text: r.message,
                                icon: "error"
                            }).then(function() {
                                location.reload();
                            })
                        }
                    },
                    error: function(e) {
                        console.log(e)
                    },
                });
            }



        })

    });

    function reRenderAssignedCounties(selector, response) {
        $(selector).empty();
        response.rows.forEach(function(row) {
            $(selector).append(
                `<li>${capitalizeString(row.bo_sales_tax_code.code)} (${row.bo_sales_tax_code.state.code})
                     <i class="fa fa-trash" data-row-id="${row.id}" data-user-id="${row.user_id}"></i>
                </li>`);
        })
    }

    function capitalizeString(str) {
        let stringToLower = str.toLowerCase();
        return stringToLower.charAt(0).toUpperCase() + stringToLower.slice(1);
    }
</script>