@extends('Branch.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Stock Request — #{{ $billing->id }}</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('branch.stock_requests_page') }}" class="btn btn-label-secondary">Back</a>
        </div>
    </div> --}}

    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5 class="mb-0">

                <a href="{{ route('branch.stock_requests_page') }}" class="btn btn-icon bg-white me-2"
                    style="box-shadow: 0 9px 12px -2px #66328e1f;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>

                Stock Request

            </h5>

        </div>

    </div>

    <div class="card p-3 m-2">
        <div class="table-responsive">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Product ID</th>
                        <th>Product Name</th>
                        <th>Old Stock</th>
                        <th>added stock</th>
                        <th>New Stock</th>
                        <th>Unit</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($billing->items as $i => $item)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $item->product->product_id ?? '-' }}</td>
                            <td>{{ $item->product->product_name ?? '-' }}</td>
                            <td>{{ $item->old_stock }}</td>
                            <td>{{ $item->added_stock }}</td>
                            <td>{{ $item->new_stock }}</td>
                            <td>{{ $item->stock_unit }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($billing->status === 'pending')
            <div class="d-flex justify-content-end mt-3">
                <button type="button" id="approveBtn" class="btn btn-primary">Approve & Update Stock</button>
            </div>
        @else
            <div class="text-end mt-3 text-success fw-bold">Already approved on
                {{ $billing->approved_at?->format('d-m-Y h:i A') }}
            </div>
        @endif
    </div>

    <!-- Confirm Approve Modal -->
    <div class="modal fade" id="confirmApproveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 p-3">
                <div class="modal-header border-0">
                    <h5 class="modal-title">Approve Stock Request</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Approve this request and update stock for <strong>{{ $billing->items->count() }}</strong> product(s)?
                    .
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="confirmApproveBtn" class="btn btn-primary">Yes, Approve</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('#approveBtn').on('click', function () {
            $('#confirmApproveModal').modal('show');
        });

        $('#confirmApproveBtn').on('click', function () {
            const btn = $(this);
            btn.prop('disabled', true).text('Approving...');

            $.ajax({
                url: "{{ route('branch.stock_request_approve', $billing->id) }}",
                type: "POST",
                data: { _token: $('meta[name="csrf-token"]').attr('content') },
                success: function (response) {
                    if (response.status) {
                        showToast(response.message, 'success');
                        $('#confirmApproveModal').modal('hide');
                        setTimeout(() => window.location.href = "{{ route('branch.stock_requests_page') }}", 800);
                    }
                },
                error: function (xhr) {
                    showToast(xhr.responseJSON?.message || 'Approve failed.', 'error');
                },
                complete: function () {
                    btn.prop('disabled', false).text('Yes, Approve');
                }
            });
        });
    </script>
@endsection