@extends('layouts.app')

@section('title', 'KYC Documents - ' . $client->full_name)

@section('content')
<div class="container-fluid">
    <!-- Navigation Bar -->
    <div class="navigation-bar">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="page-title">
                    <h1><i class="fas fa-id-card me-2"></i>KYC Documents - {{ $client->first_name }} {{ $client->last_name }}</h1>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <div class="action-buttons-nav">
                    <a href="{{ route('clients.kyc') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-1"></i>Back to KYC List
                    </a>
                    <button type="submit" form="kycForm" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Update KYC
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-11 col-xl-10">
            <!-- Client Information & Status -->
            <div class="row mb-4">
                <div class="col-lg-8">
                    <div class="form-card card">
                        <div class="card-body">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-user"></i>
                                </div>
                                <h5>Client Information</h5>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label>Client Number</label>
                                        <div class="info-value">{{ $client->client_number }}</div>
                                    </div>
                                    <div class="info-item">
                                        <label>Full Name</label>
                                        <div class="info-value">{{ $client->first_name }} {{ $client->last_name }}</div>
                                    </div>
                                    <div class="info-item">
                                        <label>Email</label>
                                        <div class="info-value">{{ $client->email ?? $client->user->email }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info-item">
                                        <label>Phone Number</label>
                                        <div class="info-value">{{ $client->phone }}</div>
                                    </div>
                                    <div class="info-item">
                                        <label>ID Number</label>
                                        <div class="info-value">{{ $client->id_number }}</div>
                                    </div>
                                    <div class="info-item">
                                        <label>Date of Birth</label>
                                        <div class="info-value">{{ $client->date_of_birth->format('M d, Y') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-card card">
                        <div class="card-body">
                            <div class="section-header">
                                <div class="icon-wrapper">
                                    <i class="fas fa-tasks"></i>
                                </div>
                                <h5>KYC Status</h5>
                            </div>
                            <div class="text-center">
                                @if($client->kyc_status == 'approved')
                                    <div class="kyc-status approved">
                                        <i class="fas fa-check-circle"></i>
                                        <h4>Approved</h4>
                                    </div>
                                @elseif($client->kyc_status == 'rejected')
                                    <div class="kyc-status rejected">
                                        <i class="fas fa-times-circle"></i>
                                        <h4>Rejected</h4>
                                    </div>
                                @else
                                    <div class="kyc-status pending">
                                        <i class="fas fa-clock"></i>
                                        <h4>Pending</h4>
                                    </div>
                                @endif
                                @if($client->kyc_notes)
                                    <div class="kyc-notes mt-3">
                                        <label class="form-label">Verification Notes</label>
                                        <div class="notes-content">{{ $client->kyc_notes }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- KYC Documents Form -->
            <div class="form-card card">
                <div class="card-body">
                    <form method="POST" action="{{ route('clients.kyc.store', $client) }}" enctype="multipart/form-data" id="kycForm">
                        @csrf
                        @method('POST')

                        <div class="section-header">
                            <div class="icon-wrapper">
                                <i class="fas fa-file-upload"></i>
                            </div>
                            <h5>KYC Documents</h5>
                        </div>

                        <div class="row">
                            <!-- ID Document -->
                            <div class="col-lg-4 mb-4">
                                <div class="document-upload">
                                    <label for="id_document" class="form-label">
                                        ID Document
                                        <span class="required-indicator">*</span>
                                    </label>
                                    <div class="upload-area" id="idDocumentUpload">
                                        <div class="upload-content">
                                            <i class="fas fa-file-pdf"></i>
                                            <p>Click to upload ID document</p>
                                            <small>PDF, JPG, PNG (Max 2MB)</small>
                                        </div>
                                        <input type="file" class="form-control d-none" id="id_document" name="id_document"
                                               accept=".pdf,.jpg,.jpeg,.png">
                                    </div>
                                    @if($client->id_document)
                                        <div class="current-file mt-2">
                                            <div class="current-file-header">
                                                <i class="fas fa-file me-2"></i>
                                                <span>Current Document</span>
                                            </div>
                                            <a href="{{ Storage::url($client->id_document) }}" target="_blank"
                                               class="btn-view-file">
                                                <i class="fas fa-eye me-1"></i>View Document
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Proof of Address -->
                            <div class="col-lg-4 mb-4">
                                <div class="document-upload">
                                    <label for="proof_of_residence" class="form-label">
                                        Proof of Residence
                                        <span class="required-indicator">*</span>
                                    </label>
                                    <div class="upload-area" id="addressDocumentUpload">
                                        <div class="upload-content">
                                            <i class="fas fa-file-pdf"></i>
                                            <p>Click to upload proof of residence</p>
                                            <small>PDF, JPG, PNG (Max 2MB)</small>
                                        </div>
                                        <input type="file" class="form-control d-none" id="proof_of_residence" name="proof_of_residence"
                                               accept=".pdf,.jpg,.jpeg,.png">
                                    </div>
                                    @if($client->proof_of_residence)
                                        <div class="current-file mt-2">
                                            <div class="current-file-header">
                                                <i class="fas fa-file me-2"></i>
                                                <span>Current Document</span>
                                            </div>
                                            <a href="{{ Storage::url($client->proof_of_residence) }}" target="_blank"
                                               class="btn-view-file">
                                                <i class="fas fa-eye me-1"></i>View Document
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Photo -->
                            <div class="col-lg-4 mb-4">
                                <div class="document-upload">
                                    <label for="photo" class="form-label">
                                        Client Photo
                                        <span class="required-indicator">*</span>
                                    </label>
                                    <div class="upload-area" id="photoUpload">
                                        <div class="upload-content">
                                            <i class="fas fa-camera"></i>
                                            <p>Click to upload photo</p>
                                            <small>JPG, PNG (Max 2MB)</small>
                                        </div>
                                        <input type="file" class="form-control d-none" id="photo" name="photo"
                                               accept=".jpg,.jpeg,.png">
                                    </div>
                                    @if($client->photo)
                                        <div class="current-file mt-2">
                                            <div class="current-file-header">
                                                <i class="fas fa-image me-2"></i>
                                                <span>Current Photo</span>
                                            </div>
                                            <img src="{{ $client->photo_url }}" alt="Client Photo" class="preview-image">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="section-divider"></div>

                        <!-- KYC Status & Notes -->
                        <div class="row">
                            <div class="col-lg-6 mb-4">
                                <div class="section-wrapper">
                                    <div class="section-header">
                                        <div class="icon-wrapper">
                                            <i class="fas fa-tasks"></i>
                                        </div>
                                        <h5>KYC Verification</h5>
                                    </div>
                                    <div class="mb-3">
                                        <label for="kyc_status" class="form-label">
                                            KYC Status
                                            <span class="required-indicator">*</span>
                                        </label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-circle"></i>
                                            <select class="form-select" id="kyc_status" name="kyc_status" required>
                                                <option value="pending" {{ $client->kyc_status == 'pending' ? 'selected' : '' }}>Pending</option>
                                                <option value="approved" {{ $client->kyc_status == 'approved' ? 'selected' : '' }}>Approved</option>
                                                <option value="rejected" {{ $client->kyc_status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="section-wrapper">
                                    <div class="section-header">
                                        <div class="icon-wrapper">
                                            <i class="fas fa-sticky-note"></i>
                                        </div>
                                        <h5>Verification Notes</h5>
                                    </div>
                                    <div class="mb-3">
                                        <label for="notes" class="form-label">Additional Notes</label>
                                        <div class="input-icon-wrapper">
                                            <i class="fas fa-sticky-note" style="top: 1.25rem;"></i>
                                            <textarea class="form-control" id="notes" name="notes" rows="4"
                                                      placeholder="Additional notes about KYC verification...">{{ $client->kyc_notes }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <a href="{{ route('clients.kyc') }}" class="btn-reset">
                                <i class="fas fa-arrow-left me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn-submit">
                                <i class="fas fa-save me-2"></i>Update KYC Documents
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    :root {
        --primary-green: #198754;
        --primary-green-dark: #146c43;
        --accent-yellow: #fbbf24;
        --accent-yellow-light: #fef3c7;
        --success-green: #198754;
        --white: #ffffff;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-900: #111827;
        --danger: #ef4444;
    }

    /* Navigation Bar Styles */
    .navigation-bar {
        background: white;
        padding: 1.5rem 0;
        margin-bottom: 2rem;
        border-bottom: 2px solid var(--gray-200);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .page-title h1 {
        color: var(--gray-900);
        font-weight: 700;
        font-size: 1.75rem;
        margin-bottom: 0;
        display: flex;
        align-items: center;
    }

    .page-title h1 i {
        color: var(--primary-green);
    }

    .action-buttons-nav .btn {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        font-size: 0.875rem;
        transition: all 0.3s ease;
    }

    .action-buttons-nav .btn-outline-secondary {
        border: 2px solid var(--gray-300);
        color: var(--gray-700);
    }

    .action-buttons-nav .btn-outline-secondary:hover {
        background: var(--gray-100);
        border-color: var(--gray-400);
        transform: translateY(-1px);
    }

    .action-buttons-nav .btn-primary {
        background: var(--primary-green);
        border: none;
        box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
    }

    .action-buttons-nav .btn-primary:hover {
        background: var(--primary-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(25, 135, 84, 0.35);
    }

    /* Form Card */
    .form-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        border: none;
        overflow: hidden;
    }

    .form-card .card-body {
        padding: 2rem;
    }

    .section-wrapper {
        background: var(--gray-50);
        padding: 1.75rem;
        border-radius: 14px;
        margin-bottom: 1.75rem;
        border: 2px solid var(--gray-200);
        transition: all 0.3s ease;
    }

    .section-wrapper:hover {
        border-color: var(--primary-green);
        box-shadow: 0 6px 20px rgba(25, 135, 84, 0.12);
    }

    .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 3px solid transparent;
        background: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        border-image: linear-gradient(90deg, var(--primary-green) 0%, var(--accent-yellow) 100%);
        border-image-slice: 1;
        border-bottom: 3px solid;
    }

    .section-header h5 {
        margin: 0;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--primary-green);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .section-header .icon-wrapper {
        width: 36px;
        height: 36px;
        background: var(--primary-green);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
    }

    /* Client Information */
    .info-item {
        margin-bottom: 1rem;
    }

    .info-item label {
        font-weight: 600;
        color: var(--gray-600);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
        display: block;
    }

    .info-value {
        color: var(--gray-900);
        font-weight: 500;
    }

    /* KYC Status */
    .kyc-status {
        text-align: center;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .kyc-status.approved {
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        color: white;
    }

    .kyc-status.rejected {
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        color: white;
    }

    .kyc-status.pending {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
        color: white;
    }

    .kyc-status i {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .kyc-status h4 {
        margin: 0;
        font-weight: 700;
    }

    .kyc-notes .notes-content {
        background: var(--gray-50);
        padding: 1rem;
        border-radius: 8px;
        border-left: 4px solid var(--primary-green);
        font-size: 0.9rem;
        color: var(--gray-700);
    }

    /* Document Upload */
    .document-upload {
        height: 100%;
    }

    .upload-area {
        border: 2px dashed var(--gray-300);
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: var(--gray-50);
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .upload-area:hover {
        border-color: var(--primary-green);
        background: var(--gray-100);
    }

    .upload-area.dragover {
        border-color: var(--primary-green);
        background: var(--accent-yellow-light);
    }

    .upload-content i {
        font-size: 2rem;
        color: var(--primary-green);
        margin-bottom: 1rem;
    }

    .upload-content p {
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }

    .upload-content small {
        color: var(--gray-600);
    }

    .form-label {
        font-weight: 700;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .required-indicator {
        color: var(--danger);
        font-size: 0.9rem;
    }

    /* Current File Styles */
    .current-file {
        background: var(--gray-50);
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid var(--gray-200);
    }

    .current-file-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--gray-700);
        font-size: 0.875rem;
    }

    .current-file-header i {
        color: var(--primary-green);
    }

    .btn-view-file {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

    .btn-view-file:hover {
        background: #3b82f6;
        color: white;
        text-decoration: none;
    }

    .preview-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: cover;
        border: 2px solid var(--gray-200);
    }

    /* Form Controls */
    .form-control,
    .form-select {
        border: 2px solid var(--gray-300);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        font-size: 0.9rem;
        background: white;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-green);
        box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1);
        outline: none;
        background: white;
    }

    .input-icon-wrapper {
        position: relative;
    }

    .input-icon-wrapper i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-green);
        font-size: 1rem;
        z-index: 1;
    }

    .input-icon-wrapper .form-control,
    .input-icon-wrapper .form-select {
        padding-left: 2.75rem;
    }

    textarea.form-control {
        resize: vertical;
        min-height: 100px;
    }

    .section-divider {
        border: none;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--primary-green) 20%, var(--accent-yellow) 50%, var(--primary-green) 80%, transparent 100%);
        margin: 2.5rem 0;
        position: relative;
    }

    .section-divider::after {
        content: '✦';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        color: var(--accent-yellow);
        padding: 0 0.75rem;
        font-size: 1rem;
    }

    .action-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
        margin-top: 2.5rem;
        padding-top: 2rem;
        border-top: 2px solid var(--gray-200);
    }

    .btn-reset {
        background: white;
        border: 2px solid var(--gray-300);
        color: var(--gray-700);
        padding: 0.75rem 2rem;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }

    .btn-reset:hover {
        background: var(--gray-100);
        border-color: var(--gray-400);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        color: var(--gray-700);
        text-decoration: none;
    }

    .btn-submit {
        background: var(--primary-green);
        border: none;
        color: white;
        padding: 0.75rem 2.5rem;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(25, 135, 84, 0.25);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        position: relative;
        overflow: hidden;
    }

    .btn-submit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .btn-submit:hover::before {
        left: 100%;
    }

    .btn-submit:hover {
        background: var(--primary-green-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(25, 135, 84, 0.35);
    }

    @media (max-width: 768px) {
        .navigation-bar {
            padding: 1rem 0;
        }

        .page-title h1 {
            font-size: 1.5rem;
        }

        .action-buttons-nav {
            margin-top: 1rem;
        }

        .action-buttons-nav .btn {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        .form-card .card-body {
            padding: 1.5rem;
        }

        .section-wrapper {
            padding: 1.25rem;
        }

        .upload-area {
            height: 150px;
            padding: 1rem;
        }

        .action-buttons {
            flex-direction: column;
        }

        .action-buttons button,
        .action-buttons a {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // File upload area interactions
        const uploadAreas = document.querySelectorAll('.upload-area');

        uploadAreas.forEach(area => {
            const fileInput = area.querySelector('input[type="file"]');

            area.addEventListener('click', function() {
                fileInput.click();
            });

            area.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.classList.add('dragover');
            });

            area.addEventListener('dragleave', function() {
                this.classList.remove('dragover');
            });

            area.addEventListener('drop', function(e) {
                e.preventDefault();
                this.classList.remove('dragover');
                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    this.querySelector('.upload-content').innerHTML = `
                        <i class="fas fa-check-circle text-success"></i>
                        <p>File selected</p>
                        <small>${e.dataTransfer.files[0].name}</small>
                    `;
                }
            });

            fileInput.addEventListener('change', function(e) {
                if (this.files.length) {
                    area.querySelector('.upload-content').innerHTML = `
                        <i class="fas fa-check-circle text-success"></i>
                        <p>File selected</p>
                        <small>${this.files[0].name}</small>
                    `;
                }
            });
        });

        // Image preview for photo upload
        const photoInput = document.getElementById('photo');
        if (photoInput) {
            photoInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        let preview = document.querySelector('.preview-image');
                        if (!preview) {
                            const currentFile = document.querySelector('.current-file');
                            if (currentFile) {
                                preview = document.createElement('img');
                                preview.className = 'preview-image';
                                currentFile.appendChild(preview);
                            }
                        }
                        if (preview) {
                            preview.src = e.target.result;
                        }
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
    });
</script>
@endsection