@extends('admin.layout')



@section('content')



<style>

    .table tbody tr td:last-child {

        text-align: center !important;

    }



    .table tbody tr td:last-child {

        text-align: center !important;

    }

</style>



<div class="page-header flex justify-between items-center mb-8">

    <h4 class="page-title mb-0">Lead</h4>

    <div class="flex items-center gap-4">

        <button class="btn btn-primary add-lead-btn" data-bs-toggle="modal" data-bs-target="#addLeadModal">

            Add Lead

        </button>

<select id="statusFilter" name="status" class="border border-gray-300 px-4 py-2 rounded">

    <option value="">-- Select Status --</option>

    <option value="New" {{ request('status') == 'New' ? 'selected' : '' }}>New</option>

    <option value="Rejected" {{ request('status') == 'Rejected' ? 'selected' : '' }}>Reject</option>

    <option value="Call Back" {{ request('status') == 'Call Back' ? 'selected' : '' }}>Callback</option>

    <option value="RNR" {{ request('status') == 'RNR' ? 'selected' : '' }}>RNR</option>

    <option value="Prospect" {{ request('status') == 'Prospect' ? 'selected' : '' }}>Prospect</option>

    <option value="Junk" {{ request('status') == 'Junk' ? 'selected' : '' }}>Junk</option>

    <option value="Not Reachable" {{ request('status') == 'Not Reachable' ? 'selected' : '' }}>Not Reachable</option>

</select>



    </div>

</div>





<div class="row mt-2 d-flex justify-content-center">

    <div class="col-lg-12">

        <div class="card">

            <div class="card-body">

                <!-- Filter Options -->

                {{-- <div class="row mt-3">

                                <div class="col-lg-12">

                                    <form id="filter-form">

                                        <div class="form-group row">

                                            <div class="col-lg-3">

                                                <label for="date_from" class="form-label">Date From:</label>

                                                <input type="date" class="form-control" id="date_from" name="date_from">

                                            </div>

                                            <div class="col-lg-3">

                                                <label for="date_to" class="form-label">Date To:</label>

                                                <input type="date" class="form-control" id="date_to" name="date_to">

                                            </div>

                                            <div class="col-lg-3">

                                                <label for="user_id" class="form-label">Search User ID:</label>

                                                <input type="text" class="form-control" id="user_id" name="user_id" placeholder="Enter User ID">

                                            </div>

                                            <div class="col-lg-3 align-self-end mt-2">

                                                <button type="submit" class="btn btn-primary">

                                                    <i class="fas fa-search"></i> Filter

                                                </button>

                                            </div>

                                        </div>

                                    </form>

                                </div>

                            </div> --}}

                <!-- Table -->



                <div class="table-responsive mt-3">

                    <table id="datatable" class="datatables display table table-striped" style="min-width: 845px">

                        <thead>

                            <tr>

                                <th>#</th>

                                <th>Date</th>

                                <th>Name</th>

                                <th>Phone Number</th>

                                <th>Email</th>

                                <th>Requirement</th>

                                <th>Estimate</th>

                                <th>Source</th>

                                <th>Status</th>

                                <th>Assigned To</th>

                                <th>Action</th>

                            </tr>

                        </thead>

                        <tbody>

                            @foreach ($datatables as $data)

                            <tr>

                                <td>{{ $loop->iteration }}</td>

                                <td>{{ $data->created_at}}</td>

                                <td>{{ $data->name }}</td>

                                <td>{{ $data->phone }}</td>

                                <td>{{ $data->email }}</td>

                                <td>{{ $data->requirement }}</td>

                                <td>{{ $data->estimate }}</td>

                                <td>{{ $data->source}}</td>

                                 <td>{{ $data->status }}</td>

                                <td>{{ $data->assigned_to  ?? "Not Assigned"}}</td>

                                <td>

                                    <div class="gap-2">

                                        <button class="badge bg-success border-0" data-bs-toggle="modal" data-bs-target="#assignStaffModal" data-user-id="{{ $data->id }}"

                                            onclick="setAcceptId(this)">Assign To</button>

                                         <a href="{{ route('staff.profile', ['id' => $data->id]) }}" class="badge bg-primary text-decoration-none">View</a>



                                        <a href="{{ route('delete_lead', $data->id) }}"

                                        onclick="return confirm('Are you sure you want to delete this lead?');"

                                        class="badge bg-danger text-white">

                                        Delete

                                        </a>



                                    </div>

                                </td>

                               

                            </tr>

                            @endforeach

                        </tbody>

                    </table>

                </div>

                

            </div>

        </div>

    </div>

</div>











<!-- Modal for Add Lead -->

<div class="modal fade" id="addLeadModal" tabindex="-1" aria-labelledby="addLeadModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <form action="{{ route('staff.create_lead') }}" method="POST">

            @csrf

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="addLeadModalLabel">Add New Lead</h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>

                <div class="modal-body">

                    <div class="mb-3">

                        <label for="name" class="form-label">Name</label>

                        <input type="text" name="name" id="name" class="form-control" required>

                    </div>

                    <div class="mb-3">

                        <label for="phone" class="form-label">Phone</label>

                        <input type="text" name="phone" id="phone" class="form-control" required>

                    </div>

                     <div class="mb-3">

                        <label for="phone" class="form-label">Email</label>

                        <input type="mail" name="email" id="email" class="form-control" required>

                    </div>

                    <div class="mb-3">

                        <label for="source" class="form-label">Source</label>

                        <select name="source" id="source" class="form-select" required>

                            <option value="Google ads">Google Ads</option>

                            <option value="Meta ads">Meta Ads</option>

                        </select>

                    </div>

                    <div class="mb-3">

                        <label for="type" class="form-label">Type</label>

                        <select name="type" id="type" class="form-select" required>

                            <option value="Mobile App">Mobile App</option>

                              <option value="website">Website</option>

                                <option value="software">Software</option>

                        </select>

                    </div>

                    <div class="mb-3">

                        <label for="mode" class="form-label">Mode</label>

                        <select name="mode" id="mode" class="form-select" required>

                            <option value="Call">Call</option>

                            <option value="Whatsapp">Whatsapp</option>

                            <option value="Reference">Reference</option>

                             <option value="Form Submit">Form Submit</option>

                             <option value="Form Submit">Call</option>

                        </select>

                    </div>

                    <div class="mb-3">

                        <label for="requirement" class="form-label">Requirement</label>

                        <textarea name="requirement" id="requirement" rows="3" class="form-control" required></textarea>

                    </div>

                </div>

                <div class="modal-footer">

                    <button type="submit" class="btn btn-primary">Add Lead</button>

                </div>

            </div>

        </form>

    </div>

</div>

















<div class="modal fade" id="assignStaffModal" tabindex="-1" aria-labelledby="assignStaffModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="assignStaffModalLabel">Assign Staff</h5>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <form action="{{ route('assign_to') }}" method="POST">

                    @csrf

                    <!-- Hidden ID field -->

                    <input type="hidden" name="id" id="accept_id">

                   

                    <div class="mb-3">

                        <label for="staffSelect" class="form-label">Select Staff</label>

                        <select id="staffSelect" name="staff_id" class="form-control form-select" >

                            <option value="">Select Staff</option>

                            @foreach($staffs as $staff)

                                <option value="{{ $staff->user_id }}">{{ $staff->user_id }}</option>

                            @endforeach

                        </select>

                    </div>

                

                    <button type="submit" class="btn btn-primary w-100">Assign</button>

                </form>

                

            </div>

        </div>

    </div>

</div>



<!-- Include jQuery -->

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>



<!-- Initialize DataTable -->

<script>

    $(document).ready(function() {

        $('#datatable').DataTable({

            "language": {

                "paginate": {

                    "previous": '<i class="fa-solid fa-angle-left"></i>',

                    "next": '<i class="fa-solid fa-angle-right"></i>'

                }

            }

        });

    });

</script>



<script>

    function setAcceptId(button) {

        var acceptId = button.getAttribute('data-user-id');

        document.getElementById('accept_id').value = acceptId;

    }

</script>



{{-- Filter Table by Status --}}

<script>

    document.getElementById('statusFilter').addEventListener('change', function () {

        const selectedStatus = this.value;

        const baseUrl = "{{ route('admin.lead') }}";

        const url = selectedStatus ? `${baseUrl}?status=${encodeURIComponent(selectedStatus)}` : baseUrl;



        window.location.href = url;

    });

</script>



@endsection