@extends('layouts.backapp')

@section('content')
<div class="row">
    <div class="col-lg-12">
        <!-- Mutation Header -->
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        Detail Mutasi - {{ $mutation->mutation_number }}
                    </h3>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <div class="kt-portlet__head-actions">
                            <a href="{{ route('mutations.index') }}" class="btn btn-secondary btn-sm">
                                <i class="la la-arrow-left"></i>
                                Kembali
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label><strong>No. Mutasi:</strong></label>
                            <p>{{ $mutation->mutation_number }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Dari Dealer:</strong></label>
                            <p>{{ $mutation->fromDealer->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Ke Dealer:</strong></label>
                            <p>{{ $mutation->toDealer->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Status:</strong></label>
                            <p>
                                <span class="kt-badge kt-badge--{{ $mutation->status_color }} kt-badge--dot"></span>
                                <span class="kt-font-bold kt-font-{{ $mutation->status_color }}">{{ $mutation->status_label }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label><strong>Dibuat Oleh:</strong></label>
                            <p>{{ $mutation->requestedBy->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Tanggal Dibuat:</strong></label>
                            <p>{{ $mutation->created_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @if($mutation->receivedBy)
                        <div class="form-group">
                            <label><strong>Diterima Oleh:</strong></label>
                            <p>{{ $mutation->receivedBy->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Tanggal Diterima:</strong></label>
                            <p>{{ $mutation->received_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @endif
                        @if($mutation->approvedBy)
                        <div class="form-group">
                            <label><strong>Disetujui Oleh:</strong></label>
                            <p>{{ $mutation->approvedBy->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Tanggal Disetujui:</strong></label>
                            <p>{{ $mutation->approved_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @endif
                    </div>
                </div>
                @if($mutation->notes)
                <div class="form-group">
                    <label><strong>Catatan:</strong></label>
                    <p>{{ $mutation->notes }}</p>
                </div>
                @endif
                @if($mutation->rejection_reason)
                <div class="form-group">
                    <label><strong>Alasan Penolakan:</strong></label>
                    <div class="alert alert-danger">{{ $mutation->rejection_reason }}</div>
                </div>
                @endif
            </div>
        </div>

        <!-- Mutation Details -->
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        Detail Produk
                    </h3>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Nama Produk</th>
                                <th>Jumlah Diminta</th>
                                <th>Jumlah Disetujui</th>
                                <th>Status Approval</th>
                                <th>Catatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($mutation->mutationDetails as $index => $detail)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $detail->product->name }}</td>
                                <td>{{ number_format($detail->quantity_requested, 2) }}</td>
                                <td>
                                    @if($mutation->status->value === 'received' || $mutation->status->value === 'approved' || $mutation->status->value === 'completed')
                                        {{ number_format($detail->quantity_approved ?? 0, 2) }}
                                    @else
                                        <span class="text-muted">Belum ditentukan</span>
                                    @endif
                                </td>
                                <td>
                                    @if($mutation->status->value === 'received' || $mutation->status->value === 'approved' || $mutation->status->value === 'completed')
                                        <span class="kt-badge kt-badge--{{ $detail->approval_status_color }} kt-badge--pill">
                                            {{ $detail->approval_status }}
                                        </span>
                                    @else
                                        <span class="kt-badge kt-badge--secondary kt-badge--pill">Menunggu</span>
                                    @endif
                                </td>
                                <td>{{ $detail->notes ?? '-' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="kt-font-bold">
                                <td colspan="2">Total</td>
                                <td>{{ number_format($mutation->mutationDetails->sum('quantity_requested'), 2) }}</td>
                                <td>
                                    @if($mutation->status->value === 'received' || $mutation->status->value === 'approved' || $mutation->status->value === 'completed')
                                        {{ number_format($mutation->mutationDetails->sum('quantity_approved'), 2) }}
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="kt-portlet">
            <div class="kt-portlet__body">
                <div class="row">
                    <div class="col-lg-12">
                        @if($mutation->status->value === 'sent' && auth()->user()->dealer_id == $mutation->to_dealer_id)
                            <!-- Receive Button for destination dealer -->
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#receiveModal">
                                <i class="la la-download"></i>
                                Terima Mutasi
                            </button>
                        @endif

                        @if($mutation->status->value === 'received' && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
                            <!-- Approve Button for sender or admin -->
                            <button type="button" class="btn btn-success btn-approve" data-id="{{ $mutation->id }}">
                                <i class="la la-check"></i>
                                Setujui Mutasi
                            </button>
                            <!-- Reject Button for sender or admin -->
                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#rejectModal">
                                <i class="la la-times"></i>
                                Tolak Mutasi
                            </button>
                        @endif

                        @if($mutation->status->value === 'approved')
                            <!-- Complete Button -->
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#completeModal">
                                <i class="la la-check-circle"></i>
                                Selesaikan Mutasi
                            </button>
                        @endif

                        @if($mutation->canBeCancelled() && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
                            <!-- Cancel Button -->
                            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#cancelModal">
                                <i class="la la-ban"></i>
                                Batalkan Mutasi
                            </button>
                        @endif

                        @if($mutation->status->value === 'completed')
                            <!-- Print Button -->
                            <a href="{{ route('mutations.print', $mutation->id) }}" class="btn btn-info" target="_blank">
                                <i class="la la-print"></i>
                                Cetak Laporan
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modals -->
@if($mutation->status->value === 'sent' && auth()->user()->dealer_id == $mutation->to_dealer_id)
<!-- Receive Modal -->
<div class="modal fade" id="receiveModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Terima Mutasi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('mutations.receive', $mutation->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>Konfirmasi!</strong> Anda akan menerima mutasi dari <strong>{{ $mutation->fromDealer->name }}</strong>.
                    </div>
                    <p>Setelah menerima, mutasi akan menunggu persetujuan dari pengirim sebelum stock dipindahkan.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Ya, Terima</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if($mutation->status->value === 'received' && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
<!-- Approve Modal -->
<div class="modal fade" id="approveModal{{ $mutation->id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Setujui Mutasi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('mutations.approve', $mutation->id) }}" method="POST" class="approve-form">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Catatan Persetujuan</label>
                        <textarea name="notes" class="form-control" rows="3" placeholder="Opsional: tambahkan catatan..."></textarea>
                    </div>
                    
                    <!-- Detail produk akan dimuat via AJAX -->
                    <div id="mutation-details{{ $mutation->id }}">
                        <div class="text-center">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p>Memuat detail produk...</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success">Setujui Mutasi</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tolak Mutasi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('mutations.reject', $mutation->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <strong>Peringatan!</strong> Mutasi yang ditolak tidak dapat diubah lagi.
                    </div>
                    <div class="form-group">
                        <label>Alasan Penolakan <span class="text-danger">*</span></label>
                        <textarea name="rejection_reason" class="form-control" rows="3" required placeholder="Masukkan alasan penolakan..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger">Tolak Mutasi</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if($mutation->status->value === 'approved')
<!-- Complete Modal -->
<div class="modal fade" id="completeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Selesaikan Mutasi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('mutations.complete', $mutation->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>Konfirmasi!</strong> Stock akan dipindahkan dari <strong>{{ $mutation->fromDealer->name }}</strong> ke <strong>{{ $mutation->toDealer->name }}</strong>.
                    </div>
                    <p>Apakah Anda yakin ingin menyelesaikan mutasi ini? Tindakan ini tidak dapat dibatalkan.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Ya, Selesaikan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@if($mutation->canBeCancelled() && (auth()->user()->dealer_id == $mutation->from_dealer_id || auth()->user()->hasRole('admin')))
<!-- Cancel Modal -->
<div class="modal fade" id="cancelModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Batalkan Mutasi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form action="{{ route('mutations.cancel', $mutation->id) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <strong>Peringatan!</strong> Mutasi yang dibatalkan tidak dapat diubah lagi.
                    </div>
                    <p>Apakah Anda yakin ingin membatalkan mutasi ini?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning">Ya, Batalkan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif
@endsection

@section('javascripts')
<script>
$(document).ready(function() {
    // Handle Approve Button Click
    $(document).on('click', '.btn-approve', function() {
        var mutationId = $(this).data('id');
        
        // Load mutation details via AJAX
        $.ajax({
            url: '/warehouse/mutations/' + mutationId + '/details',
            type: 'GET',
            beforeSend: function() {
                $('#mutation-details' + mutationId).html(
                    '<div class="text-center">' +
                    '<div class="spinner-border" role="status">' +
                    '<span class="sr-only">Loading...</span>' +
                    '</div>' +
                    '<p>Memuat detail produk...</p>' +
                    '</div>'
                );
            },
            success: function(response) {
                var detailsHtml = '<h6>Detail Produk:</h6>';
                detailsHtml += '<div class="table-responsive">';
                detailsHtml += '<table class="table table-sm">';
                detailsHtml += '<thead>';
                detailsHtml += '<tr>';
                detailsHtml += '<th>Produk</th>';
                detailsHtml += '<th>Diminta</th>';
                detailsHtml += '<th>Disetujui</th>';
                detailsHtml += '<th>Stock Tersedia</th>';
                detailsHtml += '</tr>';
                detailsHtml += '</thead>';
                detailsHtml += '<tbody>';
                
                response.details.forEach(function(detail, index) {
                    detailsHtml += '<tr>';
                    detailsHtml += '<td>' + detail.product.name + '</td>';
                    detailsHtml += '<td>' + parseFloat(detail.quantity_requested).toLocaleString() + '</td>';
                    detailsHtml += '<td>';
                    detailsHtml += '<input type="number" name="details[' + detail.id + '][quantity_approved]" ';
                    detailsHtml += 'class="form-control form-control-sm" ';
                    detailsHtml += 'value="' + detail.quantity_requested + '" ';
                    detailsHtml += 'min="0" max="' + Math.min(detail.quantity_requested, detail.available_stock) + '" ';
                    detailsHtml += 'step="0.01" required>';
                    detailsHtml += '</td>';
                    detailsHtml += '<td>' + parseFloat(detail.available_stock).toLocaleString() + '</td>';
                    detailsHtml += '</tr>';
                });
                
                detailsHtml += '</tbody>';
                detailsHtml += '</table>';
                detailsHtml += '</div>';
                
                $('#mutation-details' + mutationId).html(detailsHtml);
            },
            error: function() {
                $('#mutation-details' + mutationId).html('<div class="alert alert-danger">Gagal memuat detail produk</div>');
            }
        });
        
        $('#approveModal' + mutationId).modal('show');
    });

    // Auto-calculate approved quantity based on available stock
    $(document).on('input', 'input[name*="quantity_approved"]', function() {
        var maxValue = parseFloat($(this).attr('max'));
        var currentValue = parseFloat($(this).val());
        
        if (maxValue && currentValue > maxValue) {
            $(this).val(maxValue);
            $(this).addClass('is-invalid');
            if (!$(this).siblings('.invalid-feedback').length) {
                $(this).after('<div class="invalid-feedback">Jumlah melebihi stock yang tersedia</div>');
            }
        } else {
            $(this).removeClass('is-invalid');
            $(this).siblings('.invalid-feedback').remove();
        }
    });
});
</script>
@endsection