@extends('dashboard.layouts.master')
@section('title', 'Supplier Details | Admin Panel')

@push('after-styles')
<style>
    /* ── Section Headers ── */
    .section-header {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; background: #f0f4ff;
        border-left: 4px solid #002868; border-radius: 4px;
        margin: 28px 0 18px;
    }
    .section-header h5 { margin: 0; font-weight: 700; color: #002868; font-size: 15px; }

    /* ── Field labels ── */
    .info-label {
        font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
        color: #888; margin-bottom: 4px; font-weight: 700;
    }
    .info-value { font-weight: 600; color: #333; margin-bottom: 15px; }

    /* ── Status strip ── */
    .status-strip {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px; border-radius: 8px; margin-bottom: 20px;
    }
    .status-strip.pending      { background:#fff8e1; border:1px solid #ffe082; }
    .status-strip.approved     { background:#e8f5e9; border:1px solid #a5d6a7; }
    .status-strip.rejected     { background:#ffebee; border:1px solid #ef9a9a; }

    .badge-pill-lg {
        padding: 5px 14px; border-radius: 20px; font-size: 12px;
        font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .pill-pending      { background:#fff3cd; color:#856404; }
    .pill-approved     { background:#d4edda; color:#155724; }
    .pill-rejected     { background:#f8d7da; color:#721c24; }

    /* ── Action panel ── */
    .action-panel {
        border: 1px solid #e0e0e0; border-radius: 8px;
        padding: 22px; margin-top: 24px; background: #fff;
    }
    .action-panel .panel-title {
        font-weight: 700; color: #002868; font-size: 14px;
        margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
    }
</style>
@endpush

@section('content')
@if(Helper::canAccessModule('supplier_management'))

<div class="loader" id="loader"></div>
<div class="padding">
    <div class="box">
        {{-- Page Header --}}
        <div class="box-header">
            <div class="box-header-left">
                <h3 class="d-block">Supplier Details</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">Dashboard</a> /
                    <a href="{{ route('admin.suppliers.index') }}">Supplier Management</a> /
                    <span>Supplier #{{ $supplier->id }}</span>
                </small>
            </div>
            <div class="box-header-right">
                <a href="{{ route('admin.suppliers.index') }}" class="btn btn-default btn-sm">
                    <i class="material-icons md-18">arrow_back</i> Back to List
                </a>
            </div>
        </div>

        <div class="box-body">
            {{-- Status Strip --}}
            @php
                $statusClass = 'pending';
                $statusLabel = 'Pending Approval';
                $pillClass   = 'pill-pending';
                
                if ($supplier->verification_status == 'approved') { 
                    $statusClass = 'approved'; 
                    $statusLabel = 'Approved'; 
                    $pillClass   = 'pill-approved';
                } elseif ($supplier->verification_status == 'rejected') { 
                    $statusClass = 'rejected'; 
                    $statusLabel = 'Rejected'; 
                    $pillClass   = 'pill-rejected';
                }
            @endphp
            <div class="status-strip {{ $statusClass }}">
                <div>
                    <strong>Verification Status:</strong>&nbsp;
                    <span class="badge-pill-lg {{ $pillClass }}">{{ $statusLabel }}</span>
                    @if($supplier->verification_status == 'rejected')
                        <div class="text-danger m-t-xs"><small>Reason: {{ $supplier->rejection_reason }}</small></div>
                    @endif
                </div>
                <div>
                    <strong>Account Activity:</strong>&nbsp;
                    {!! $supplier->is_active ? '<span class="label success">Active</span>' : '<span class="label warning">Inactive</span>' !!}
                </div>
            </div>

            <div class="row">
                {{-- Company Info --}}
                <div class="col-md-6">
                    <div class="section-header">
                        <i class="material-icons">&#xe84f;</i>
                        <h5>Company Information</h5>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="info-label">Company Name</div>
                            <div class="info-value">{{ $supplier->supplierProfile->company_name ?? 'N/A' }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="info-label">Contact Person</div>
                            <div class="info-value">{{ $supplier->supplierProfile->contact_person ?? 'N/A' }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="info-label">Email Address</div>
                            <div class="info-value">{{ $supplier->supplierProfile->email ?? 'N/A' }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="info-label">Mobile Number</div>
                            <div class="info-value">
                                {{ ($supplier->supplierProfile->country_code ?? '') ? '+'.$supplier->supplierProfile->country_code.' ' : '' }}
                                {{ $supplier->supplierProfile->mobile ?? 'N/A' }}
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="info-label">Business Description</div>
                            <div class="info-value">{{ $supplier->supplierProfile->business_description ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>

                {{-- Contact Info --}}
                <div class="col-md-6">
                    <div class="section-header">
                        <i class="material-icons">&#xe0b0;</i>
                        <h5>Contact Details</h5>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="info-label">Email Address</div>
                            <div class="info-value">{{ $supplier->email ?? 'N/A' }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="info-label">Mobile Number</div>
                            <div class="info-value">{{ ($supplier->country_code ? '+'.$supplier->country_code.' ' : '') . $supplier->phone }}</div>
                        </div>
                        <div class="col-sm-6">
                            <div class="info-label">Member Since</div>
                            <div class="info-value">{{ $supplier->created_at->format('d M Y') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Action Panel --}}
            <div class="action-panel">
                <div class="panel-title">
                    <i class="material-icons">&#xe869;</i>
                    Administrative Actions
                </div>
                
                <div class="m-t">
                    @if($supplier->verification_status == 'pending' || $supplier->verification_status == 'rejected')
                        <button class="btn btn-success btn-sm m-r-sm" onclick="approveSupplier()">
                            <i class="material-icons md-18">check_circle</i> Approve Supplier
                        </button>
                    @endif
                    
                    @if($supplier->verification_status == 'pending' || $supplier->verification_status == 'approved')
                        <button class="btn btn-danger btn-sm m-r-sm" onclick="$('#rejectModal').modal('show')">
                            <i class="material-icons md-18">cancel</i> Reject Supplier
                        </button>
                    @endif

                    @if($supplier->verification_status == 'approved')
                        <button class="btn btn-outline-primary btn-sm" onclick="toggleStatus()">
                            <i class="material-icons md-18">swap_horiz</i>
                            {{ $supplier->is_active ? 'Deactivate Account' : 'Activate Account' }}
                        </button>
                    @endif
                </div>
            </div>
        </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>Reject Supplier Application</h5></div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Reason for Rejection <span class="text-danger">*</span></label>
                    <textarea id="rejection_reason" class="form-control" rows="4" placeholder="Enter reason for rejection..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn danger p-x-md" onclick="rejectSupplier()">Confirm Reject</button>
            </div>
        </div>
    </div>
</div>

@else
    <script>window.location.replace("{{ route('adminHome') }}");</script>
@endif
@endsection

@push('after-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">

<script>
    function approveSupplier() {
        swal({
            title: "Approve Supplier?",
            text: "They will receive an approval email and gain full access.",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#28a745",
            confirmButtonText: "Yes, Approve",
            closeOnConfirm: false
        }, function() {
            $.ajax({
                url: "{{ route('admin.suppliers.approve') }}",
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    user_id: "{{ $supplier->id }}"
                },
                beforeSend: function() { $('#loader').show(); },
                success: function(res) {
                    if(res.success) {
                        swal("Approved!", res.msg, "success");
                        setTimeout(() => { location.reload(); }, 1500);
                    } else {
                        swal("Error", res.msg, "error");
                    }
                },
                complete: function() { $('#loader').hide(); }
            });
        });
    }

    function rejectSupplier() {
        var reason = $('#rejection_reason').val();
        if(!reason) { swal("Error", "Please enter a rejection reason.", "error"); return; }

        $.ajax({
            url: "{{ route('admin.suppliers.reject') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                user_id: "{{ $supplier->id }}",
                rejection_reason: reason
            },
            beforeSend: function() { $('#loader').show(); },
            success: function(res) {
                if(res.success) {
                    $('#rejectModal').modal('hide');
                    swal("Rejected", res.msg, "success");
                    setTimeout(() => { location.reload(); }, 1500);
                } else {
                    swal("Error", res.msg, "error");
                }
            },
            complete: function() { $('#loader').hide(); }
        });
    }

    function toggleStatus() {
        $.post("{{ route('admin.suppliers.status') }}", {
            _token: "{{ csrf_token() }}",
            user_id: "{{ $supplier->id }}"
        }, function(res) {
            if(res.success) {
                location.reload();
            } else {
                swal("Error", res.msg, "error");
            }
        });
    }
</script>
@endpush