@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-lg-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 Spread (%)</span></th>
                                        <th><span class="userDatatable-title">Sell Spread (%)</span></th>
                                        <th><span class="userDatatable-title">Last Approved/Rejected By</span></th>
                                        <th><span class="userDatatable-title">Updated At</span></th>
                                        <th><span class="userDatatable-title">Approval Status</span></th>
                                        <th><span class="userDatatable-title">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($spread as $item)
                                        <tr>
                                            <td>
                                                <div class="userDatatable-content">{{ $item->purity }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ number_format(floor($item->percent_buy * 100) / 100, 2) }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ number_format(floor($item->percent_sell * 100) / 100, 2) }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content" style="text-transform: none;">
                                                    {{ $item->updated_by ?: '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $item->updated_at ?: '-' }}</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    @if ($item->approval == 0)
                                                        <span class="text-center">N/A</span>
                                                    @else
                                                        <span class="text-center text-warning">Pending Approval</span>
                                                    @endif
                                                </div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">
                                                    <button type="button"
                                                        class="btn btn-sm btn-primary px-15 js-edit-spread-btn"
                                                        data-toggle="modal" data-target="#edit-spread-modal"
                                                        data-url="{{ route('spread.update', $item->purity) }}"
                                                        data-purity="{{ $item->purity }}"
                                                        data-buy="{{ $item->percent_buy }}"
                                                        data-sell="{{ $item->percent_sell }}">
                                                        Edit
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center">
                                                <div class="card-body">
                                                    <div class="atbd-empty text-center">
                                                        <div class="atbd-empty__image">
                                                            <img src="{{ asset('img/folders/1.svg') }}" alt="Admin Empty">
                                                        </div>
                                                        <div class="atbd-empty__text">
                                                            <p class="">No spread configuration found.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit-spread-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form id="edit-spread-form" method="POST" action="">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Spread &mdash; Purity <span id="edit-spread-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="percent_buy">Buy Spread (%) <span class="text-danger">*</span></label>
                            <input type="number" name="percent_buy" id="percent_buy" class="form-control" step="0.0001"
                                min="0" required>
                        </div>
                        <div class="form-group">
                            <label for="percent_sell">Sell Spread (%) <span class="text-danger">*</span></label>
                            <input type="number" name="percent_sell" id="percent_sell" class="form-control" step="0.0001"
                                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('scripts')
    <script>
        $(function() {
            $('#edit-spread-modal').on('show.bs.modal', function(e) {
                var $button = $(e.relatedTarget);

                $('#edit-spread-form').attr('action', $button.data('url'));
                $('#edit-spread-purity').text($button.data('purity'));
                $('#percent_buy').val($button.data('buy'));
                $('#percent_sell').val($button.data('sell'));
            });

            var spreadForm = document.getElementById('edit-spread-form');

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

                e.preventDefault();

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

                Swal.fire({
                    icon: 'question',
                    title: 'Save changes to Purity ' + purity + '?',
                    text: 'This will update the buy and sell spread percentages.',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, save',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#19bdb4',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        spreadForm.submit();
                    }
                });
            });
        });
    </script>
@endsection