@extends('layouts.app')
@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Preventive Maintenance <small>List & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Preventive Maintenance</a></li>
            <li class="breadcrumb-item active" aria-current="page">Manage</li>
        </ol>
    </div>

    <div class="float-end">
        <a class="btn btn-primary float-end" href="javascript:void(0)" id="createNewMaintenance"><i class="fa fa-plus"></i> Create Maintenance</a>
    </div>
</div>

<div class="content mt-3">

    <div class="card">

        <div class="card-header">
            Preventive Maintenance List
        </div>

        <div class="card-body">
            <table class="table table-bordered table-hover data-table" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Project</th>
                        <th>Previous Maintenance</th>
                        <th>Next Maintenance</th>
                        <th>Assigned Team Member</th>
                        <th>Created At</th>
                        <th>Updated At</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
</div>

@include('view-modals/preventive_maintenance_addedit')

@stop

@section('scripting')

<script type="text/javascript">
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('getPreventiveMaintenancesData') }}",
            columns: [
                {data: 'id', name: 'id'},
                {data: 'project_id', name: 'project_id'},
                {data: 'previous_maintenance_date', name: 'previous_maintenance_date'},
                {data: 'next_maintenance_date', name: 'next_maintenance_date'},
                {data: 'assigned_team_member_id', name: 'assigned_team_member_id'},
                {data: 'created_at', name: 'created_at'},
                {data: 'updated_at', name: 'updated_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ],

            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }
        });

        $('#createNewMaintenance').click(function () {
            reset_modal();
            $('#saveBtn').val("Create");
            $('#dataForm').trigger("reset");
            $('#modelHeading').html("Create New Maintenance");
            $('#ajaxModel').modal('show');
        });

        $('body').on('click', '.editMaintenance', function () {
            var maintenance_id = $(this).data('id');
            reset_modal();
            $.get("{{ url('preventive_maintenance/edit') }}" + '/' + maintenance_id, function (data) {
                $('#modelHeading').html("Edit Maintenance");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');
                $('#maintenance_id').val(data.id);
                $('#project_id').val(data.project_id);
                $('#previous_maintenance_date').val(data.previous_maintenance_date);
                $('#next_maintenance_date').val(data.next_maintenance_date);
                $('#assigned_team_member_id').val(data.assigned_team_member_id);
            });
        });

        $('#saveBtn').click(function (e) {
            e.preventDefault();
            $(this).html('Sending..');

            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('preventive_maintenance/store') }}",
                type: "POST",
                dataType: 'json',

                success: function (data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    swal({
                        title: "Good job!",
                        text: data.msg,
                        icon: "success",
                    });
                },
                error: function (data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function (index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });

        // Delete Maintenance
        $('body').on('click', '.deleteMaintenance', function () {
            var maintenance_id = $(this).data("id");
            swal({
                title: "Are you sure?",
                text: "Once deleted, you will not be able to recover this file!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
            .then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('preventive_maintenance/delete') }}" + '/' + maintenance_id,
                        success: function (data) {
                            table.draw();
                            swal("Great! Maintenance has been deleted!", {
                                icon: "success",
                            });
                        },
                        error: function (data) {
                            console.log('Error:', data);
                        }
                    });
                } else {
                    swal("Your delete request has been cancelled!");
                }
            });
        });

        function reset_modal() {
            $("#project_id").val("");
            $("#previous_maintenance_date").val("");
            $("#next_maintenance_date").val("");
            $("#assigned_team_member_id").val("");

            $(".is-invalid").removeClass("is-invalid");
            $(".invalid-feedback").html("");
            $('#saveBtn').html('Save Changes');
        }
    });
</script>
@stop