@include('includes.header')

<meta name="viewport" content="width=1200, initial-scale=1.0, maximum-scale=1.0">
<div class="container-fluid mt-3">
    <div class="row">
      <div class="col-md-8 col-sm-6 col-xs-12">
        <ul class="pull-right d-inline-flex" style="list-style: none;">
            <li class="btn-sm">
                <a href="{{route('all-account')}}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;"> All Account</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 110px; text-align: center; color: white;"> Today History</a>
            </li>
            <li class="btn-sm">
                <a href="{{route('all-history')}}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;"> All History</a>
            </li>
        </ul><br>
        <b style="color: #009688; margin-left: 5%;">All History</b>
      </div>
    </div>
    <hr />
    <!-- Request Statistic Starts -->
    <section>
        <form method="GET" action="{{ route('filter.requests') }}">
            <div class="row py-3">
                <!-- Entries Per Page -->
                <div class="col-lg-1 col-md-1 col-sm-12">
                    <div class="form-group ">
                        <select name="entries" class="form-control" style="width: 80px; height: 33px; border-radius: 25px;">
                            <option value="25" {{ request('entries') == '25' ? 'selected' : '' }}>25</option>
                            <option value="50" {{ request('entries') == '50' ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('entries') == '100' ? 'selected' : '' }}>100</option>
                            <option value="250" {{ request('entries') == '250' ? 'selected' : '' }}>250</option>
                            <option value="500" {{ request('entries') == '500' ? 'selected' : '' }}>500</option>
                        </select>
                    </div>
                </div>

                <!-- Username -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="form-group">
                        <input type="text" name="username" class="form-control" placeholder="Username" value="{{ request('username') }}" style="height: 33px; border-radius: 25px;">
                    </div>
                </div>

                <!-- Service Dropdown -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="form-group">
                        <select name="service" id="service" class="form-control" style="height: 33px; border-radius: 25px;">
                            <option value="">Select service</option>
                            <option value="TopUp" {{ request('service') == 'TopUp' ? 'selected' : '' }}>TopUp</option>
                            <option value="Remittance" {{ request('service') == 'Remittance' ? 'selected' : '' }}>Remittance</option>
                        </select>
                    </div>
                </div>
                
                <!-- Operator Dropdown -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="form-group">
                        <select name="operator" id="operator" class="form-control" style="height: 33px; border-radius: 25px;">
                            <option value="">All Operator</option>
                            <!-- Options will be dynamically loaded here -->
                        </select>
                    </div>
                </div>

                <!-- Mobile Number -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="form-group">
                        <input type="text" name="mobile" class="form-control" placeholder="Mobile Number" value="{{ request('mobile') }}" style="height: 33px; border-radius: 25px;">
                    </div>
                </div>

                <!-- From Date -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="form-group">
                        <input type="date" name="from_date" class="form-control" value="{{ request('from_date') }}" style="height: 33px; border-radius: 25px;">
                    </div>
                </div>

                <!-- To Date -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="form-group">
                        <input type="date" name="to_date" class="form-control" value="{{ request('to_date') }}" style="height: 33px; border-radius: 25px;">
                    </div>
                </div>

                <!-- Search Button -->
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div class="d-flex">
                        <button type="submit" class="btn-sm btn btn-success rounded-pill" style="width: 110px; text-align: center;">
                            <i class="fa fa-search"></i> Search
                        </button>
                        <button type="button" class="btn-sm btn btn-success rounded-pill mx-2" style="width: 110px; text-align: center;">
                            <a href="{{ route('request.all') }}">Clear</a>
                        </button>
                    </div>
                </div>
                </div>
            </div>
        </form>

        <!-- Table Starts -->
        <table class="table table-striped account-table">
            <thead>
            <tr>
                <th>Username</th>
                <th>Service</th>
                <th>Operator</th>
                <th>Type</th>
                <th>Number</th>
                <th>Amount</th>
                <th>After.Bal</th>
                <th>Sim.Bal</th>
                <th>Sender</th>
                <th>Date</th>
                <th>Status</th>
                <th>Transaction</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
                @php
                    $totalAmount = 0;
                    $totalCompleteAmount = 0;
                @endphp
                @foreach($AllRequests as $request)
                @php
                    
                    $totalAmount += $request->amount;

                    if ($request->status === 'Success') {
                        $totalCompleteAmount += $request->amount;
                    }
                @endphp
                <tr>
                    <td style="color: #009688;">{{ $request->username }}</td>
                    <td>{{ $request->service }}</td>
                    <td>{{ $request->operator }}</td>
                    <td 
                        style="color: {{ $request->status == 'Processing' ? 'blue' : ($request->status == 'Pending' ? 'orange' : 'black') }}">
                        {{ $request->type }}
                    </td>
                    <td>{{ $request->account_number }}</td>
                    <td style="color: green;">{{ $request->amount }}</td>
                    <td style="color: #009688;">{{ $request->after_balance }}</td>
                    <td style="color: #0000ff;">{{ $request->sim_balance }}</td>
                    <td style="color: #000000;">{{ $request->senderId }}</td>
                     <td>{{ $request->created_at->format('Y-m-d H:i:s') }}</td>
                    <td 
                        style="color: 
                            {{ $request->status == 'Processing' ? 'blue' : 
                               ($request->status == 'Pending' ? 'orange' : 
                               ($request->status == 'Success' ? 'green' : 
                               ($request->status == 'Refunded' ? 'red' : 'black'))) }}">
                        {{ $request->status }}
                    </td>

                    <td>
                        @if($request->status === 'Refunded')
                            {{ $request->reason }}
                        @else
                            {{ $request->transaction_id }}
                        @endif
                    </td>

                    <td>
                        @if($request->status !== 'Success' && $request->status !== 'Refunded') 
                            <div class="dropdown">
                                <button class="btn btn-light dropdown-toggle big-icon" style="background-color: #edb100;" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-start" aria-labelledby="dropdownMenuButton">
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="showDialogConfirm({{ json_encode($request) }})">Confirm</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="showDialogProcess({{ json_encode($request) }})">Process</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="showDialogResend({{ json_encode($request) }})">Resend</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0)" onclick="showDialogRefund({{ json_encode($request) }})">Refund</a></li>
                                </ul>
                            </div>
                        @else
                            <span class="{{ $request->status == 'Refunded' ? 'text-danger' : ($request->status == 'Success' ? 'text-success' : 'text-muted') }}">
                                {{ $request->status }}
                            </span>
                        @endif
                    </td>
                </tr>
                @endforeach
                <tr style="background-color: #f2f2f2; margin-top: 5px;">
                    <td colspan="5" class="text-end"><strong>Total</strong></td>
                    <td style="color: green;"><strong>{{ $totalAmount }}</strong></td>
                    <td colspan="6" class="text-end"><strong>Total Complete</strong></td>
                    <td style="color: green;"><strong>{{ $totalCompleteAmount }}</strong></td>
                    
                </tr>
            </tbody>
        </table>
        <!-- Table Ends -->
    </section>

    <!--confirm-->
  <div id="dialogCardconfirm" class="Confirm-dialog" style="display: none;">
    <div class="Confirm-dialog-content">
        <p class="top-txt">Manual Confirmation 
            <span class="close-btn" onclick="closeDialogConfirm()">&times;</span>
        </p>
        <div class="refund">
            <form id="transactionForm" method="POST" action="/save-transaction-id">
                @csrf
                <table>
                    <tbody>
                        <tr>
                            <td>Operator:</td>
                            <td id="confirmOperator">Banglalink</td>
                        </tr>
                        <tr>
                            <td>Type  :</td>
                            <td id="confirmType">Prepaid</td>
                        </tr>
                        <tr>
                            <td>Number :</td>
                            <td id="confirmNumber" style="color: #009688;">01411112233</td>
                        </tr>
                        <tr>
                            <td>Amount :</td>
                            <td id="confirmAmount" style="color: red;">1000</td>
                        </tr>
                        <tr>
                            <td>User :</td>
                            <td id="confirmUser" style="color: #009688;">Jibon</td>
                        </tr>
                        <tr>
                            <td>TrxId:</td>
                            <td>
                                <input type="text" id="transactionId" name="transactionId" class="form-control" style="border-right: 0; border-top: 0; border-left: 0;" placeholder="Transaction ID" required>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <ul class="pull-right d-inline-flex" style="list-style: none;">
                                    <li class="btn-sm">
                                        <button type="submit" class="btn btn-primary rounded-pill" style="width: 100px; text-align: center;"> Confirm</button>
                                    </li>
                                    <li class="btn-sm">
                                        <button type="button" class="btn btn-warning rounded-pill" style="width: 100px; text-align: center; color: white; background-color: rgb(180, 3, 3);" onclick="closeDialogConfirm()"> Cancel</button>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- Hidden inputs for additional data -->
                <input type="hidden" id="operator" name="operator">
                <input type="hidden" id="type" name="type">
                <input type="hidden" id="number" name="number">
                <input type="hidden" id="amount" name="amount">
                <input type="hidden" id="id" name="id">
            </form>
        </div>
    </div>
</div>
    <!--process-->
  <div id="dialogCardprocess" class="Process-dialog" style="display: none;">
    <div class="Prcess-dialog-content">
      <p class="top-txt">Recharge >> request process <span class="close-btn" onclick="closeDialogProcess()">&times;</span></p>
       <div class="refund">
        <form id="processForm" method="POST" action="/process-request">
        @csrf
        <table class="table">
            <tbody>
            <tr>
                            <td>Operator  :</td>
                            <td id="processOperator">Banglalink</td>
                        </tr>
                        <tr>
                            <td>User :</td>
                            <td><span id="processUser" style="color: #009688;">Jibon</span></td>
                        </tr>
                        <tr>
                            <td>Type  :</td>
                            <td id="processType">Prepaid</td>
                        </tr>
                        <tr>
                            <td>Number :</td>
                            <td><span id="processNumber" style="color: #009688;">01411112233</span></td>
                        </tr>
                        <tr>
                            <td>Amount :</td>
                            <td><span id="processAmount" style="color: red;">1000</span></td>
                        </tr>
                    </tbody>
                </table>
        <hr style="width: 95%;"/>
            <input type="hidden" id="processId" name="processId"> 

        <table>
          <tbody>
            <tr>
              <td></td>
              <td>
                <ul class="pull-right d-inline-flex" style="list-style: none;">
                  <li class="btn-sm">
                    <button type="submit" class="btn btn-primary rounded-pill" style="width: 100px; text-align: center;">Process</button>
                  </li>
                  <li class="btn-sm">
                    <button class="btn btn-warning rounded-pill" style="width: 100px; text-align: center; color: white; background-color: rgb(180, 3, 3);" onclick="closeDialogProcess()">Cancel</button>
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
        </form>
       </div>
    </div>
   </div>
   <!--resend-->
  <div id="dialogCardresend" class="Resend-dialog" style="display: none;">
    <div class="Resend-dialog-content">
      <p class="top-txt">Recharge >> request resend <span class="close-btn" onclick="closeDialogResend()">&times;</span></p>
       <div class="refund">

        <table>
          <tbody>
            <tr>
                <td>Operator:</td>
                    <td id="resendOperator">Banglalink</td>
                        </tr>
                        <tr>
                            <td>User:</td>
                            <td><span id="resendUser" style="color: #009688;">Jibon</span></td>
                        </tr>
                        <tr>
                            <td>Number:</td>
                            <td><span id="resendNumber" style="color: #009688;">01411112233</span></td>
                        </tr>
                        <tr>
                            <td>Amount:</td>
                            <td><span id="resendAmount" style="color: red;">300</span></td>
                        </tr>
                        <tr>
                            <td>Type:</td>
                            <td>
                                <input type="radio" name="TransactionType" value="Prepaid"> Prepaid
                                <input type="radio" name="TransactionType" value="Skitto"> Skitto
                                <input type="radio" name="TransactionType" value="Postpaid"> Postpaid
                            </td>
                        </tr>
         </tbody>
        </table>
        <hr style="width: 95%;"/>
        <table>
          <tbody>
            <tr>
              <td></td>
              <td>
                <ul class="pull-right d-inline-flex" style="list-style: none;">
                  <li class="btn-sm">
                    <button class="btn btn-primary rounded-pill" style="width: 100px; text-align: center;">Resend</button>
                  </li>
                  <li class="btn-sm">
                    <button class="btn btn-warning rounded-pill" style="width: 100px; text-align: center; color: white; background-color: rgb(180, 3, 3);" onclick="closeDialogResend()">Cancel</button>
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>

       </div>
    </div>
  </div>
    <!--refund-->
  <div id="dialogCardfund" class="Refund-dialog" style="display: none;">
    <div class="Refund-dialog-content">
        <p class="top-txt">Recharge refunded 
            <span class="close-btn" onclick="closeDialogfund()">&times;</span>
        </p>
        <div class="refund">
            <form id="refundForm" method="POST" action="/refund-request">
                @csrf
                <table>
                    <tbody>
                        <tr>
                            <td>Operator:</td>
                            <td id="refundOperator">Banglalink</td>
                        </tr>
                        <tr>
                            <td>Type :</td>
                            <td id="refundType">Prepaid</td>
                        </tr>
                        <tr>
                            <td>Number :</td>
                            <td><span id="refundNumber" style="color: #009688;">01411112233</span></td>
                        </tr>
                        <tr>
                            <td>Amount :</td>
                            <td><span id="refundAmount" style="color: red;">1000</span></td>
                        </tr>
                        <tr>
                            <td>User :</td>
                            <td><span id="refundUser" style="color: #009688;">Jibon</span></td>
                        </tr>
                        <tr>
                            <td>Reason :</td>
                            <td><input type="text" id="refundReason" name="refundReason" class="form-control" style="border-right: 0; border-top: 0; border-left: 0;" required></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <ul class="pull-right d-inline-flex" style="list-style: none;">
                                    <li class="btn-sm">
                                        <button type="submit" class="btn btn-primary rounded-pill" style="width: 100px; text-align: center;">Confirm</button>
                                    </li>
                                    <li class="btn-sm">
                                        <button type="button" class="btn btn-warning rounded-pill" style="width: 100px; text-align: center; color: white; background-color: rgb(180, 3, 3);" onclick="closeDialogRefund()">Cancel</button>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- Hidden input to hold request ID -->
                <input type="hidden" id="refundRequestId" name="requestId">
            </form>
        </div>
    </div>
</div>
    

    </div>

    <script>
      function showDialogRefund(request) {
          document.getElementById('dialogCardfund').style.display = 'block';
          
          document.getElementById('refundOperator').innerText = request.operator || 'Unknown';
          document.getElementById('refundType').innerText = request.type || 'Unknown';
          document.getElementById('refundNumber').innerText = request.account_number || 'Unknown';
          document.getElementById('refundAmount').innerText = request.amount || 'Unknown';
          document.getElementById('refundUser').innerText = request.username || 'Unknown';
          
          document.getElementById('refundRequestId').value = request.id;
    
      }
    
      function closeDialogRefund() {
          document.getElementById('dialogCardfund').style.display = 'none';
      }
      
      function showDialogConfirm(request) {
          document.getElementById('dialogCardconfirm').style.display = 'block';
          
          document.getElementById('confirmOperator').innerText = request.operator || 'Unknown';
          document.getElementById('confirmType').innerText = request.type || 'Unknown';
          document.getElementById('confirmNumber').innerText = request.account_number || 'Unknown';
          document.getElementById('confirmAmount').innerText = request.amount || 'Unknown';
          document.getElementById('confirmUser').innerText = request.username || 'Unknown';
          
          document.getElementById('operator').value = request.operator;
          document.getElementById('type').value = request.type;
          document.getElementById('number').value = request.account_number;
          document.getElementById('amount').value = request.amount;
          document.getElementById('id').value = request.id;
          
          
      }
    
      function closeDialogConfirm() {
          document.getElementById('dialogCardconfirm').style.display = 'none';
      }
    
      function showDialogProcess(request) {
          document.getElementById('dialogCardprocess').style.display = 'block';
          
          document.getElementById('processOperator').innerText = request.operator || 'Unknown';
          document.getElementById('processUser').innerText = request.username || 'Unknown';
          document.getElementById('processType').innerText = request.type || 'Unknown';
          document.getElementById('processNumber').innerText = request.account_number || 'Unknown';
          document.getElementById('processAmount').innerText = request.amount || 'Unknown';
          
          document.getElementById('processId').value = request.id; 
      }
    
      function closeDialogProcess() {
          document.getElementById('dialogCardprocess').style.display = 'none';
      }
      
      function showDialogResend(request) {
          document.getElementById('dialogCardresend').style.display = 'block';
          
          document.getElementById('resendOperator').innerText = request.operator || 'Unknown';
          document.getElementById('resendUser').innerText = request.username || 'Unknown';
          document.getElementById('resendNumber').innerText = request.account_number || 'Unknown';
          document.getElementById('resendAmount').innerText = request.amount || 'Unknown';
    
      }
    
      function closeDialogResend() {
          document.getElementById('dialogCardresend').style.display = 'none';
      }
      
      document.addEventListener('DOMContentLoaded', function() {
        var selectedService = document.getElementById('service').value;
        var operatorDropdown = document.getElementById('operator');

        operatorDropdown.innerHTML = '<option value="">All Operator</option>';

        loadOperators(selectedService);

        document.getElementById('service').addEventListener('change', function() {
            selectedService = this.value;
            loadOperators(selectedService);
        });
    });


    function loadOperators(service) {
        var operatorDropdown = document.getElementById('operator');

        operatorDropdown.innerHTML = '<option value="">All Operator</option>';

        if (service === 'TopUp') {
            @foreach($topUpOperators as $operator)
                operatorDropdown.innerHTML += '<option value="{{ $operator->operator }}" {{ request("operator") == "{$operator->operator}" ? "selected" : "" }}>{{ $operator->operator }}</option>';
            @endforeach
        } else if (service === 'Remittance') {
            @foreach($remittanceOperators as $operator)
                operatorDropdown.innerHTML += '<option value="{{ $operator->operator }}" {{ request("operator") == "{$operator->operator}" ? "selected" : "" }}>{{ $operator->operator }}</option>';
            @endforeach
        }
    }
        window.onload = function() {
        const createdAtElement = document.getElementById('created-at-{{ $request->id }}');
        createdAtElement.innerHTML = formatDate("{{ $request->created_at }}");
    }
      </script>

    @include('includes.footer')