@extends('layout.master')
@section('content')
    <div class="container-fluid">
        <!-- Start::page-header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Lead Details</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ url('/lead') }}">Lead Screen</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Lead Details</li>
                </ol>
            </div>
        </div>
        @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                {{ session('success') }}
                               
                            </div>
                        @endif    
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="card-title">
                            Deposit
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#exampleModalScrollable2">
                            <i class="bi bi-plus"></i> Add Deposit
                        </button>

                        {{-- <button class="btn btn-primary">
                            <i class="bi bi-plus"></i> Add Deposit
                        </button> --}}
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable-basic" class="table table-bordered text-nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Lead Name</th>
                                        <th>Agent Name</th>
                                        <th>Date</th>
                                        <th>Deposit</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="addappenrow">
                                    @foreach ($leads->deposit as $agent)
                                        <tr>
                                            <td>{{ $leads->fullname }}</td>
                                            <td><span class="tag tag-dark mt-1 mb-1">{{ $agent->agents->name ?? "User Delete"  }}</span></td>
                                            <td>${{ number_format($agent->deposit ?? 0, 2) }}</td>
                                            <td>{{ $agent->depositDate }}</td>

                                            <td>
                                            <button class="btn btn-warning btn-sm editBtn" 
                                                    data-id="{{ $agent->id }}" 
                                                    data-amount="{{ $agent->deposit ?? '' }}" 
                                                    data-date="{{ $agent->depositDate ?? '' }}">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <form id="delete-form-{{ $agent->id }}" action="{{ route('lead.depositdestroy', $agent->id) }}" method="POST" style="display: none;">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                            <button class="btn btn-danger btn-sm" onclick="confirmDelete({{ $agent->id  }})">
                                                        <i class="bi bi-trash"></i>
                                                    </button>                                            </td>
                                        </tr>
                                    @endforeach


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div class="card-title">
                            Comments
                        </div>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#addCommentModal">
                            <i class="bi bi-plus"></i> Add Comment
                        </button>

                        {{-- <button class="btn btn-primary">
                            <i class="bi bi-plus"></i> Add Deposit
                        </button> --}}
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="comment-datatable" class="table table-bordered text-nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Comment</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="addappenrowcomment">
                                    @foreach ($comments as $comment)
                                        <tr>
                                            <td>{{ $comment->date }}</td>
                                            <td>
                                                <p class="w-50 mb-0">{{ $comment->comment }}</p>
                                            </td>
                                            <td>
                                           
                                            <form id="delete-form1-{{ $comment->id }}" action="{{ route('comments.destroy', $comment->id) }}" method="POST" style="display: none;">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                            <button class="btn btn-danger btn-sm" onclick="confirmDeleteComment({{ $comment->id  }})">
                                                        <i class="bi bi-trash"></i>
                                                    </button>                                             </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Add Deposit modal --}}
        <div class="modal fade" id="exampleModalScrollable2" tabindex="-1" aria-labelledby="exampleModalScrollable2"
            data-bs-keyboard="false" aria-hidden="true">
            <!-- Scrollable modal -->
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="staticBackdropLabel2">Add Deposit</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="addDeposit">
                        <div class="modal-body">
                            <!-- <label for="d-name" class="form-label fs-14 text-dark">Deposit Name</label>
                                    <input type="text" class="form-control mb-2" id="d-name" placeholder="Enter Deposit Name"> -->
                            <label for="amount" class="form-label fs-14 text-dark">Deposit Amount</label>
                            <div class="input-group mb-3">
                                <span class="input-group-text">$</span>
                                <input type="hidden" name="_token" id="csrf_token" value="{{ csrf_token() }}">
                                <input type="hidden" id="leadid" value="{{ $leads->id }}">
                                <input type="hidden" id="leadname" value="{{ $leads->fullname }}">
                                <input type="hidden" id="agentname" value="{{ Auth::user()->name }}">

                                <input type="number" id="depositAmount" class="form-control"
                                    aria-label="Amount (to the nearest dollar)" placeholder="Enter Deposit Amount">
                                {{-- <span class="input-group-text">.00</span> --}}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Add Comment modal --}}
        <div class="modal fade" id="addCommentModal" tabindex="-1" aria-labelledby="addCommentModal"
            data-bs-keyboard="false" aria-hidden="true">
            <!-- Scrollable modal -->
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="staticBackdropLabel2">Comment</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="addComment">
                        <div class="modal-body">
                            <label for="comm" class="form-label fs-14 text-dark">Comment</label>
                            <textarea class="form-control" id="comm" rows="4" placeholder="Write comment here..."></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Add</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>



        <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editModalLabel">Edit Deposit</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editForm" method="POST" action="{{ route('deposit.update') }}">
                            @csrf
                            <input type="hidden" name="id" id="lead_id">
                            
                            <div class="mb-3">
                                <label for="depositAmount" class="form-label">Deposit Amount</label>
                                <input type="number" class="form-control" id="depositAmo" name="deposit_amount" required>
                            </div>

                            <div class="mb-3">
                                <label for="depositDate" class="form-label">Deposit Date</label>
                                <input type="date" class="form-control" id="depositDate" name="deposit_date" required>
                            </div>

                            <button type="submit" class="btn btn-primary">Update</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".editBtn").forEach(button => {
                button.addEventListener("click", function() {
                    var id = this.getAttribute("data-id");
                    var amount = this.getAttribute("data-amount");
                    var date = this.getAttribute("data-date");
                    //alert("ID: " + id + ", Amount: " + amount + ", Date: " + date);
                    document.getElementById("lead_id").value = id;
                    document.getElementById("depositAmo").value = amount;
                    document.getElementById("depositDate").value = date;

                    var editModal = new bootstrap.Modal(document.getElementById("editModal"));
                    editModal.show();
                });
            });
        });


        function confirmDelete(leadId) {
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + leadId).submit();
                }
            });
        }


        function confirmDeleteComment(leadId) {
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form1-' + leadId).submit();
                }
            });
        }


    </script>
    <script>
        $(document).ready(function() {
            $('#addDeposit').submit(function(e) {
                e.preventDefault(); // Form submit hone se roko

                // Form values le lo
                var depositAmount = $('#depositAmount').val();
                var leadid = $('#leadid').val();
                var leadname = $('#leadname').val();
                var agentname = $('#agentname').val();
                var csrf_token = $('#csrf_token').val();

                // AJAX request bhejo
                $.ajax({
                    url: '{{ route('lead.addDeposit') }}', // Laravel ka route
                    type: 'POST',
                    data: {
                        depositAmount: depositAmount,
                        leadid: leadid,
                        _token: csrf_token // CSRF token bhejna zaroori hai
                    },
                    success: function(response) {
                        if (response.status == 200) {
                            alert("Agent successfully added!");
                            var newRow = `
                            <tr>
                                <td>${leadname}</td>
                                <td><span class="tag tag-dark mt-1 mb-1">${agentname}</span></td>
                                <td>$${response.depo.deposit}.00</td>
                                <td>${response.depo.depositDate}</td>
                                <td>
                                    <button class="btn btn-warning btn-sm"><i class="bi bi-pencil"></i></button>
                                    <button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                        `;
                            $('#addappenrow').append(newRow);
                            $(function() {
                                $('#exampleModalScrollable2').modal('toggle');
                            });
                            // $('#addappenrow')[0].reset(); // Form clear karo
                        } else {
                            alert("Something went wrong!");
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("Error: " + xhr.responseText);
                    }
                });
            });



            $('#addComment').submit(function(e) {
                e.preventDefault(); // Form submit hone se roko

                // Form values le lo
                var comment = $('#comm').val();
                var leadid = $('#leadid').val();

                var csrf_token = $('#csrf_token').val();

                // AJAX request bhejo
                $.ajax({
                    url: '{{ route('comments.store') }}', // Laravel ka route
                    type: 'POST',
                    data: {
                        comment: comment,
                        leadid: leadid,
                        _token: csrf_token // CSRF token bhejna zaroori hai
                    },
                    success: function(response) {
                        if (response.status == 200) {
                            alert("Comment successfully added!");
                            var newRow = `
                            <tr>
                                <td>${response.date}</td>
                                <td>${comment}</td>
                                <td>
                                    <button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
                                </td>
                            </tr>
                        `;
                            $('#addappenrowcomment').append(newRow);
                            $(function() {
                                $('#addCommentModal').modal('toggle');
                            });
                            // $('#addappenrowcomment')[0].reset(); // Form clear karo

                        } else {
                            alert("Something went wrong!");
                        }
                    },
                    error: function(xhr, status, error) {
                        alert("Error: " + xhr.responseText);
                    }
                });
            });

            $('#comment-datatable').DataTable({
                "pageLength": 50
            });
        });
    </script>
@endsection