@extends('layouts.app')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">


<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>My Service Requests <small>List</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

    <div class="float-end">
        <button type="button" class="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-scale"
            data-bs-toggle="modal" id="createNewTemplate" data-bs-target="#ProgramModel"> Add Service Request</button>
    </div>
</div>
<div class="content mt-3">
    <!-- Default box -->
    <div class="card">

        <div class="card-body">
            <table class="table table-bordered table-hover data-table" width="100%">
                <thead>
                    <tr>
                        <th>Sr.</th>
                        <th>Code</th>
                        <th>Issue</th>
                        <th>Category</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Last Update</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

@include('view-modals/srequest_addedit')

@stop


@section('scripting')

<script type="text/javascript">
    $(document).ready(function() {

        $(".standardSelect").selectpicker();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX:true,
            ajax: "{{ url('getRequestsData') }}",

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'issue',
                    name: 'issue'
                },
                {
                    data: 'category',
                    name: 'category'
                },
                {
                    data: 'priority',
                    name: 'priority'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    orderable: false,
                    searchable: false
                }


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

        $('#createNewTemplate').click(function() {
            reset_modal();
            $('#saveBtn').val("Create");
            $('#status').val('').trigger("chosen:updated");
            $('#dataForm').trigger("reset");
            $('#modelHeading').html("Create Service Request");
            $('#ajaxModel').modal('show');
        });


        $('body').on('click', '.editProduct', function() {
            var product_id = $(this).data('id');
            reset_modal();
            $.get("{{ url('project_template/edit') }}" + '/' + product_id, function(data) {
                $('#modelHeading').html("Edit Category");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');
                $('#cat_id').val(data.id);
                $('#name').val(data.name);
                $('#status').val(data.status);
                $('.standardSelect').selectpicker('refresh');
            })
        });


        $('#account_id').on('change', function() {
            const accountId = $(this).val();

            $('#lead_id').empty().append('<option value="">-- Select Site --</option>');


            if (accountId) {
                // Fetch Leads
                $.ajax({
                    url: '/ajax/leads-by-account/' + accountId,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, value) {
                            $('#lead_id').append('<option value="' + key + '">' + value + '</option>');
                        });
                        $('.standardSelect').selectpicker('refresh');
                    }
                });
            }
        });


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

            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('my_requests/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');
                }
            });
        });

        $('body').on('click', '.deletetemplate', function() {

            var product_id = $(this).data("id");

            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {

                        $.ajax({
                            type: "GET",
                            url: "{{ url('project_template/delete') }}" + '/' +
                                product_id,
                            success: function(data) {
                                table.draw();
                                swal("Great! Template has been deleted!", {
                                    icon: "success",
                                });
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    } else {
                        swal("Your Template delete request Cancelled!")
                    }

                })


        });

        $('.standardSelect').selectpicker('refresh');

        //$(".standardSelect").select2();

    });


   function reset_modal() {
    // Reset field values
    $("#category").val("");
    $("#issue").val("");
    $("#priority").val("");
    $("#status").val("");

    // Reset select pickers (if used)
    $('.standardSelect').selectpicker('refresh');

    // Remove error styles
    $("#category, #issue, #priority, #status").removeClass("is-invalid");

    // Clear error messages
    $("#category-error, #issue-error, #priority-error, #status-error").html("");

    // Reset button text
    $('#saveBtn').html('Save Changes');
}

</script>
@stop