@extends('layouts.app')
@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('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">Updated By</span></th>
                                        <th><span class="userDatatable-title">Updated At</span></th>
                                        <th><span class="userDatatable-title">Approval</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">{{ $item->percent_buy }} ->
                                                    {{ $item->request_buy }} (new)</div>
                                            </td>
                                            <td>
                                                <div class="userDatatable-content">{{ $item->percent_sell }} ->
                                                    {{ $item->request_sell }} (new)</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 d-flex align-items-center"
                                                    style="gap: 14px;">
                                                    <button type="button"
                                                        class="item-action-link text-success js-approve-spread-btn"
                                                        data-url="{{ route('spread.approval.update', $item->purity) }}"
                                                        data-purity="{{ $item->purity }}">
                                                        <i class="la la-check-circle"></i> Approve
                                                    </button>
                                                    <button type="button"
                                                        class="item-action-link text-danger js-reject-spread-btn"
                                                        data-url="{{ route('spread.approval.reject', $item->purity) }}"
                                                        data-purity="{{ $item->purity }}">
                                                        <i class="la la-close"></i> Reject
                                                    </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 requests pending approval.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function submitSpreadAction(url, data) {
            var $form = $('<form>', {
                method: 'POST',
                action: url
            });
            $form.append($('<input>', {
                type: 'hidden',
                name: '_token',
                value: $('meta[name="csrf-token"]').attr('content')
            }));

            $.each(data || {}, function(name, value) {
                $form.append($('<input>', {
                    type: 'hidden',
                    name: name,
                    value: value
                }));
            });

            $('body').append($form);
            $form.submit();
        }

        $(function() {
            $('table').on('click', '.js-approve-spread-btn', function(e) {
                e.preventDefault();

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

                Swal.fire({
                    icon: 'question',
                    title: 'Approve spread request for Purity ' + purity + '?',
                    text: 'This will apply the requested buy and sell spread percentages.',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, approve',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#19bdb4',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        submitSpreadAction(url);
                    }
                });
            });

            $('table').on('click', '.js-reject-spread-btn', function(e) {
                e.preventDefault();

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

                Swal.fire({
                    icon: 'warning',
                    title: 'Reject spread request for Purity ' + purity + '?',
                    text: 'This will discard the requested buy and sell spread percentages.',
                    input: 'textarea',
                    inputPlaceholder: 'Enter reason for rejection...',
                    inputValidator: function(value) {
                        if (!value || !value.trim()) {
                            return 'A reason is required to reject this request.';
                        }
                    },
                    showCancelButton: true,
                    confirmButtonText: 'Yes, reject',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#ff4d4f',
                }).then(function(result) {
                    if (result.isConfirmed) {
                        submitSpreadAction(url, {
                            reason: result.value.trim()
                        });
                    }
                });
            });
        });
    </script>
@endsection