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

@php $priorities = ['P0'=>'P0', 'P1'=>'P1', 'P2'=>'P2','P3'=>'P3', 'P4'=>'P4']; @endphp


<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Roofs <small>List & Management</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="createNewProduct" data-bs-target="#ProgramModel"> Add Site / Roof</button>
    </div>

</div>
<!-- PAGE-HEADER END -->


<div class="content mt-3">

    <div class="card shadow mb-4">

        <div class="card-body">
            <div class="">
                <div class="table-responsive">
                    <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Sr.</th>
                                <th>Title</th>
                                <th>Last Updated At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
</div>


@include('view-modals/add_site')

@stop


@section('scripting')

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

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


        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('getSitesData') }}/" + lead_id,
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }
        });

        table.on('draw', function() {
            $('[data-toggle="tooltip"]').tooltip({
                placement: 'top',
            });
        });


        $('#createNewProduct').click(function() {

            let lead_id = "{{ $lead->id }}";
            reset_modal();

            $('#saveBtn').val("Create");
            $('#lead_id').val(lead_id);
            $('#dataForm').trigger("reset");
            $('#modelHeading').html("Create New Site / Roof");
            $('#ajaxModel').modal('show');
        });

        $('body').on('click', '.editSite', function() {
            var site_id = $(this).data('id');
            $.get("/site/edit/" + site_id, function(data) {
                $('#modelHeading').html("Edit Site");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');
                $('#lead_id').val(data.lead_id);
                $('#site_id').val(data.id);
                $('#title').val(data.title);
                $('.standardSelect').selectpicker('refresh');
            });

        });


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

            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('lead/add_site') }}",
                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', '.commentLead', function() {
            var product_id = $(this).data('id');
            reset_modal_comment();

            $.get("{{ url('get_lead_details') }}" + '/' + product_id, function(data) {
                $('#commentModel').modal('show');
                $('#modelHeading').html("Assign Lead");
                $('#lead_id_c').val(product_id);
                $('#priority_c').val(data.priority);
                $('#stage_id_c').val(data.stage_id_fk);
                $('#comment').val('');
                $('.standardSelect').selectpicker('refresh');
            })
        });



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

            $.ajax({
                data: $('#commentForm').serialize(),
                url: "{{ url('lead/store_comment') }}",
                type: "POST",
                dataType: 'json',

                success: function(data) {
                    $('#commentForm').trigger("reset");
                    $('#commentModel').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]);
                        });
                    }
                    $('#saveCommentBtn').html('Save Changes');
                }
            });
        });



    });


    function reset_modal() {
        $("#lead_id").val("");
        $("#title").val("");

        $("#lead_id").removeClass("is-invalid");
        $("#title").removeClass("is-invalid");

        $("#lead_id-error").html("");
        $("#title-error").html("");

        $('#saveBtn').html('Save Changes');
    }

    function reset_modal_comment() {
        $("#cat_id").val("");
        $("name").val("");
        //$('#status').val("").trigger("chosen:updated");
        $('#status').val("");
        $('.standardSelect').selectpicker('refresh');

        $("#name").removeClass("is-invalid");
        $("#country_id_fk").removeClass("is-invalid");
        $("#status").removeClass("is-invalid");

        $("#name-error").html("");
        $("#country_id_fk-error").html("");
        $("#status-error").html("");

        $('#saveBtn').html('Save Changes');
    }
</script>


@endsection