<style>
    .datepicker {
        z-index: 1151 !important;
    }
</style>
<!-- Add Film Modal -->
<div id="addFilmModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Film to Inventory</h4>
            </div>
            <div class="modal-body" style="height: 380px">
                <div id="addfilmFormMsg" class=""></div>
                <form id="addfilmForm" action="/">
                    <!--row 1-->
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon3">
                                *Material - Supplier:
                            </span>
                            <select class="form-control input-sm" id="mat_inventory_material_id_fk"
                                    name="mat_inventory_material_id_fk">
                                <option value="">Select Material - Supplier</option>
                                <?php if (isset($material_list)) { ?>
                                    <?php foreach ($material_list as $ml) { ?>
                                        <option value="<?php echo $ml->material_id; ?>">
                                            <?= $ml->mat_value; ?></option>
                                    <?php } ?>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">*Purchase Order Number:</span>
                            <input type="text" class="form-control input-sm" name="mat_inventory_po_number"
                                   id="mat_inventory_po_number"
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">*Film Width (mm):</span>
                            <input type="text" class="form-control numeric input-sm" name="mat_inventory_width"
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">Roll Weight (Kg):</span>
                            <input type="text" class="form-control numeric input-sm" name="mat_inventory_weight_kg"
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">Supplier Batch Number:</span>
                            <input type="text" class="form-control input-sm" name="mat_inventory_supplier_batch_no"
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">Film Length Meters:</span>
                            <input type="text" class="form-control numeric input-sm" name="mat_inventory_meters"
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon3">
                                *Film Status:
                            </span>
                            <select class="form-control input-sm" id="mat_inventory_status" name="mat_inventory_status">
                                <option value="">Select Status</option>
                                <?php if (isset($film_status_enum)) { ?>
                                    <?php foreach ($film_status_enum as $key => $s) { ?>
                                        <option value="<?= $s; ?>" <?php if ($key == 2): ?>selected <?php endif; ?>>
                                            <?= $key . ' - ' . $s; ?></option>
                                    <?php } ?>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">*Number of Rolls:</span>
                            <select class="form-control input-sm" id="mat_number_of_rolls" name="mat_number_of_rolls">
                                <?php for ($i = 1; $i < 11; $i++) : ?>
                                    <option value="<?= $i; ?>">
                                        <?= $i; ?></option>
                                <?php endfor; ?>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12 input-sm">
                        <input type="submit" value="Add Roll(s)" class="btn btn-primary input-sm"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--end of add film modal-->

<!-- Add RTS Modal -->
<div id="addRTSModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Film Returns To Stock</h4>
            </div>
            <div class="modal-body" style="height: 250px">
                <div id="addrtsFormMsg" class=""></div>
                <form id="addrtsForm" action="/">
                    <!--row 1-->
                    <div class="col-md-12 col-xs-12">
                        <p>You are about to return stock from Mother Roll:
                        <h3 id="rts-id" class="text-center"></h3></p>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm"
                                  id="sizing-addon2">(Mother Roll) Original Id:</span>
                            <input type="text" id="rts_mat_inventory_original_id"
                                   class="form-control input-sm typeahead" name="mat_inventory_original_id"
                                   placeholder="Scan Roll ID">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <div class="input-group input-sm">
                            <span class="input-group-addon input-sm" id="sizing-addon2">Weight to Return (Kg):</span>
                            <input type="text" class="form-control numeric input-sm" name="mat_inventory_weight_kg"
                                   aria-describedby="sizing-addon2">
                        </div>
                    </div>
                    <div class="col-md-12 col-xs-12 input-sm pull-right">
                        <input type="submit" value="Return" class="btn btn-primary input-sm"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--end of add rts modal-->

<div class="container-fluid">
    <div class="row">
        <div id="filminvMsg"></div>
        <div class="col-xs-10 col-md-10">
            <h3><?php echo $header ?></h3>
        </div>
        <div class="col-xs-1 col-md-1 pull-right">

        </div>
        <div class="col-xs-1 col-md-1 pull-right">
        </div>
        <div class="col-xs-12 col-md-12">
            <ul class="nav nav-tabs">
                <li class="<?php if ($header == "Film Inventory"): ?>active<?php endif; ?>"><a
                        href="<?= site_url("film_manager") ?>">Current</a></li>
                <li class="<?php if ($header == "Film Inventory History"): ?>active<?php endif; ?>"><a
                        href="<?= site_url("film_manager/h") ?>">History</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-md-12">
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <?php if ($header == "Film Inventory"): ?>
                        <?php if (isset($edit_permission) && ($edit_permission)) : ?>
                            <!--                            <a class="btn btn-primary" data-toggle="modal" data-target="#addFilmModal"-->
                            <!--                               style="cursor: pointer;"><span class="glyphicon glyphicon-plus-sign"></span> Add Film</a>-->
                            <!--                            <a class="btn btn-primary" data-toggle="modal" data-target="#addRTSModal"-->
                            <!--                               style="cursor: pointer;"><span class="glyphicon glyphicon-repeat"></span> Add RTS</a>-->
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
                <?php echo $table_content; ?>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        //adjust top padding
        document.body.style.paddingTop = '50px'
        //implement datatables with fixed header
        var table = $('.data-table').DataTable({
            fixedHeader: {
                headerOffset: $('.navbar').outerHeight()
            },
            colReorder: true,
            dom: '<lBfr<t>ip>',
            paging: false,
//            keys: true,
            buttons: [
                'colvis',
                'print',
                'copy'
            ],
            order: [[1, "asc"]]
        });
        //make rows clickable
        $(".clickable-row").dblclick(function () {
            window.document.location = $(this).data("href");
        });
        $('[data-toggle="tooltip"]').tooltip();

    });

    //     make inventory editable
    $('.editable').editable({
        success: function (data) {
//            console.log(data);
            if (typeof data == 'object' && !data.success) {
                return data.msg;
            }
        },
        error: function (xhr) {
            if (xhr.status == 500) {
                return 'Internal server error';
            }
            if (xhr.status == 404) {
                return 'Page not found error';
            }
            else {
                console.log(xhr);
                return xhr.responseText;
            }
        }
    });
    $('.rts-btn').click(function () {
        var $roll_id = $(this).attr('data-pk');
        var $roll_name = $(this).attr('data-roll');
        $('#rts_mat_inventory_original_id').val($roll_id);
        $('#rts-id').html($roll_id + " -- " + $roll_name);
    });

    //prevent backspace navigation
    $(document).on("keydown", function (e) {
        if (e.which === 8 && !$(e.target).is("input, textarea")) {
            e.preventDefault();
        }
    });

    <?php if (isset($edit_permission) && ($edit_permission)) : ?>
    // Attach a submit handler to the form
    $("#addfilmForm").submit(function (event) {
        // Stop form from submitting normally
        event.preventDefault()

        //post data to add film
        $.post("/film_manager/add_film", $("#addfilmForm").serialize(), "json").done(function (data) {
            console.log(data.post);
            $('#addfilmFormMsg').html(data.msg);
            $('#addfilmFormMsg').show();
            setTimeout(function () {
                $('#addfilmFormMsg ').hide('slow');
            }, 3000);
            //                reset and reload page
            if (data.errors == 'false') {
                document.getElementById("addfilmForm").reset();
                location.reload();
            }

        });
    });

    // Attach a submit handler to the form
    $("#addrtsForm").submit(function (event) {
        // Stop form from submitting normally
        event.preventDefault()

        //            console.log('here');

        //            post data to add rts
        $.post("/film_manager/film_rts", $("#addrtsForm").serialize(), "json").done(function (data) {
            console.log(data.post);
            $('#addrtsFormMsg').html(data.msg);
            $('#addrtsFormMsg').show();
            setTimeout(function () {
                $('#addrtsFormMsg ').hide('slow');
            }, 3000);
            //                reset and reload page
            if (data.errors == 'false') {
                document.getElementById("addrtsForm").reset();
                location.reload();
            }

        });
    });

    function unallocate($id) {
        console.log($id);
        $.post("/film_manager/unallocateRoll/" + $id, null, "json").done(function (data) {
//            console.log(data);
            $('#filminvMsg').html(data);
            $('#filminvMsg').show();
            setTimeout(function () {
                $('#filminvMsg ').hide('slow');
                location.reload();
            }, 1000);

        });
    }
    <?php endif; ?>

    // http://stackoverflow.com/a/22949859/2407309
    var backspaceIsPressed = false;
    $(document).keydown(function (event) {
        if (event.which == 8) {
            backspaceIsPressed = true;
        }
    });
    $(document).keyup(function (event) {
        if (event.which == 8) {
            backspaceIsPressed = false;
        }
    });
    $(window).on('beforeunload', function () {
        if (backspaceIsPressed) {
            backspaceIsPressed = false;
            return "Are you sure you want to leave this page?"
        }
    });

</script>