@extends('Root.layout.master')
@section('title', 'Consultant List')
@section('page_name', 'Consultant')

@push('styles')
    <style>
        .nav-tabs .nav-link.active {
            border-bottom: 3px solid red;
            font-weight: 600;
        }

         .modal-body .row {
             align-items: center;
         }
        .modal-body .col-md-3 {
            color: #555;
        }

    </style>
@endpush

@section('content')

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Manage the Rates</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form action="{{route('admin.rate-store')}}" method="POST" autocomplete="off">
                        @csrf
                        <!-- Field 1 -->
                        <div class="mb-3">
                            <label for="int1" class="form-label">First Rate</label>
                            <input type="number" class="form-control" id="int1" name="first" step="1" required>
                            <input type="hidden" name="user_id" id="consultantID">
                        </div>

                        <!-- Field 2 -->
                        <div class="mb-3">
                            <label for="int2" class="form-label">2nd Rate</label>
                            <input type="number" class="form-control" id="int2" name="second" step="1" required>
                        </div>

                        <!-- Field 3 -->
                        <div class="mb-3">
                            <label for="int3" class="form-label">3rd Rate</label>
                            <input type="number" class="form-control" id="int3" name="third" step="1" required>
                        </div>

                        <!-- Field 4 -->
                        <div class="mb-3">
                            <label for="int4" class="form-label">4th Rate</label>
                            <input type="number" class="form-control" id="int4" name="fourth" step="1" required>
                        </div>

                        <!-- Field 5 -->
                        <div class="mb-3">
                            <label for="int5" class="form-label">5th Rate</label>
                            <input type="number" class="form-control" id="int5" name="fifth" step="1" required>
                        </div>

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

                </div>

            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="consultantModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content rounded-3">

                <!-- Header -->
                <div class="modal-header">
                    <h5 class="modal-title">Active Consultant Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Body -->
                <div class="modal-body p-0">

                    <div class="container-fluid">

                        <!-- Row Item -->
                        <div class="row border-bottom py-3">
                            <div class="col-md-3 fw-semibold">Company Name:</div>
                            <div class="col-md-9" id="c_name">Md. Moin Uddin</div>
                        </div>

                        <div class="row border-bottom py-3">
                            <div class="col-md-3 fw-semibold">Owner Name:</div>
                            <div class="col-md-9" id="c_owner">Md. Moin Uddin</div>
                        </div>

                        <div class="row border-bottom py-3">
                            <div class="col-md-3 fw-semibold">Email:</div>
                            <div class="col-md-9" id="c_email">info@iglweb.com</div>
                        </div>

                        <div class="row border-bottom py-3">
                            <div class="col-md-3 fw-semibold">Phone:</div>
                            <div class="col-md-9" id="c_phone">01958666962</div>
                        </div>

                        <div class="row border-bottom py-3">
                            <div class="col-md-3 fw-semibold">Adderess:</div>
                            <div class="col-md-9" id="c_address">sdfsdf</div>
                        </div>


                    </div>

                </div>

                <!-- Footer Buttons -->
                <div class="modal-footer justify-content-center gap-2">

                    <a class="btn btn-warning px-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop" id="addRate" >
                        <i class="bi bi-person"></i> Add Rates
                    </a>

                    <form action="{{route('admin.package.suspended')}}" method="post">
                        @csrf
                        <input type="hidden" name="user_id"  id="user_id">
                        <button type="submit" class="btn btn-info text-white px-4">
                            <i class="bi bi-person"></i> Suspend Account
                        </button>
                    </form>

                    <form action="{{route('admin.package.free')}}" method="post">
                        @csrf
                        <input type="hidden" name="user_id"  id="user_id">
                        <button type="submit" class="btn btn-success text-white px-4">
                            <i class="bi bi-person"></i> Free
                        </button>
                    </form>

                    <form action="{{route('admin.package.basic')}}" method="post">
                        @csrf
                        <input type="hidden" name="user_id" data-id="" id="user_id">
                        <button type="submit" class="btn btn-warning text-white px-4">
                            <i class="bi bi-person"></i> Basic
                        </button>
                    </form>

                    <form action="{{route('admin.package.premium')}}" method="post">
                        @csrf
                        <input type="hidden" name="user_id"  id="user_id">
                        <button type="submit" class="btn btn-primary text-white px-4">
                            <i class="bi bi-person"></i> Premium
                        </button>
                    </form>

                </div>

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


    <div class="container mt-4">

        <!-- Tabs -->
        <ul class="nav nav-tabs" id="consultantTabs" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#pending">Pending</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#active">Active</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#free">Free</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#basic">Basic</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#premium">Premium</button>
            </li>


            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#suspended">Suspended</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#all">All</button>
            </li>
        </ul>
        <div class="tab-content p-4 border border-top-0 bg-light">

            <!-- Pending -->
            <div class="tab-pane fade show active" id="pending">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_pending as $c)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$c->u_name}}</td>
                        <td>{{$c->u_email}}</td>
                        <td>{{$c->u_phone}}</td>
                        <td class="d-flex justify-content-center">
                            <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>
                            <form  action="{{route('admin.activate.consultant')}}" method="post">
                                @csrf
                                <input type="hidden" name="user_id" value="{{$c->id}}">
                                <button style="margin-left: 10px;" type="submit" class="btn btn-outline-success btn-sm"><i class="bi bi-check"> Confirm</i></button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Active -->
            <div class="tab-pane fade" id="active">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_active as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Free -->
            <div class="tab-pane fade" id="free">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_free as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Basic -->
            <div class="tab-pane fade" id="basic">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_basic as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Premium -->
            <div class="tab-pane fade" id="premium">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_premium as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>



            <!-- Suspended -->
            <div class="tab-pane fade" id="suspended">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_suspended as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- All -->
            <div class="tab-pane fade" id="all">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>Company Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($con_all as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
   <script>
       $(document).on('click', '.viewUser', function () {

           let userId = $(this).data('id');

           $.ajax({
               url: "{{ route('admin.consultant-list') }}/" + userId,
               type: "GET",
               success: function (data) {
                   console.log(data);

                   $('#c_name').text(data[0].u_name);
                   $('#c_email').text(data[0].u_email);
                   $('#c_phone').text(data[0].u_phone);
                   $('#c_address').text(data[1].address);
                   $('#c_owner').text(data[1].owner_name);
                   document.getElementById('consultantID').value = data[0].id;

                   document.querySelectorAll('#user_id').forEach(function(el){
                       el.value = data[0].id;
                   });


                   var modal = new bootstrap.Modal(
                       document.getElementById('consultantModal')
                   );
                   modal.show();
               }
           });

       });
   </script>
@endpush