@extends('admin.layouts.app')
@section('content')
<div class="container">
  <div class="card">
    <div class="card-body">
      @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
      <div class="row">
        <form action="{{ route('admin.claim-request') }}" method="POST">
          <input type="hidden" name="id" value="{{ $ticket->id }}">
          @csrf
          <div class="row">
            <div>
              <strong>Ticket Code : </strong> <span>{{$ticket->ticket_code}}</span>
            </div>
            <div>
              @foreach ($amount as $amnt)
                <strong>Amount : </strong>  <span>$ {{ $amnt }} </span>
                <input type="hidden" name="amount" value="{{ $amnt }}">
              @endforeach
            </div>
            <div>
              @foreach ($description as $desc)
                <strong>Result : </strong> <span>{{ $desc }}</span>
              @endforeach
            </div>
            <div class="status">
              <label for="">Status</label>
              <select name="is_approved" id="statusSelect">
                <option value="">Status</option>
                <option value="1" data-action="approve" {{ $ticket->status ? 'selected' : '' }}>Approve</option>
                <option value="0" data-action="reject" {{ !$ticket->status ? 'selected' : '' }}>Reject</option>
              </select>
            </div>
          </div>
          @if($ticket->is_claimed == 1)
            <p class="text-danger">You can select only once</p>
          @else
            <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#confirmationModal">Submit</button>
          @endif
        </form> 
      </div>
    </div>
  </div>
</div>


<!-- Bootstrap Modal for Confirmation -->

<!-- Bootstrap Modal for Confirmation -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="confirmationText">
        <!-- The action text (approve or reject) will be inserted here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="confirmAction">Confirm</button>
      </div>
    </div>
  </div>
</div>

@endsection


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// $(document).ready(function() {
//   const statusSelect = $('#statusSelect');
//   const confirmationModal = $('#confirmationModal');
//   const confirmationText = $('#confirmationText');
//   const confirmActionBtn = $('#confirmAction');

//   statusSelect.on('change', function() {
//     const selectedOption = $('option:selected', this);
//     const action = selectedOption.attr('data-action');

//     if (action === 'approve' || action === 'reject') {
//       showConfirmationModal(action);
//     }
//   });

//   function showConfirmationModal(action) {
//     const actionText = action === 'approve' ? 'Approve' : 'Reject';
//     confirmationText.text(actionText + ' this request?');
//     confirmActionBtn.attr('data-action', action);
//     confirmationModal.modal('show');
//   }

// });
</script>