@extends('dashboard.layout.partials.dashboard')
<style>
a.btn.btn-danger {
    padding: 5px;
}
a.btn.btn-success {
    padding: 5px;
}
.btn-warning:not(.btn-light) {
    color: #0a0a0a !important;
}
</style>
@section('content')
<div class="form-group row">
    <div class="cddol-sm-12">
        @if ($errors->any())
            <div class="alert " style="background-color:rgb(153, 51, 0); color:white">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    <div class="col-sm-12">
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{session('message')}}
            </div>
        @endif
    </div>
    <div class="col-sm-12">
        @if (session()->has('hasError'))
            <div class="alert alert-danger">
                {{session('hasError')}}
            </div>
        @endif
    </div>
    <div id="successMessage" style="display: none; color: green;">
    <!-- This div will be displayed when a success response is received -->
    Message sent successfully!
</div>
</div>

                <div class="card shadow">
                      <div class="card-header bg-color">
                          	<h4 class="text">Coin Request</h4>
                      </div>
                  <div class="card-body ">
                  
                        
                  	 
                  	 	<div class="table-responsive">
                  	  <table class="table table-striped myTable">
                      <thead>
                        <tr>
                          <th> S no </th>
                          <th> User Name </th>
                          <th> Coin request to withdraw amount </th>
                          <th>Approve</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody class='tbody'>
                          
                       @foreach($coinRequest as $request)
                       @php
                       $user=App\Models\User::where('id',$request->user_id)->first();
                       @endphp
                       <tr>
                       	<td>{{$loop->index +1}}</td>
                       	<td>{{$user->name ?? 'N/A'}}</td>
                       	<td>{{$request->coins}}</td>
                       	<!--required because i sent data with ajax function through modal-->
                       	<input type='hidden' name='request_id' value='{{$request->id}}' class='request_id' id="{{'request_id'.$request->id}}">
                       	<input type='hidden' name='user_id' value='{{$user->id}}' class='user_id' id="{{'user_id'.$request->id}}">
                       	@if($request->approaved==1)
                       	<td><a class='btn btn-danger'  >Submit</a></td>
                       	<!--<td><button class='btn btn-success viewApproved_btn' id="viewApproved_btn">Approved Transaction</button></td>-->
                       	<td><a class='btn btn-success viewApproved_btn' id="{{'viewApproved_btn'.$request->id}}" data-bs-toggle="modal" data-bs-target="#exampleModal1" >View</a></td>
                       	@else
                       	<td><a class='btn btn-success approaved_btn' data-bs-toggle="modal" data-bs-target="#exampleModal" >Approved</a></td>
                       	@endif
                       </tr>
                       @endforeach
                      </tbody>
                    </table>
                    </div>
                  </div>
                </div>
              
              <!-- Button trigger modal -->
              <!-- Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Transaction Details</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id='myForm'>
            <input type='date' class='form-control date' required name='date' placeholder='Date'>
            <input type='number' class='form-control transaction_no' required name='transaction_no' placeholder='Transaction No' >
            <textarea class='form-control remarks' name='remarks' cols='6'  required placeholder='Remarks'></textarea>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn  btn-warning save_changes">Save Transaction</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal for View Approved Data -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Approved Details</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalData"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!--<div id="myModal" class="modal">-->
<!--  <div class="modal-content">-->
<!--    <span class="close">&times;</span>-->
<!--    <div id="modalData"></div>-->
<!--  </div>-->
<!--</div>-->

<!-- Modal -->

@endsection

@section('javascript')





<script>

   var request_id, user_id; 
     $(document).on('click', function (event) {
            var form = $('#myForm');
            // Check if the click is outside the form
            if (!form.is(event.target) && form.has(event.target).length === 0) {
                // Click is outside the form, reset form fields
                form[0].reset();
            }
        });

   $(document).ready( function () {
       
      $(".viewApproved_btn").click(function(){
          id=$(this).attr('id');
          id=id.split('viewApproved_btn');
          id=id[1];
            var requestId = $('#request_id'+id).val();
            var userId = $('#user_id'+id).val();
             console.log(requestId);
        console.log(userId);
             var dataToSend = {
                request_Id: requestId,
                user_Id: userId
          }
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
          dataToSend['_token'] = csrfToken;
            $.ajax({
                url: "{{ route('coin.transaction.data') }}",
                type: "POST",
                data: dataToSend,
                success: function(data) {
                    console.log(data);
                        var modalData =  '<p>Name: ' + data.user_name + '</p>' +
                        '<p>Date: ' + data.date + '</p>' +
                            '<p>Transaction Number: ' + data.transaction_no + '</p>' +
                            '<p>Remarks: ' + data.remarks + '</p>';
                            console.log(modalData);
                                    //   $('#modalData').html("");
                        $('#modalData').html(modalData);
                        $('#myModal').css("display", "block");
                },
                error: function(error) {
                    console.log("Error:", error);
                }
            });
      });
      
//     $(".viewApproved_btn").click(function(){
//     var id = $(this).attr('id').replace('viewApproved_btn', '');
//     var requestId = $('#request_id'+id).val();
//     var userId = $('#user_id'+id).val();
    
//     console.log(userId);
//     console.log(requestId);
    
//     var dataToSend = {
//         request_Id: requestId,
//         user_Id: userId,
//         _token: $('meta[name="csrf-token"]').attr('content')
//     };

//     $.ajax({
//         url: "{{ route('coin.transaction.data') }}",
//         type: "POST",
//         data: dataToSend,
//         success: function(data) {
//             console.log(data);
            
//             var modalData = '<p>Date: ' + data.date + '</p>' +
//                             '<p>Transaction Number: ' + data.transaction_no + '</p>' +
//                             '<p>Remarks: ' + data.remarks + '</p>' ;
                            
//             $('#modalData').html(modalData);
//             $('#myModal').css("display", "block");
//         },
//         error: function(error) {
//             console.log("Error:", error);
//         }
//     });
// });

       $('.myTable').DataTable();
       
       $('.approaved_btn').click(function(){
           request_id = $(this).closest("tr").find(".request_id").val();
           user_id = $(this).closest("tr").find(".user_id").val();
       }); // Add a semicolon here

       $('.save_changes').click(function(e){
           $(".save_changes").attr("disabled",'disabled');
           e.preventDefault();
           var csrfToken = $('meta[name="csrf-token"]').attr('content');
           var date = $('.date').val();
           var transaction_no = $('.transaction_no').val();
           var remarks = $('.remarks').val();
            if (date === '' || transaction_no === '' || remarks === '') {
                alert('Please fill in all the fields before submitting data!');
            }else{
               var dataToSend = {
               date: date,
               transaction_no: transaction_no,
               remarks: remarks,
               coin_request_id: request_id,
               user_id: user_id,
           };
           dataToSend['_token'] = csrfToken;
         

           $.ajax({
               url: "https://devstaging.a2zcreatorz.com/FutureParts/store/transaction/data",
               type: "POST",
               data: dataToSend,
               success: function (data) {
                      localStorage.setItem('successMessage', data.message);
                      console.log(data);
                      alert('You Confirm User Request Successfully!');
                      window.location.reload();
                      var storedMessage = localStorage.getItem('successMessage');
                      $('#successMessage').show();
                      setTimeout(function() {
                      $('#successMessage').show();
                      $('#successMessage').text(data.message);  
                    }, 1000);
               },
               error: function (error) {
                   console.log("Error:", error);
               }
           });
            }
       });
   });
</script>


<style>
    .bg-color{
        background-color:white;
        padding-top:20px;

    }
    .text{
        font-size: 24px; 
        font-family: "Arial", sans-serif; 
    font-weight: bold;
    color:black;
    font-family: "Arial", sans-serif; 
    }
</style>

@endsection