@extends('admin.layouts.index')

@push('style')

     <!-- third party css end -->
@endpush

@section('content')

<style>
     a {
          color: #47a0b6;
     }

     .page-item.active .page-link {
          background: linear-gradient(45deg, #3CCCC7, #3E91BA, #262F66);
          border-color: #3CCCC7;
     }

     .page-link {

          color: #47a0b6;

     }

     .form-group .form-line:after {
          border-bottom: 2px solid #47a0b6;
     }

     #user_table {
          width: 100% !important;
     }

     #updateMatchModal {
          top: 82px !important;
          right: -202px !important;
     }

     #updateMatchModal .modal-title {
          margin: auto;
     }

     #updateMatchForm label {
          font-size: :20px;
          color: #000;
          font-weight: bold;
     }

     #addMatches-btn {
          cursor: pointer;
          margin-left: 129px;
          border: none;
          border-radius: 19px;
          font-size: 18px;
          width: 211px;
          background: linear-gradient(45deg, #3CCCC7, #47a0b6);
     }

     #matchInput {
          border: none;
          border-bottom: 2px solid gray;
          width: 75%;
          border-radius: 0;
          padding: 5px;
     }

     .modal-backdrop {
          z-index: auto !important;
          background-color: #cfccccfa !important;
     }

     .close-modal {
          border: none;
          cursor: pointer;
     }

     /* ==================== */
</style>

<!-- Overlay For Sidebars -->
<div class="overlay"></div><!-- Search  -->
<div class="search-bar">
     <div class="search-icon"> <i class="material-icons">search</i> </div>
     <input type="text" placeholder="Explore Nexa...">
     <div class="close-search"> <i class="material-icons">close</i> </div>
</div>


<section class="content">
     <div class="block-header">
          <div class="row">
               <div class="col-lg-7 col-md-6 col-sm-12">
                    <h2>Manage users
                         <!-- <small class="text-muted">Welcome to LingoLatte</small> -->
                    </h2>
               </div>
               <div class="col-lg-5 col-md-6 col-sm-12">
                    <ul class="breadcrumb float-md-right">
                         <li class="breadcrumb-item"><a href="{{route('admin.home')}}"><i></i>Dashboard</a></li>
                         <li class="breadcrumb-item active">Manage users</li>
                    </ul>
               </div>
          </div>
     </div>


     <div class="container-fluid">
          <div class="row clearfix">
               <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                         <!-- <div class="header">
                              <h2> Users Data</h2>
                         </div> -->
                         <div class="body">
                              <div class="form-outline">

                                   <div class="form-group form-float">
                                        <div class="form-line" style="width: 20%; margin-left: 13px;">
                                             <input type="text" id="search-input" class="form-control"
                                                  placeholder="Search here" />
                                        </div>
                                   </div>
                              </div>
                              <div class="table-responsive">
                                   <table id="user_table"
                                        class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                        <thead>
                                             <tr>
                                                  <th>Id</th>
                                                  <th>First Name</th>
                                                  <th>Last Name</th>
                                                  <th>Email</th>
                                                  <th>Matches</th>
                                                  <th>Likes</th>
                                                  <th>Status</th>
                                                  <th>Action</th>
                                             </tr>
                                        </thead>
                                        <tbody>

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

     <div class="modal" id="updateMatchModal" tabindex="-1" aria-labelledby="updateMatchModalLabel" aria-hidden="true">
          <div class="modal-dialog">
               <div class="modal-content">
                    <div class="modal-header">
                         <h5 class="modal-title" id="updateMatchModalLabel">Update Match</h5>
                         <button type="button" class="btn-close close-modal" data-bs-dismiss="modal"
                              aria-label="Close">X</button>
                    </div>
                    <div class="modal-body">

                         <form id="updateMatchForm">
                              @csrf

                              <input type="hidden" name="user_id" class="user-id" value="">
                              <div class="">
                                   <label for="matchField" class="form-label">User : </label>
                                   <span></span>
                              </div>
                              <div class="">
                                   <label for="matchField" class="form-label">Current Matches : </label>
                                   <span></span>
                              </div>
                              <div class="">
                                   <label for="matchField" class="form-label">Current Likes : </label>
                                   <span></span>
                              </div>
                              <div class="">
                                   <label for="matchField" class="form-label">Add Matches : </label>
                                   <input type="number" Name="newMatches" value="" class="new-matches" id="matchInput">
                              </div>

                              <button type="submit" class="btn btn-primary mt-5" id="addMatches-btn">UPDATE</button>
                         </form>
                    </div>
               </div>
          </div>
     </div>
</section>
@endsection

@push('script')

     <script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>

     <script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>

     <script src="{{asset('assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js')}}"></script>
     <script src="{{asset('assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js')}}"></script>


     <script src="{{asset('assets/plugins/jquery-datatable/buttons/buttons.html5.min.js')}}"></script>
     <script src="{{asset('assets/plugins/jquery-datatable/buttons/buttons.print.min.js')}}"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

     <script>
           var table;

           $(document).ready(function () {

                 table = $('#user_table').DataTable({
                       dom: 'Bfrtip',
                       buttons: ['csv', 'copy', 'print'],
                       processing: true,
                       serverSide: true,
                       responsive: false,
                       aaSorting: [
                              [0, 'asc']
                       ],
                       "ajax": {
                              type: 'GET',
                              url: "{{route('admin.get_matches_listing')}}",
                              data: function (d) {
                                    d.keyword = $('#search-input').val();
                              }
                       },
                       "columns": [{
                              data: 'id',
                              render: function (data, type, row, meta) {
                                    var serialNumber = meta.row + meta.settings._iDisplayStart + 1;
                                    return serialNumber;
                              },
                       },
                       {
                              data: 'first_name',
                              orderable: false,
                       },
                       {
                              data: 'last_name',
                              orderable: false,
                       },
                       {
                              data: 'email',
                              orderable: false,
                       },
                       {
                              data: 'matches',
                              orderable: false,
                       },
                       {
                              data: 'remaing_like',
                              orderable: false,
                       },
                       {
                              data: 'is_blocked',
                              orderable: false,
                              render: function (data, type, row) {
                                    return data == '0' ? 'Unblocked' : 'Blocked';
                              }
                       },
                       {
                              data: 'action',
                              orderable: false,
                       },

                       ],
                 });

                 $('#search-input').on('keyup', function () {
                       table.draw();
                 });



                 //============================ Open Modal ===========================
                 $(document).on('click', '.update-match', function () {
                       var data = table.row($(this).parents('tr')).data();

                       $('#updateMatchModal .user-id').val(data.id);
                       $('#updateMatchModal .modal-body span').eq(0).text(data.first_name + ' ' + data.last_name);
                       $('#updateMatchModal .modal-body span').eq(1).text(data.matches);
                       $('#updateMatchModal .modal-body span').eq(2).text(data.remaing_like);

                       $('#updateMatchModal').modal('show');
                 });

                 //   // Optionally, handle the form submission inside the modal
                 //   $('#updateMatchForm').on('submit', function (e) {
                 //         e.preventDefault();
                 //         // Perform AJAX request or any other logic to update the match
                 //         alert('Match updated successfully!');
                 //         $('#updateMatchModal').modal('hide'); // Hide the modal after submission
                 //   });

                 //=========================== Update Matches ===========================
                 $(document).on('submit', '#updateMatchForm', function (event) {
                       event.preventDefault();
                       var formData = $(this).serialize();

                       $.ajax({
                              url: '{{ route("admin.add_matches") }}',
                              type: 'POST',
                              dataType: 'json',
                              data: formData,
                              success: function (response) {
                                    Swal.fire({
                                          title: 'Success',
                                          text: response.success,
                                          icon: 'success'
                                    }).then((result) => {
                                          if (result.isConfirmed) {
                                                $('#user_table').DataTable().ajax.reload();
                                                $('#updateMatchModal').modal('hide');
                                                $('#updateMatchForm')[0].reset();
                                          }
                                    });

                              },
                              error: function (xhr, status, error) {
                                    console.log(xhr.responseText);
                              }
                       });
                 });
           });
     </script>

     <!-- ============================== -->


@endpush