@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">
                                <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
                        @if($mutation->rejectedBy)
                        <div class="form-group">
                            <label><strong>Ditolak Oleh:</strong></label>
                            <p>{{ $mutation->rejectedBy->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Tanggal Ditolak:</strong></label>
                            <p>{{ $mutation->rejected_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @endif
                        @if($mutation->cancelledBy)
                        <div class="form-group">
                            <label><strong>Dibatalkan Oleh:</strong></label>
                            <p>{{ $mutation->cancelledBy->name }}</p>
                        </div>
                        <div class="form-group">
                            <label><strong>Tanggal Dibatalkan:</strong></label>
                            <p>{{ $mutation->cancelled_at->format('d/m/Y H:i:s') }}</p>
                        </div>
                        @endif
                    </div>
                </div>
                <!-- Notes Section -->
                @if($mutation->shipping_notes)
                <div class="form-group">
                    <label><strong>Catatan Pengiriman:</strong></label>
                    <div class="alert alert-info">{{ $mutation->shipping_notes }}</div>
                </div>
                @endif
                @if($mutation->reception_notes)
                <div class="form-group">
                    <label><strong>Catatan Penerimaan:</strong></label>
                    <div class="alert alert-primary">{{ $mutation->reception_notes }}</div>
                </div>
                @endif
                @if($mutation->approval_notes)
                <div class="form-group">
                    <label><strong>Catatan Persetujuan:</strong></label>
                    <div class="alert alert-success">{{ $mutation->approval_notes }}</div>
                </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
                @if($mutation->cancellation_reason)
                <div class="form-group">
                    <label><strong>Alasan Pembatalan:</strong></label>
                    <div class="alert alert-warning">{{ $mutation->cancellation_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 mutation-detail-table">
                        <thead>
                            <tr>
                                <th width="5%">No.</th>
                                <th width="25%">Nama Produk</th>
                                <th width="15%" class="text-center">Jumlah Diminta</th>
                                <th width="15%" class="text-center">Jumlah Disetujui</th>
                                <th width="15%" class="text-center">Status Approval</th>
                                <th width="25%">Catatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($mutation->mutationDetails as $index => $detail)
                            <tr>
                                <td class="text-center">{{ $index + 1 }}</td>
                                <td>{{ $detail->product->name }}</td>
                                <td class="text-center">{{ number_format($detail->quantity_requested, 2) }}</td>
                                <td class="text-center">
                                    @if($mutation->status->value === 'received' || $mutation->status->value === 'approved')
                                        {{ number_format($detail->quantity_approved ?? 0, 2) }}
                                    @else
                                        <span class="text-muted">Belum ditentukan</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @php
                                        $textColorClass = match($detail->approval_status_color) {
                                            'success' => 'text-success',
                                            'warning' => 'text-warning', 
                                            'danger' => 'text-danger',
                                            'info' => 'text-info',
                                            default => 'text-muted'
                                        };
                                    @endphp
                                    <span class="font-weight-bold {{ $textColorClass }}">
                                        {{ $detail->approval_status }}
                                    </span>
                                </td>
                                <td>{{ $detail->notes ?? '-' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="kt-font-bold">
                                <td colspan="2" class="text-right">Total</td>
                                <td class="text-center">{{ number_format($mutation->mutationDetails->sum('quantity_requested'), 2) }}</td>
                                <td class="text-center">
                                    @if($mutation->status->value === 'received' || $mutation->status->value === 'approved')
                                        {{ 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{{ $mutation->id }}">
                                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-toggle="modal" data-target="#approveModal{{ $mutation->id }}" data-id="{{ $mutation->id }}">
                                Setujui Mutasi
                            </button>
                            <!-- Reject Button for sender or admin -->
                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#rejectModal">
                                Tolak Mutasi
                            </button>
                        @endif

                        @if($mutation->status->value === 'approved')
                            <!-- Stock has already been moved automatically after approval -->
                            <span class="badge badge-success">Stock Telah Dipindahkan</span>
                        @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">
                                Batalkan Mutasi
                            </button>
                        @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{{ $mutation->id }}" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered" 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" aria-label="Close">
                    <span aria-hidden="true">&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>
                    
                    @if($mutation->shipping_notes)
                    <div class="form-group">
                        <label><strong>Catatan dari Pengirim:</strong></label>
                        <div class="alert alert-warning">
                            <i class="fa fa-info-circle mr-2"></i>
                            {{ $mutation->shipping_notes }}
                        </div>
                    </div>
                    @endif
                    
                    <div class="form-group">
                        <label>Catatan Penerimaan</label>
                        <textarea name="reception_notes" class="form-control" rows="3" placeholder="Catatan kondisi barang saat diterima (opsional)"></textarea>
                    </div>

                    <h6>Detail Produk yang Diterima:</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Produk</th>
                                    <th width="15%" class="text-center">Qty Diminta</th>
                                    <th width="15%" class="text-center">Qty Diterima</th>
                                    <th width="35%">Catatan Produk</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($mutation->mutationDetails as $index => $detail)
                                <tr>
                                    <td>{{ $detail->product->name }}</td>
                                    <td class="text-center">{{ number_format($detail->quantity_requested, 2) }}</td>
                                    <td class="text-center">
                                        <input type="number" 
                                               name="products[{{ $detail->id }}][quantity_approved]" 
                                               class="form-control form-control-sm text-center" 
                                               value="{{ $detail->quantity_requested }}"
                                               min="0" 
                                               max="{{ $detail->quantity_requested }}"
                                               step="0.01" 
                                               required>
                                    </td>
                                    <td>
                                        <input type="text" 
                                               name="products[{{ $detail->id }}][notes]" 
                                               class="form-control form-control-sm" 
                                               placeholder="Catatan kondisi produk saat diterima">
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <p class="text-muted">Setelah menerima, mutasi akan menunggu persetujuan dari pengirim. Stock akan dipindahkan otomatis setelah disetujui.</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 Mutasi</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" aria-labelledby="approveModalLabel{{ $mutation->id }}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="approveModalLabel{{ $mutation->id }}">Setujui Mutasi</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('mutations.approve', $mutation->id) }}" method="POST" class="approve-form">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>Konfirmasi!</strong> Anda akan menyetujui mutasi yang telah diterima oleh <strong>{{ $mutation->toDealer->name }}</strong>.
                    </div>
                    
                    <div class="form-group">
                        <label>Catatan Persetujuan</label>
                        <textarea name="approval_notes" class="form-control" rows="3" placeholder="Opsional: tambahkan catatan..."></textarea>
                    </div>
                    
                    <h6>Detail Produk yang Diterima:</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Produk</th>
                                    <th width="20%" class="text-center">Qty Diminta</th>
                                    <th width="20%" class="text-center">Qty Diterima</th>
                                    <th width="30%">Catatan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($mutation->mutationDetails as $detail)
                                <tr>
                                    <td>{{ $detail->product->name }}</td>
                                    <td class="text-center">{{ number_format($detail->quantity_requested, 2) }}</td>
                                    <td class="text-center">
                                        <span class="font-weight-bold {{ $detail->quantity_approved < $detail->quantity_requested ? 'text-warning' : 'text-success' }}">
                                            {{ number_format($detail->quantity_approved, 2) }}
                                        </span>
                                        @if($detail->quantity_approved < $detail->quantity_requested)
                                            <small class="text-muted d-block">
                                                (Kurang {{ number_format($detail->quantity_requested - $detail->quantity_approved, 2) }})
                                            </small>
                                        @endif
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $detail->notes ?: '-' }}</small>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <p class="text-muted">Setelah disetujui, stock akan dipindahkan secara otomatis.</p>
                </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 modal-dialog-centered" 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" aria-label="Close">
                    <span aria-hidden="true">&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->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 modal-dialog-centered" 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" aria-label="Close">
                    <span aria-hidden="true">&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>
                    <div class="form-group">
                        <label>Alasan Pembatalan</label>
                        <textarea name="cancellation_reason" class="form-control" rows="3" placeholder="Masukkan alasan pembatalan (opsional)"></textarea>
                    </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('styles')
<style>
/* Custom CSS for mutation detail table alignment */
.mutation-detail-table {
    table-layout: fixed;
}

.mutation-detail-table th,
.mutation-detail-table td {
    vertical-align: middle;
}

.mutation-detail-table .text-center {
    text-align: center !important;
}

/* Ensure proper alignment in approval modal */
.approve-form .form-control.text-center {
    text-align: center;
}

/* Ensure modal backdrop is properly removed */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

/* Force remove any blocking overlays */
body.modal-open {
    overflow: hidden;
}

body:not(.modal-open) {
    overflow: auto !important;
    padding-right: 0 !important;
}

/* Ensure all modals are centered */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
    display: block;
    height: calc(100vh - 1rem);
    content: "";
}

.modal-dialog-centered.modal-dialog-centered-sm {
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
    
    .modal-dialog-centered::before {
        height: calc(100vh - 3.5rem);
    }
}
</style>
@endsection

@section('javascripts')
<script>
$(document).ready(function() {
    // Handle Approve Button Click
    $(document).on('click', '.btn-approve', function() {
        var mutationId = $(this).data('id');
        $('#approveModal' + mutationId).modal('show');
    });
    
    // Handle modal close events
    $('.modal').on('hidden.bs.modal', function () {
        // Reset form
        if ($(this).find('form').length > 0) {
            $(this).find('form')[0].reset();
        }
        
        // Remove modal backdrop manually if it exists
        $('.modal-backdrop').remove();
        
        // Ensure body is not blocked
        $('body').removeClass('modal-open');
        $('body').css('padding-right', '');
        
        // Remove any overlay that might be blocking
        $('.modal-backdrop, .fade.show').remove();
    });
    
    // Additional cleanup for approve modal specifically
    $(document).on('click', '[data-dismiss="modal"]', function() {
        var $modal = $(this).closest('.modal');
        $modal.modal('hide');
        
        setTimeout(function() {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
            $('body').css('padding-right', '');
            
            // Force remove any remaining overlays
            $('.modal-backdrop, .modal-open').remove();
            $('body').removeClass('modal-open');
        }, 300);
    });
    
    // Force cleanup on any modal hide
    $(document).on('hide.bs.modal', '.modal', function() {
        setTimeout(function() {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
            $('body').css('padding-right', '');
        }, 100);
    });

    // Validate quantity approved in receive modal
    $(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">Quantity tidak boleh melebihi yang diminta</div>');
            }
        } else {
            $(this).removeClass('is-invalid');
            $(this).siblings('.invalid-feedback').remove();
        }
    });
});
</script>
@endsection