<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php echo $title; ?></div>
            <?php if ($permissions->hasPermission("add_route")) {
    echo Forms::FloatingAddButton('4c0870', '#route_modal', CommonLanguage::getMessage('add'), 'new_route'); }?>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-bordered general-table" id="tableWithSearch">
                    <thead>
                        <tr>
                            <th><?php print CommonLanguage::getMessage('Name') ?></th>
                            <th><?php print CommonLanguage::getMessage('color') ?></th>
                            <th><?php print CommonLanguage::getMessage('Action') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="route_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="bold add-label h-labels hidden"><?php echo CommonLanguage::getMessage('add_route'); ?></h5>
                <h5 class="bold edit-label h-labels hidden"><?php echo CommonLanguage::getMessage('edit_route'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('route_alert'); ?></div>
                <form id="route_form" method="POST" onsubmit="return false">
                    <input type='hidden' name='route_id' id='route_id'/>
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText">
                                <?php print CommonLanguage::getMessage('Name'); ?>
                                <span class="red-star">*</span>
                            </label>
                            <input type="text" id="route_name" name="route_name" class="form-control " required />
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class=" col-md-12  " >
                            <label class="labelText">
                                <?php print CommonLanguage::getMessage('color'); ?>
                            </label>
                            <input type="text" id="route_color" name="route_color" class="form-control " />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button style="color:white !important;" class="btn bg-primary-darker white" id="submit_route"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
            <?php echo Forms::ModalLoader('route_loader'); ?>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('#route_color').colorpicker({format: 'hex', autoInputFallback: false});
        RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'GeneralAjax/route_list');
        $('#tableWithSearch').on('click', '.delete', function () {
            var route_id = $(this).parents('div.Action').attr('data-id');
            IncludeDeleteModal(common_delete_modal, {route_id: route_id}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'GeneralAjax/route_list');
            }, "GeneralAjax/deleteRoute");
        });
        $(".new_route").on("click", function () {
            $("#route_id").val(0);
            $('#route_modal .add-label').removeClass('hidden');
        });
        $("#tableWithSearch").on("click", ".edit", function () {
            var route_id = $(this).parents('div.Action').attr('data-id');
            $("#route_id").val(route_id);
            $('#route_modal .edit-label').removeClass('hidden');
            $("#route_name").val($(this).parents('tr').find('td:eq(0)').html());
            $("#route_color").val($(this).parents('tr').find('td:eq(1) .route_color').attr('color') ? $(this).parents('tr').find('td:eq(1) .route_color').attr('color') : '');
        });
        $("#submit_route").on("click", function () {
            if (!$("#route_form").valid())
                return;
            $("#route_loader").removeClass('hidden');
            var Data = new FormData(document.getElementById("route_form"));
            $.ajax({
                url: "GeneralAjax/submitRoute",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            RebuildDataTable($('.panel-heading .panel-title').html(), [0], 'GeneralAjax/route_list');
                            hideModalAlert('route_modal', 'route_alert');
                        }
                        AddAlert("#route_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#route_loader").addClass('hidden');
                }
            });
        });
    });

</script>