@extends('layouts.app')
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <div class="w-100">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                            <span class="text-capitalize breadcrumb-sub-title"><small>{{ $pageDescription }}</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="userDatatable global-shadow border p-30 bg-white radius-xl w-100 mb-30">
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th><span class="userDatatable-title">Purity</span></th>
                                        <th><span class="userDatatable-title">Buy Price per Gram</span></th>
                                        <th><span class="userDatatable-title">Sell Price per Gram</span></th>
                                        <th><span class="userDatatable-title">Status</span></th>
                                        <th><span class="userDatatable-title">Approved By</span></th>
                                        <th><span class="userDatatable-title">Last Updated</span></th>
                                        <th><span class="userDatatable-title">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody id="item-table-body">
                                    @forelse ($spot_price as $gold)
                                        <tr class="item-row" data-created-at="{{ $gold->created_at?->format('Y-m-d') }}">
                                            <td>
                                                <div class="userDatatable-content item-searchable">{{ $gold->purity }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">RM {{ number_format($gold->ask_price ?? 0, 2) }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">RM {{ number_format($gold->bid_price ?? 0, 2) }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    @switch((int) $gold->status)
                                                        @case(2)
                                                            <span class="badge bg-light-warning text-warning">Pending Approval</span>
                                                        @break

                                                        @case(1)
                                                            <span class="badge bg-light-success text-success">Approved</span>
                                                        @break

                                                        @default
                                                            <span class="badge bg-light-secondary text-secondary">{{ $gold->status ?? '-' }}</span>
                                                    @endswitch
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $gold->approve_by ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $gold->updated_at?->format('d M Y, h:i A') ?? '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content d-flex align-items-center" style="gap: 14px;">
                                                    <a href="#" class="item-action-link text-primary js-edit-gold-btn"
                                                        data-toggle="modal" data-target="#edit-gold-modal"
                                                        data-url="{{ route('gold.update', $gold->purity) }}"
                                                        data-purity="{{ $gold->purity }}"
                                                        data-ask="{{ $gold->ask_price }}"
                                                        data-bid="{{ $gold->bid_price }}">
                                                        <i class="la la-edit"></i> Edit
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center">No records found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <p id="item-no-results" class="text-center mt-20 mb-0" style="display:none;">No matching records found.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-gold-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="edit-gold-form" method="POST" action="">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Gold Price &mdash; Purity <span id="edit-gold-purity"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="ask_price">Buy Price per Gram (RM) <span class="text-danger">*</span></label>
                            <input type="number" name="ask_price" id="ask_price" class="form-control" step="0.01"
                                min="0" required>
                        </div>
                        <div class="form-group">
                            <label for="bid_price">Sell Price per Gram (RM) <span class="text-danger">*</span></label>
                            <input type="number" name="bid_price" id="bid_price" class="form-control" step="0.01"
                                min="0" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('styles')
<style>
   .item-action-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: none;
      border: none;
      padding: 0;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: opacity 0.15s ease-in-out;
   }

   .item-action-link i {
      font-size: 15px;
   }

   .item-action-link:hover:not(:disabled) {
      text-decoration: underline;
   }

   .item-action-link:disabled {
      opacity: 0.5;
      cursor: not-allowed;
   }
</style>
@endsection

@section('scripts')
<script>
   $(function () {
      var $rows = $('#item-table-body tr.item-row');
      var $search = $('#item-search');
      var $dateFrom = $('#item-date-from');
      var $dateTo = $('#item-date-to');
      var $noResults = $('#item-no-results');

      function applyFilters() {
         var value = $search.val().toLowerCase().trim();
         var dateFrom = $dateFrom.val();
         var dateTo = $dateTo.val();
         var visibleCount = 0;

         $rows.each(function () {
            var $row = $(this);
            var matchesSearch = $row.find('.item-searchable').text().toLowerCase().indexOf(value) > -1;
            var createdAt = $row.data('created-at');
            var matchesDateFrom = !dateFrom || (createdAt && createdAt >= dateFrom);
            var matchesDateTo = !dateTo || (createdAt && createdAt <= dateTo);
            var matches = matchesSearch && matchesDateFrom && matchesDateTo;

            $row.toggle(matches);
            if (matches) {
               visibleCount++;
            }
         });

         $noResults.toggle(visibleCount === 0);
      }

      $search.on('keyup', applyFilters);
      $dateFrom.add($dateTo).on('change', applyFilters);

      $('#edit-gold-modal').on('show.bs.modal', function (e) {
         var $button = $(e.relatedTarget);

         function toTwoDecimals(value) {
            var number = parseFloat(value);
            return isNaN(number) ? '' : number.toFixed(2);
         }

         $('#edit-gold-form').attr('action', $button.data('url'));
         $('#edit-gold-purity').text($button.data('purity'));
         $('#ask_price').val(toTwoDecimals($button.data('ask')));
         $('#bid_price').val(toTwoDecimals($button.data('bid')));
      });

      var goldForm = document.getElementById('edit-gold-form');

      goldForm.addEventListener('submit', function (e) {
         if (!goldForm.checkValidity()) {
            goldForm.reportValidity();
            return;
         }

         e.preventDefault();

         var purity = $('#edit-gold-purity').text();

         Swal.fire({
            icon: 'question',
            title: 'Save changes to Purity ' + purity + '?',
            text: 'This will submit the new buy and sell prices for approval.',
            showCancelButton: true,
            confirmButtonText: 'Yes, save',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#19bdb4',
         }).then(function (result) {
            if (result.isConfirmed) {
               goldForm.submit();
            }
         });
      });

      $('#item-table-body').on('click', '.js-delete-item-btn', function (e) {
         e.preventDefault();

         var url = $(this).data('url');

         Swal.fire({
            icon: 'warning',
            title: 'Delete this record?',
            text: 'This action cannot be undone.',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete',
            cancelButtonText: 'Cancel',
            confirmButtonColor: '#ff4d4f',
         }).then(function (result) {
            if (result.isConfirmed) {
               var $form = $('<form>', { method: 'POST', action: url });
               $form.append($('<input>', {
                  type: 'hidden',
                  name: '_token',
                  value: $('meta[name="csrf-token"]').attr('content'),
               }));
               $('body').append($form);
               $form.submit();
            }
         });
      });
   });
</script>
@endsection