@extends('modules.head') @section('contenido')
<div class="assign-counties-to-branch-container">
    <div class="form-row">
        <div class="form-group col-md-4">
            <b>Select a Branch:</b><br />
            <select id="branch" class="form-control" name="branch">
                <option value="0" selected>Select a Branch...</option>
                @foreach($branches as $branch)
                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group col-md-4 dvStates hide">
            <b>Select a State:</b><br />
            <select id="states" class="form-control" name="states">
                <option value="0" selected>Select a State...</option>
                <option value="10">FL</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <div class="map-legend-container form-group col-md-5">
            <div id="map-container">

            </div>
            <div id="branch-colors-legend" class="hide">
                @foreach($branches as $branch)
                <span class="branch-short-name">{{ $branch->short_name }} <span class="dot" style="background-color:{{ $branch->branchColor->value }}"></span></span>
                @endforeach
            </div>
        </div>
        <div class="form-group col-md-3 dvAddtoBranch">
            <span></span><b></b><br />
            <ul id="selected-counties" class="list-group"> </ul>
            <button id="submit-btn" class="btn btnAux submit-btn hide">Add counties</button>
        </div>
    </div>
</div>
<style type="text/css">
.assign-counties-to-branch-container {padding: 20px;background-color: #fff;min-height: 700px;}
.hide {display: none;}
.map-legend-container {display: flex;flex-direction: column;justify-content: flex-start;}
.dot {height: 15px;width: 15px;border-radius: 50%;display: inline-block;}
.branch-short-name{margin-right: 10px;}
#selected-counties{max-height: 330px;overflow-y:scroll;}
.fa-trash{float: right;color: #eb1c24}
.sel { fill: #aba8ab;}
</style>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script type="text/javascript">
$(function(){
    let branchName = "";
    $("#branch").change(function(){
        if($(this).val() !== 0) {
            $(".dvStates").removeClass("hide");
            branchName = $(this).find("option:selected").text();
            console.log(branchName);
        }
        else {
            $(".dvStates").addClass("hide");
        }
    });

    $("#states").change(function() {
        $('#map-container').empty();
        $('#branch-colors-legend').addClass('hide');
        if ($(this).val() != "") {
            $.ajax({
                type: 'get',
                url: `/deliveries/${$(this).val()}/get-map-to-render`,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(r) {
                    $('#map-container').append(r);
                    $('#branch-colors-legend').removeClass('hide');
                    if ($('#counties-with-branch').length > 0) {
                        let countiesWithBranch = JSON.parse($('#counties-with-branch').attr('data-counties-with-branch'));
                        addColorToCountyBasedOnAssignedBranch(countiesWithBranch);
                    }
                }
            })
        }
    })

    // adding colors to swv counties
    function addColorToCountyBasedOnAssignedBranch(countiesWithBranch) {
        for (let i = 0; i < countiesWithBranch.length; i++) {
            let countyWithBranch = countiesWithBranch[i];
            let countyWithoutCountyWord = countyWithBranch['name'].slice(0, countyWithBranch['name'].indexOf('County')).trim();
            $(`[id='${countyWithoutCountyWord}']`).css('fill', countyWithBranch.branch.branch_color.value);
        }

    }

    $("#map-container").on("click", "svg path", function(){
        let span = $(".dvAddtoBranch span");
        let b = $(".dvAddtoBranch b");
        span.text("");
        b.text("");
        span.text("Add to branch: ");
        //b.text($("#branch option:selected").text());
        //b.text(branchName);
        $(this).toggleClass("sel");
        console.log($(this).attr("id"));
    });

    // When clicking add counties
    $('#submit-btn').click(function() {
        let branch = $('#branch').val();
        if (!branch.trim()) {
            swal('', 'Please select a branch', 'info');
            return false;
        }

        let stateId = $('#states').val();
        if (!stateId.trim()) {
            swal('', 'No state selected', 'info');
            return false;
        }

        let selectedCounties = [];
        $('.selected-county').each(function(index, e) {
            let countyName = $(this).attr('data-county-name').trim();
            selectedCounties.push(countyName);
        });

        if (!selectedCounties.length) {
            swal('', 'At least one county must be selected', 'info');
            return false;
        }

        let data = {
            branchId: branch,
            stateId: stateId,
            selectedCounties: selectedCounties
        }

        if (data.branchId && data.stateId && data.selectedCounties.length) {
            $.ajax({
                type: 'post',
                url: `/deliveries/zoning/save-branch-id-in-counties-table`,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: data,
                success: function(r) {
                    if (r.status) {
                        swal('Success', r.message, 'success').then(function(val) {
                            if (val) {
                                location.reload();
                            }
                        });
                    } else {
                        swal('', r.message, 'info');
                    }
                },
                error: function(e) {
                    console.log(e)
                }
            })
        } else {
            swal('Missing fields', 'Your request was not made', 'info');
        }
    })
});
</script>
@endsection