@extends('app')
@section('title_header', 'Senarai Sumbangan')
@section('header')
    Senarai Sumbangan
@endsection
@push('styles')
@endpush
@section('content')
   <section>
       <div class="card card-outline card-info">
           <div class="card-header">
               <h5 class="font-weight-bold float-left">Log Derma</h5>
               <div class="float-right">
                   <label for="filterYear">Filter Tahun:</label>
                   <select id="filterYear" class="form-control" style="width: 150px; display: inline-block;">
                       <option value="">All</option>
                       @for ($y = now()->year; $y >= 2020; $y--)
                           <option value="{{ $y }}">{{ $y }}</option>
                       @endfor
                   </select>
               </div>
           </div>
           <div class="card-body">
               <table id="table_data" class="table table-bordered table-sm">
                   <thead>
                       <tr class="text-sm">
                           <th>#</th>
                           <th>Order Id</th>
                           <th>Masjid</th>
                           @if (Auth::user()->role != 3)
                               <th>Nama User</th>
                           @endif
                           <th>Category</th>
                           <th>Amount</th>
                           <th>Type</th>
                           <th>Status</th>
                           <th>Paid At</th>
                           <th>Url Payment</th>
                           <th>Actions</th>
                       </tr>
                   </thead>
                   <tbody>
                   </tbody>
               </table>
           </div>
       </div>
   </section>

   <!-- Modal Detail -->
   <div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modalDetailLabel"
       aria-hidden="true">
       <div class="modal-dialog modal-lg">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title">Detail Transaksi</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
               </div>
               <div class="modal-body">
                   <table class="table table-sm table-bordered">
                       <tr>
                           <th>Order Id</th>
                           <td id="detailOrderId"></td>
                       </tr>
                       <tr>
                           <th>Masjid</th>
                           <td id="detailMasjid"></td>
                       </tr>
                       <tr>
                           <th>Nama User</th>
                           <td id="detailUser"></td>
                       </tr>
                       <tr>
                           <th>Category</th>
                           <td id="detailCategory"></td>
                       </tr>
                       <tr>
                           <th>Type</th>
                           <td id="detailType"></td>
                       </tr>
                       <tr>
                           <th>Amount</th>
                           <td id="detailAmount"></td>
                       </tr>
                       <tr>
                           <th>Status</th>
                           <td id="detailStatus"></td>
                       </tr>
                       <tr>
                           <th>Url</th>
                           <td id="detailUrl"></td>
                       </tr>
                       <tr>
                           <th>Paid At</th>
                           <td id="detailPaidAt"></td>
                       </tr>
                       <tr>
                           <th>Created At</th>
                           <td id="detailCreatedAt"></td>
                       </tr>
                   </table>
               </div>
           </div>
       </div>
   </div>

   <!-- Modal Update -->
   <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="modalUpdateLabel"
       aria-hidden="true">
       <div class="modal-dialog">
           <div class="modal-content">
               <form id="formUpdate">
                   <div class="modal-header">
                       <h5 class="modal-title">Update Transaksi</h5>
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                   </div>
                   <div class="modal-body">
                       <input type="hidden" id="updateId">
                       <div class="form-group">
                           <label>Status</label>
                           <select id="updateStatus" class="form-control">
                               <option value="SUCCESS">SUCCESS</option>
                               <option value="FAILED">FAILED</option>
                           </select>
                       </div>
                       <div class="form-group">
                           <label>Type</label>
                           <input type="text" id="updateType" class="form-control">
                       </div>
                   </div>
                   <div class="modal-footer">
                       <button type="submit" class="btn btn-primary">Update</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                   </div>
               </form>
           </div>
       </div>
   </div>

@endsection
@push('scripts')
   <script>
       $(document).ready(function() {
           let table = $('#table_data').DataTable({
               processing: true,
               serverSide: true,
               responsive: true,
               ajax: {
                   url: '/api/payment/get',
                   type: 'GET',
                   headers: {
                       'Authorization': 'Bearer ' + localStorage.getItem('token')
                   },
                   data: function(d) {
                       d.year = $('#filterYear').val();
                   }
               },
               columns: [{
                       data: 'DT_RowIndex',
                       name: 'DT_RowIndex',
                       orderable: false,
                       searchable: false
                   },
                   {
                       data: 'order_id',
                       name: 'order_id',
                       render: function(data, type, row) {
                           if (data) {
                               return `<div class="input-group">
                       <input type="text" class="form-control form-control-sm" value="${data}" id="order-${row.id}" readonly>
                       <button class="btn btn-sm btn-secondary" onclick="copyUrl('order-${row.id}')">
                           <i class="fa fa-copy"></i>
                       </button>
                   </div>`;
                           }
                           return '-';
                       },
                       orderable: false,
                       searchable: false
                   },
                   {
                       data: 'masjid_name',
                       name: 'masjid.nama_mesjid'
                   },
                   @if (Auth::user()->role != 3)
                       {
                           data: 'user_name',
                           name: 'user.name'
                       },
                   @endif
                   {
                       data: 'category_name',
                       name: 'category.name'
                   },
                   {
                       data: 'amount',
                       name: 'amount',
                       render: $.fn.dataTable.render.number(',', '.', 0, 'RM ')
                   },
                   {
                       data: 'type',
                       name: 'type'
                   },
                   {
                       data: 'status',
                       name: 'status'
                   },
                   {
                       data: 'created_at',
                       name: 'created_at',
                       render: function(data) {
                           return data ? moment(data).format('DD/MM/YYYY HH:mm') : '-';
                       }
                   },
                   {
                       data: 'url',
                       name: 'url',
                       render: function(data, type, row) {
                           if (data) {
                               return `<div class="input-group">
                                           <input type="text" class="form-control form-control-sm" value="${data}" id="url-${row.id}" readonly>
                                           <button class="btn btn-sm btn-secondary" onclick="copyUrl('url-${row.id}')">
                                               <i class="fa fa-copy"></i>
                                           </button>
                                       </div>`;
                           }
                           return '-';
                       },
                       orderable: false,
                       searchable: false
                   },
                   {
                       data: 'action',
                       name: 'action',
                       orderable: false,
                       searchable: false
                   }
               ],
               order: [
                   [0, 'desc']
               ],
               responsive: true,
               autoWidth: false,
           });
           $('#filterYear').change(function() {
               table.ajax.reload();
           });
       });

       function copyUrl(elementId) {
           var copyText = document.getElementById(elementId);
           copyText.select();
           copyText.setSelectionRange(0, 99999); // untuk mobile
           document.execCommand("copy");
           alert("URL berhasil dicopy: " + copyText.value);
       }

       function viewDetail(id) {
           $.ajax({
               url: '/api/payment/get/' + id,
               type: 'GET',
               headers: {
                   'Authorization': 'Bearer ' + localStorage.getItem('token')
               },
               success: function(res) {
                   const t = res.data;
                   $('#detailOrderId').text(t.order_id || '-');
                   $('#detailMasjid').text(t.masjid?.nama_mesjid || '-');
                   $('#detailUser').text(t.user?.name || '-');
                   $('#detailCategory').text(t.category?.name || '-');
                   $('#detailType').text(t.type || '-');
                   $('#detailAmount').text('RM ' + Number(t.amount).toLocaleString());
                   $('#detailStatus').text(t.status || '-');
                   $('#detailPaidAt').text(t.created_at ? moment(t.created_at).format('DD/MM/YYYY HH:mm') : '-');
                   $('#detailUrl').text(t.url || '-');
                   $('#detailCreatedAt').text(moment(t.created_at).format('DD/MM/YYYY HH:mm'));
                   $('#modalDetail').modal('show');
               },
               error: function(err) {
                   alert('Failed fetch data');
               }
           });
       }

       function editTransaction(id) {
           $.ajax({
               url: '/api/payment/get/' + id,
               type: 'GET',
               headers: {
                   'Authorization': 'Bearer ' + localStorage.getItem('token')
               },
               success: function(res) {
                   const t = res.data;
                   $('#updateId').val(t.id);
                   $('#updateStatus').val(t.status);
                   $('#updateType').val(t.type);
                   $('#modalUpdate').modal('show');
               },
               error: function(err) {
                   alert('Failed fetch data');
               }
           });
       }

       // Submit update
       $('#formUpdate').submit(function(e) {
           e.preventDefault();
           const id = $('#updateId').val();
           $.ajax({
               url: '/api/payment/update/' + id,
               type: 'POST',
               headers: {
                   'Authorization': 'Bearer ' + localStorage.getItem('token'),
                   'X-CSRF-TOKEN': '{{ csrf_token() }}'
               },
               data: {
                   status: $('#updateStatus').val(),
                   type: $('#updateType').val()
               },
               success: function(res) {
                   alert(res.message || 'Successfully updated');
                   $('#modalUpdate').modal('hide');
                   $('#table_data').DataTable().ajax.reload(null, false);
               },
               error: function(err) {
                   alert(err.responseJSON.message || 'Failed update');
               }
           });
       });
   </script>
@endpush