@extends('layouts.app')

@section('content')

<!-- PAGE HEADER -->
<div class="page-header">
    <div>
        <h1>Account Lists <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="btn btn-dark" id="createNewAccount" data-bs-toggle="modal"
            data-bs-target="#AccountModal">
            Add Account
        </button>
    </div>
</div>
<!-- PAGE HEADER END -->

<!-- ACCOUNT TABLE -->
<div class="content mt-3">
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Sr.</th>
                            <th>Account ID</th>
                            <th>Business Name</th>
                            <th>Name of POC</th>
                            <th>Phone</th>
                            <th>Last Update</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@include('view-modals/account_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,
            scrollX: true,
            ajax: "{{ url('getAccountListData?is_confirmed='.true) }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'account_code',
                    name: 'account_code'
                },
                {
                    data: 'business_name',
                    name: 'business_name'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'primary_phone',
                    name: 'primary_phone'
                },
                {
                    data: 'updated_at',
                    name: 'updated_at'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }

            ],
        });

        $('#createNewAccount').click(function() {
            resetModal();
            $('#saveBtn').val("Create");
            $('#modelHeading').html("Create New Account");
            $('#ajaxModel').modal('show');
        });

        $('body').on('click', '.editAccount', function() {
            var account_id = $(this).data('id');
            resetModal(); // clear form if you have this function

            $.get("{{ url('account/edit') }}/" + account_id, function(data) {
                $('#modelHeading').html("Edit Account");
                $('#saveBtn').val("Save Changes");
                $('#ajaxModel').modal('show');

                // Fill form fields
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#primary_phone').val(data.primary_phone);
                $('#secondary_phone').val(data.secondary_phone);
                $('#primary_email').val(data.primary_email);
                $('#secondary_email').val(data.secondary_email);
                $('#address').val(data.address);
            });
        });


        $('#saveBtn').click(function(e) {
            e.preventDefault();
            $.ajax({
                data: $('#dataForm').serialize(),
                url: "{{ url('account/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', '.deleteAccount', function() {
            var account_id = $(this).data('id');
            if (confirm("Are you sure you want to delete this account?")) {
                $.ajax({
                    type: "DELETE",
                    url: "{{ url('account/delete') }}/" + account_id,
                    success: function(data) {
                        table.draw();
                        alert("Account deleted successfully!");
                    },
                    error: function(data) {
                        alert("Error deleting account!");
                    }
                });
            }
        });

        function resetModal() {
            // Clear input values
            $("#first_name").val("");
            $("#middle_name").val("");
            $("#last_name").val("");
            $("#primary_phone_no").val("");
            $("#secondary_phone_no").val("");
            $("#primary_email").val("");
            $("#secondary_email").val("");
            $("#address").val("");

            // Remove red borders (is-invalid)
            $("#first_name").removeClass("is-invalid");
            $("#middle_name").removeClass("is-invalid");
            $("#last_name").removeClass("is-invalid");
            $("#primary_phone_no").removeClass("is-invalid");
            $("#secondary_phone_no").removeClass("is-invalid");
            $("#primary_email").removeClass("is-invalid");
            $("#secondary_email").removeClass("is-invalid");
            $("#address").removeClass("is-invalid");

            // Clear error messages
            $("#first_name-error").html("");
            $("#middle_name-error").html("");
            $("#last_name-error").html("");
            $("#primary_phone_no-error").html("");
            $("#secondary_phone_no-error").html("");
            $("#primary_email-error").html("");
            $("#secondary_email-error").html("");
            $("#address-error").html("");

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

    });
</script>
@stop