@extends('layouts.sidebar')
@section('title', 'Nomadic-Billing')
@section('content')
<div class="pagetitle">
  <h1>Billing</h1> 
</div>

@if(session('success'))
<div class="alert alert-success p-2">{{session('success')}}</div>
@endif
@if(session('error'))
<div class="alert alert-danger p-2">{{session('error')}}</div>
@endif

<section class="section profile position-relative">
  <div class="col-xl-12">
    <ul class="nav nav-tabs nav-tabs-bordered position-relative" id="borderedTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="Transaction-tab" data-bs-toggle="tab" data-bs-target="#bordered-Transaction" type="button" role="tab" aria-controls="Transaction" aria-selected="true">Transaction</button>
      </li>
      <li class="nav-item " role="presentation">
        <button class="nav-link" id="Subscription-tab" data-bs-toggle="tab" data-bs-target="#bordered-Subscription" type="button" role="tab" aria-controls="Subscription" aria-selected="false">Subscription Tiers</button>
      </li>
    </ul>
    <div class="tab-content pt-2" id="borderedTabContent">
      <div class="tab-pane fade show active" id="bordered-Transaction" role="tabpanel" aria-labelledby="Transaction-tab">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="heading3 ps-0 mb-3">Transactions</span>
          <form id="transactionFilterForm" class="d-flex align-items-center" style="gap:10px;">
            <input type="date" class="form-control form-control-sm" id="filterStartDate" name="start_date" value="{{ request('start_date') }}">
            <input type="date" class="form-control form-control-sm" id="filterEndDate" name="end_date" value="{{ request('end_date') }}">
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
          </form>
        </div>
        
        <div class="row mb-4">
          <div class="col-lg-12">
              <div class="row">
                  <div class="col-md-4 col-12 mb-3">
                      <div class="card text-center dashboard-tile tile-6 pointer revenueBtn" data-type="Total-Revenue">
                          <div class="card-body">
                              <div class="tile-icon"><i class="fa fa-coins"></i></div>
                              <h6 class="card-title">Total Revenue</h6>
                              <h3 class="mb-0">${{ number_format($amount_sum ?? 0, 2) }}</h3>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4 col-12 mb-3">
                      <div class="card text-center dashboard-tile tile-6 pointer revenueBtn" data-type="Transfer-Points">
                          <div class="card-body">
                              <div class="tile-icon"><i class="fa fa-coins"></i></div>
                              <h6 class="card-title">Transfer Points</h6>
                              <h3 class="mb-0">{{ $transfer_points ?? 0 }}</h3>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4 col-12 mb-3">
                      <div class="card text-center dashboard-tile tile-7 pointer revenueBtn" data-type="Outstanding-Points">
                          <div class="card-body">
                              <div class="tile-icon"><i class="fa fa-credit-card"></i></div>
                              <h6 class="card-title">Outstanding Points</h6>
                              <h3 class="mb-0">{{ $outstanding_points ?? 0 }}</h3>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4 col-12 mb-3">
                      <div class="card text-center dashboard-tile tile-2 pointer revenueBtn" data-type="Subscription-Revenue">
                          <div class="card-body">
                              <div class="tile-icon"><i class="fa fa-check-circle"></i></div>
                              <h6 class="card-title">Subscription revenue</h6>
                              <h3 class="mb-0">${{ number_format($subs_revenue ?? 0,2) }}</h3>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4 col-12 mb-3">
                      <div class="card text-center dashboard-tile tile-1  pointer revenueBtn" data-type="Topup-Revenue">
                          <div class="card-body">
                              <div class="tile-icon"><i class="fa fa-users"></i></div>
                              <h6 class="card-title">Topup revenue</h6>
                              <h3 class="mb-0">${{ number_format($topup_revenue ?? 0,2) }}</h3>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-4 col-12 mb-3">
                      <div class="card text-center dashboard-tile tile-3 pointer revenueBtn" data-type="Unclaimed-Points">
                          <div class="card-body">
                              <div class="tile-icon"><i class="fa fa-user-check"></i></div>
                              <h6 class="card-title">Unclaimed Points</h6>
                              <h3 class="mb-0">{{ $unclaimed_revenue ?? 0 }}</h3>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
        
        <div id="transactionTableWrapper">
          <table class="table">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Transaction</th>
                  <th>Amount</th>
                  <th>Points</th>
                  <th>User</th>
                </tr>
              </thead>
              <tbody>
                @foreach($data as $point)
                <tr>
                  <td>{{date('d M Y',strtotime($point->created_at))}}</td>
                  <td>{{$points_action[$point->action]}} @if($point->plan_id) ({{$point->plan->name}}) @endif</td>
                  <td>
                    @if(!empty($point->amount))
                    {{convertCurrency($point->amount)}} {{session()->get('user_currency')}}
                    @else
                    N/A
                    @endif

                    <!-- @if(in_array($point->action, ['MEMBERSHIP_CREDIT', 'POINTS_PURCHASED']))
                    <a class="pointer invoiceurl" data-invoiceid="{{$point->invoice_id}}">Invoice</a>
                    @endif -->
                    </td>
                  <td>
                  @if(in_array($point->action, ['MEMBERSHIP_CREDIT', 'POINTS_PURCHASED', 'BOOKING_CANCELLED']))
                      -{{$point->credit}} Points
                  @else
                      +{{$point->credit}} Points  
                  @endif
                  </td>
                  <td>
                    @if(isset($point->receivedby->fname)) 
                    {{$point->receivedby->fname}} {{$point->receivedby->lname}}
                    @endif
                  </td>
                </tr>
                @endforeach
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="5">
                    <div class="foot-paging">
                      {!! $data->withQueryString()->links('vendor.pagination.bootstrap-5') !!}
                    </div>  
                  </td>
                </tr>
              </tfoot>
            </table>
        </div>
      </div>
      <div class="tab-pane fade" id="bordered-Subscription" role="tabpanel" aria-labelledby="Subscription-tab">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="heading3 ps-0 mb-3">Subscription Tiers</span>
          <button type="button" class="btn btn-success btn-sm" id="addNewPlanBtn">+ Add New Plan</button>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>No. Of Guests</th>
              <th>Advance Booking</th>
              <th>Price</th>
              <th>Points Credit</th>
              <th>Discount</th>
              <th>Topup Discount</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($plans as $plan)
            <tr>
              <td>{{$plan->name}}</td>
              <td>{{$plan->num_of_guest}}</td>
              <td>{{$plan->advance_duration}} {{ucfirst($plan->advance_frequency)}}</td>
              <td>${{$plan->price}}</td>
              <td>{{$plan->points + $plan->discount}}</td>
              <td>{{$plan->discount}}</td>
              <td>{{$plan->topup_discount}}</td>
              <td>
                <i class="bi bi-trash deleteicon pointer" data-id="{{$plan->id}}"></i>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
          <span class="heading3 ps-0 mb-3">Addon Services</span>
          <button type="button" class="btn btn-success btn-sm" id="addNewServiceBtn">+ Add New Service</button>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>Service Name</th>
              <th>Description</th>
              <th>Price</th>
              <th>Status</th>
              <th>Created</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            @foreach($services as $service)
            <tr>
              <td>{{$service->name}}</td>
              <td>{{$service->description}}</td>
              <td>${{$service->price}}</td>
              <td>
                @if($service->status == 1)
                Active
                @else
                Inactive
                @endif
              </td>
              <td>{{$service->created_at}}</td>
              <td>
                <i class="bi bi-trash deletesrvicon pointer" data-id="{{$service->id}}"></i>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
        
      </div>
    </div>
  </div>
</section>
<!-- Add New Service Modal -->
<div class="modal fade" id="addServiceModal" tabindex="-1" aria-labelledby="addServiceModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addServiceModalLabel">Add New Service</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addServiceForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label for="serviceName" class="form-label">Service Name</label>
            <input type="text" class="form-control" id="serviceName" name="service_name" required>
          </div>
          <div class="mb-3">
            <label for="serviceDescription" class="form-label">Description</label>
            <textarea class="form-control" id="serviceDescription" name="service_description" rows="3"></textarea>
          </div>
          <div class="mb-3">
            <label for="serviceFrequency" class="form-label">Frequency</label>
            <div class="col-md-12 position-relative">
              <select class="form-control" id="serviceFrequency" name="service_frequency" required>
                <option value="month">Monthly</option>
                <option value="year">Yearly</option>
              </select>
              <i class="bi bi-caret-down-fill searchicon"></i>
            </div>
          </div>
          <div class="mb-3">
            <label for="servicePrice" class="form-label">Price</label>
            <input type="number" class="form-control" id="servicePrice" name="service_price" min="0" step="0.01" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="saveServiceBtn" class="btn btn-primary">Create Service</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- Add New Plan Modal -->
<div class="modal fade" id="addPlanModal" tabindex="-1" aria-labelledby="addPlanModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addPlanModalLabel">Add New Plan</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addPlanForm">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label for="planName" class="form-label">Plan Name</label>
            <input type="text" class="form-control" id="planName" name="plan_name" required>
          </div>
          <div class="row mb-3">
            <label for="planFrequency" class="form-label">Plan Frequency</label>
            <div class="col-md-12 position-relative">
              <select class="form-control" id="planFrequency" name="plan_frequency" required>
                <option value="month">Monthly</option>
                <option value="year">Yearly</option>
              </select>
              <i class="bi bi-caret-down-fill searchicon"></i>
            </div>
          </div>
          <div class="mb-3">
            <label for="planGuests" class="form-label">No. Of Guests</label>
            <input type="number" class="form-control" id="planGuests" name="plan_guests" required>
          </div>
          <div class="row mb-3">
            <label for="planAdvDuration" class="form-label">Advance</label>
            <div class="col-md-6">
              <input type="number" class="form-control" id="planAdvDuration" name="plan_advance_duration" required>
            </div>
            <div class="col-md-6 position-relative">
              <select class="form-control" id="planAdvFrequency" name="plan_advance_frequency" required>
                <option value="week">Week</option>
                <option value="month">Month</option>
              </select>
              <i class="bi bi-caret-down-fill searchicon"></i>
            </div>
          </div>
          <div class="mb-3">
            <label for="planPrice" class="form-label">Price</label>
            <input type="number" class="form-control" id="planPrice" name="plan_price" min="0" required>
          </div>
          <div class="mb-3">
            <label for="planPoints" class="form-label">Points</label>
            <input type="number" class="form-control" id="planPoints" name="plan_points" min="0" required>
          </div>
          <div class="mb-3">
            <label for="planDiscount" class="form-label">Discount</label>
            <input type="number" class="form-control" id="planDiscount" name="plan_discount" min="0" required>
          </div>
          <div class="mb-3">
            <label for="planTopupDiscount" class="form-label">Topup Discount</label>
            <input type="number" class="form-control" id="planTopupDiscount" name="plan_topup_discount" min="0" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button id="savePlanBtn" type="button" class="btn btn-primary">Save Plan</button>
        </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="revenueModal" aria-labelledby="revenueModal" aria-hidden="true"></div>
@endsection
@section('footer_scripts')
<style>
    .dashboard-tile {
        background:#fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-left: 6px solid #007bff;
        transition: box-shadow 0.2s;
        min-height: 120px;
    }
    .dashboard-tile.tile-2 { border-left-color: #28a745; }
    .dashboard-tile.tile-3 { border-left-color: #ffc107; }
    .dashboard-tile.tile-4 { border-left-color: #17a2b8; }
    .dashboard-tile.tile-5 { border-left-color: #6610f2; }
    .dashboard-tile.tile-6 { border-left-color: #fd7e14; }
    .dashboard-tile.tile-7 { border-left-color: #e83e8c; }
    .dashboard-tile.tile-8 { border-left-color: #343a40; }
    .dashboard-tile .tile-icon {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
        color: #007bff;
    }
    .dashboard-tile.tile-2 .tile-icon { color: #28a745; }
    .dashboard-tile.tile-3 .tile-icon { color: #ffc107; }
    .dashboard-tile.tile-4 .tile-icon { color: #17a2b8; }
    .dashboard-tile.tile-5 .tile-icon { color: #6610f2; }
    .dashboard-tile.tile-6 .tile-icon { color: #fd7e14; }
    .dashboard-tile.tile-7 .tile-icon { color: #e83e8c; }
    .dashboard-tile.tile-8 .tile-icon { color: #343a40; }
</style>
<script>

$(document).on('click', '.invoiceurl', function(){
    let invoiceid = $(this).data('invoiceid');
    $.ajax({
      url: APP_URL + '/backend/get-invoiceurl',
      type: 'POST',
      data: {_token:_token, invoiceid: invoiceid},
      dataType: 'json',
      success: function(data) {
        if (data.status) {
          window.location.href = data.invoice_url;
        }
      },
      error: function(res) {                    
        ajax_error(res);
      }
    });
  });
$(document).on('click', '#addNewServiceBtn', function(){
  var modal = new bootstrap.Modal(document.getElementById('addServiceModal'));
  modal.show();
});
$(document).on('click', '#saveServiceBtn', function(){
    $.ajax({
      url: APP_URL + '/backend/save-service',
      type: 'POST',
      data: $('#addServiceForm').serialize(),
      dataType: 'json',
      success: function(data) {
        if (data.status) {
          window.location.href = APP_URL + '/backend/billing#Subscription-tab';
          window.location.reload();
        }
      },
      error: function(res) {                    
        ajax_error(res);
      }
    });
  });

  $(document).on('click', '.deletesrvicon', function(){
    if(confirm('Are you sure want to delete this service?')){
      var serviceId = $(this).data('id');
      $.ajax({
        url: APP_URL + '/backend/delete-service/' + serviceId,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          if (data.status) {
            window.location.href = APP_URL + '/backend/billing#Subscription-tab';
            window.location.reload();
          }
        },
        error: function(res) {
          ajax_error(res);
        }
      });
    }
  });


// Show modal on button click
$(document).on('click', '.revenueBtn', function(){
  let obj = $(this);
  let type = obj.data('type');
  let start_date = $('#filterStartDate').val();
  let end_date = $('#filterEndDate').val();
  $.ajax({
    url: APP_URL + '/backend/revenue-modal',
    data:{_token:_token, type: type, start_date: start_date, end_date: end_date},
    type: 'POST',
    beforeSend: function() {
      obj.css('opacity', '0.5');
    },
    success: function(res) {
      $('#revenueModal').html(res.content);
      $('#revenueModal').modal('show');
      obj.css('opacity', '1');
    },
    error: function(res) {
      ajax_error(res);
      obj.css('opacity', '1');
    }
  });
});

$(document).on('click', '#addNewPlanBtn', function(){
  var modal = new bootstrap.Modal(document.getElementById('addPlanModal'));
  modal.show();
});

$(document).ready(function () {
  // AJAX pagination for transaction table
  $(document).on('click', '#transactionTableWrapper .foot-paging .pagination a', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    var form = $('#transactionFilterForm');
    var params = form.serialize();
    // Remove any existing query params from url and append form params
    var baseUrl = url.split('?')[0];
    var pageParam = url.split('?')[1];
    var ajaxUrl = baseUrl + '?' + pageParam + '&' + params;
    $.ajax({
      url: ajaxUrl,
      type: 'GET',
      beforeSend: function() {
        $('#transactionTableWrapper').css('opacity', '0.5');
      },
      success: function(response) {
        var html = $(response).find('#transactionTableWrapper').html();
        $('#transactionTableWrapper').html(html);
        $('#transactionTableWrapper').css('opacity', '1');
      },
      error: function(res) {
        ajax_error(res);
        $('#transactionTableWrapper').css('opacity', '1');
      }
    });
  });
  // Transaction date filter AJAX
  $('#transactionFilterForm').on('submit', function(e){
    e.preventDefault();
    var form = $(this);
    $.ajax({
      url: APP_URL + '/backend/billing',
      type: 'GET',
      data: form.serialize(),
      beforeSend: function() {
        $('#transactionTableWrapper').css('opacity', '0.5');
      },
      success: function(response) {
        // Replace only the transaction table section
        var html = $(response).find('#transactionTableWrapper').html();
        $('#transactionTableWrapper').html(html);
        $('#transactionTableWrapper').css('opacity', '1');
      },
      error: function(res) {
        ajax_error(res);
        $('#transactionTableWrapper').css('opacity', '1');
      }
    });
  });

  $(document).on('click', '#savePlanBtn', function(){
    $.ajax({
      url: APP_URL + '/backend/save-plan',
      type: 'POST',
      data: $('#addPlanForm').serialize(),
      dataType: 'json',
      success: function(data) {
        if (data.status) {
          window.location.href = APP_URL + '/backend/billing#Subscription-tab';
          window.location.reload();
        }
      },
      error: function(res) {                    
        ajax_error(res);
      }
    });
  });

  $(document).on('click', '.deleteicon', function(){
    if(confirm('Are you sure want to delete this plan?')){
      var planId = $(this).data('id');
      $.ajax({
        url: APP_URL + '/backend/delete-plan/' + planId,
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          if (data.status) {
            window.location.href = APP_URL + '/backend/billing#Subscription-tab';
            window.location.reload();
          }
        },
        error: function(res) {
          ajax_error(res);
        }
      });
    }
  });

});
</script>
@endsection