@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">
    <h4 class="page-title mb-0">Lead</h4>
</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>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->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>
                                        <button class="badge bg-primary border-0">View</button>
                                    </div>
                                </td>
                               
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
            </div>
        </div>
    </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>
@endsection