@extends('layouts.admin')

@section('content')
<section class="content py-4 py-lg-5">
    <div class="container-lg">
        <!-- Page Header -->
        <div class="page-header mb-5">
            <div class="row align-items-center justify-content-between">
                <div class="col-auto">
                    <h1 class="page-title mb-2">Add Supplier</h1>
                    <p class="text-muted mb-0">Complete the form to register a new supplier</p>
                </div>
                <div class="col-auto">
                    <a href="{{ route('supplier.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to List
                    </a>
                </div>
            </div>
        </div>

        <!-- Main Card -->
        <div class="card border-0 shadow-lg rounded-3">

            <!-- Form Content -->
            <form id="supplierform" method="POST" action="{{ route('supplier.store') }}" novalidate class="supplier-form">
                @csrf

                <div class="card-body p-4 p-lg-5">

                    <!-- Section 1: Basic Information -->
                    <div class="form-section mb-5">
                        <div class="section-header d-flex align-items-center mb-4">
                            <div class="section-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <h5 class="section-title mb-0">Basic Information</h5>
                        </div>

                        <div class="row g-4">
                            <!-- Supplier Name -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="supplier_name" class="form-label fw-600 mb-2">
                                        <i class="fas fa-briefcase text-primary me-2"></i>Supplier Name
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="text"
                                        id="supplier_name"
                                        name="supplier_name"
                                        class="form-control form-control-lg @error('supplier_name') is-invalid @enderror"
                                        value="{{ old('supplier_name') }}"
                                        placeholder="Enter supplier company name"
                                        required
                                        minlength="3"
                                        maxlength="100"
                                        autofocus>

                                    @error('supplier_name')
                                    <div class="invalid-feedback d-block mt-2">
                                        <i class="fas fa-times-circle me-1"></i>{{ $message }}
                                    </div>
                                    @enderror
                                    <small class="form-text text-muted d-block mt-2">
                                        <i class="fas fa-info-circle me-1"></i>3-100 characters
                                    </small>
                                </div>
                            </div>

                            <!-- Contact Number -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="contact_no" class="form-label fw-600 mb-2">
                                        <i class="fas fa-phone text-primary me-2"></i>Contact Number
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="tel"
                                        id="contact_no"
                                        name="contact_no"
                                        class="form-control form-control-lg @error('contact_no') is-invalid @enderror"
                                        value="{{ old('contact_no') }}"
                                        placeholder="01XXXXXXXXX"
                                        required
                                        pattern="^[+]?[0-9]{10,15}$"
                                        maxlength="15">

                                    @error('contact_no')
                                    <div class="invalid-feedback d-block mt-2">
                                        <i class="fas fa-times-circle me-1"></i>{{ $message }}
                                    </div>
                                    @enderror
                                    <small class="form-text text-muted d-block mt-2">
                                        <i class="fas fa-info-circle me-1"></i>10-15 digits format
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 2: Contact Person -->
                    <div class="form-section mb-5">
                        <div class="section-header d-flex align-items-center mb-4">
                            <div class="section-icon">
                                <i class="fas fa-user-circle"></i>
                            </div>
                            <h5 class="section-title mb-0">Contact Person</h5>
                        </div>

                        <div class="row g-4">
                            <!-- Contact Person Name -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="username" class="form-label fw-600 mb-2">
                                        <i class="fas fa-user text-primary me-2"></i>Person Name
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input
                                        type="text"
                                        id="username"
                                        name="username"
                                        class="form-control form-control-lg @error('username') is-invalid @enderror"
                                        value="{{ old('username') }}"
                                        placeholder="Full name of contact person"
                                        required
                                        minlength="3"
                                        maxlength="50">

                                    @error('username')
                                    <div class="invalid-feedback d-block mt-2">
                                        <i class="fas fa-times-circle me-1"></i>{{ $message }}
                                    </div>
                                    @enderror
                                    <small class="form-text text-muted d-block mt-2">
                                        <i class="fas fa-info-circle me-1"></i>Primary contact representative
                                    </small>
                                </div>
                            </div>

                            <!-- BIN / NID -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="bin_nid" class="form-label fw-600 mb-2">
                                        <i class="fas fa-id-card text-primary me-2"></i>BIN / NID
                                        <span class="badge bg-light text-dark">Optional</span>
                                    </label>
                                    <input
                                        type="text"
                                        id="bin_nid"
                                        name="bin_nid"
                                        class="form-control form-control-lg @error('bin_nid') is-invalid @enderror"
                                        value="{{ old('bin_nid') }}"
                                        placeholder="Tax ID or National ID (if available)"
                                        maxlength="17">

                                    @error('bin_nid')
                                    <div class="invalid-feedback d-block mt-2">
                                        <i class="fas fa-times-circle me-1"></i>{{ $message }}
                                    </div>
                                    @enderror
                                    <small class="form-text text-muted d-block mt-2">
                                        <i class="fas fa-info-circle me-1"></i>Tax or NID identification
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3: Address -->
                    <div class="form-section">
                        <div class="section-header d-flex align-items-center mb-4">
                            <div class="section-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <h5 class="section-title mb-0">Address Information</h5>
                        </div>

                        <div class="form-group">
                            <label for="address" class="form-label fw-600 mb-2">
                                <i class="fas fa-home text-primary me-2"></i>Complete Address
                                <span class="text-danger">*</span>
                            </label>
                            <textarea
                                id="address"
                                name="address"
                                class="form-control form-control-lg @error('address') is-invalid @enderror"
                                rows="4"
                                placeholder="Street address, city, postal code, country"
                                required
                                minlength="10"
                                maxlength="500">{{ old('address') }}</textarea>

                            @error('address')
                            <div class="invalid-feedback d-block mt-2">
                                <i class="fas fa-times-circle me-1"></i>{{ $message }}
                            </div>
                            @enderror
                            <small class="form-text text-muted d-block mt-2">
                                <i class="fas fa-info-circle me-1"></i>Include street, city, postal code (10-500 characters)
                            </small>
                        </div>
                    </div>

                    <!-- Hidden Fields -->
                    <input type="hidden" name="entrydate" value="{{ date('Y-m-d') }}">

                </div>

                <!-- Form Footer -->
                <div class="card-footer bg-light border-top py-4 px-4 px-lg-5">
                    <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
                        <a href="{{ route('supplier.index') }}" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-times me-2"></i>Cancel
                        </a>

                        <div class="d-flex gap-2 flex-wrap">
                            <button type="reset" class="btn btn-light btn-lg border">
                                <i class="fas fa-redo me-2"></i>Clear
                            </button>
                            <button type="submit" class="btn btn-primary btn-lg px-5" id="submitBtn">
                                <span class="spinner-border spinner-border-sm me-2 d-none" id="submitSpinner"></span>
                                <i class="fas fa-save me-2"></i>
                                <span id="submitText">Save Supplier</span>
                            </button>
                        </div>
                    </div>
                </div>

            </form>

        </div>

        <!-- Help Text Card -->
        <div class="alert alert-info mt-4 rounded-3 border-0" role="alert">
            <div class="d-flex align-items-start">
                <i class="fas fa-lightbulb me-3 mt-1"></i>
                <div>
                    <strong>Tip:</strong> Make sure all required fields (*) are filled correctly. Double-check the contact number format before saving.
                </div>
            </div>
        </div>

    </div>
</section>

@push('styles')
<style>
    :root {
        --primary-color: #0d6efd;
        --danger-color: #dc3545;
        --light-color: #f8f9fa;
        --border-radius: 12px;
        --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* General Styles */
    body {
        background-color: #f5f7fa;
    }

    /* Page Title */
    .page-title {
        font-size: 2rem;
        font-weight: 700;
        color: #1a1a1a;
        letter-spacing: -0.5px;
    }

    /* Section Styles */
    .form-section {
        animation: slideUp 0.4s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .section-header {
        gap: 12px;
    }

    .section-icon {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05));
        border-radius: var(--border-radius);
        font-size: 1.25rem;
        color: var(--primary-color);
        flex-shrink: 0;
    }

    .section-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #2a2a2a;
        letter-spacing: -0.3px;
    }

    /* Form Group */
    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-label {
        color: #2a2a2a;
        font-size: 0.95rem;
        letter-spacing: 0.3px;
    }

    .fw-600 {
        font-weight: 600 !important;
    }

    /* Form Controls */
    .form-control {
        border: 1.5px solid #e0e6ed;
        border-radius: var(--border-radius);
        padding: 0.75rem 1rem;
        font-size: 1rem;
        transition: all 0.3s ease;
        background-color: #fff;
        color: #2a2a2a;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
        color: #2a2a2a;
    }

    .form-control::placeholder {
        color: #9ca3af;
        font-size: 0.95rem;
    }

    .form-control-lg {
        padding: 0.875rem 1.125rem;
        font-size: 1.025rem;
        min-height: 48px;
    }

    textarea.form-control {
        resize: vertical;
        font-family: inherit;
    }

    textarea.form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    }

    /* Invalid Feedback */
    .invalid-feedback {
        color: var(--danger-color);
        font-size: 0.875rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
    }

    .form-control.is-invalid {
        border-color: var(--danger-color);
        background-color: rgba(220, 53, 69, 0.02);
    }

    .form-control.is-invalid:focus {
        border-color: var(--danger-color);
        box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
    }

    /* Help Text */
    .form-text {
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }

    .text-muted {
        color: #6b7280 !important;
    }

    /* Cards */
    .card {
        background: #fff;
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .card-body {
        padding: 2rem;
    }

    .card-footer {
        background-color: var(--light-color);
        border-top: 1px solid #e5e7eb;
    }

    /* Buttons */
    .btn {
        border-radius: var(--border-radius);
        font-weight: 500;
        font-size: 0.95rem;
        padding: 0.625rem 1.25rem;
        transition: all 0.3s ease;
        text-transform: none;
        letter-spacing: 0.2px;
    }

    .btn-lg {
        padding: 0.75rem 1.75rem;
        font-size: 1rem;
    }

    .btn-primary {
        background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
        border: none;
        color: #fff;
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
        box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
        transform: translateY(-2px);
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
    }

    .btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

    .btn-outline-secondary {
        border: 1.5px solid #6b7280;
        color: #6b7280;
    }

    .btn-outline-secondary:hover {
        background-color: #f3f4f6;
        border-color: #4b5563;
        color: #4b5563;
    }

    .btn-light {
        background-color: #f3f4f6;
        border-color: #d1d5db;
        color: #4b5563;
    }

    .btn-light:hover {
        background-color: #e5e7eb;
        border-color: #9ca3af;
    }

    /* Spinner */
    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
        border-width: 0.2em;
    }

    /* Badge */
    .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
        font-weight: 500;
        letter-spacing: 0.3px;
    }

    /* Alert */
    .alert {
        border-left: 4px solid var(--primary-color);
        background-color: rgba(13, 110, 253, 0.05);
    }

    .alert-info {
        color: #0c5de6;
    }

    /* Responsive Design */
    @media (max-width: 992px) {
        .page-title {
            font-size: 1.75rem;
        }

        .card-body {
            padding: 1.5rem;
        }

        .card-footer {
            flex-direction: column-reverse;
        }
    }

    @media (max-width: 768px) {
        .page-title {
            font-size: 1.5rem;
        }

        .card-body {
            padding: 1.25rem;
        }

        .card-footer {
            padding: 1.25rem !important;
        }

        .form-control,
        .form-control-lg {
            font-size: 16px;
            /* Prevents mobile zoom */
        }

        .btn {
            width: 100%;
            padding: 0.75rem 1rem;
        }

        .d-flex.gap-2 {
            width: 100%;
            flex-direction: column;
        }

        .d-flex.gap-2 .btn {
            margin-bottom: 0.5rem;
        }

        .section-icon {
            width: 36px;
            height: 36px;
            font-size: 1rem;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('supplierform');
        const submitBtn = document.getElementById('submitBtn');
        const submitSpinner = document.getElementById('submitSpinner');
        const submitText = document.getElementById('submitText');

        // Form submission handler
        form.addEventListener('submit', function(e) {
            // Validate form using HTML5 validation
            if (!form.checkValidity()) {
                e.preventDefault();
                e.stopPropagation();
            }

            form.classList.add('was-validated');

            // If form is valid, show loading state
            if (form.checkValidity()) {
                submitBtn.disabled = true;
                submitSpinner.classList.remove('d-none');
                submitText.textContent = 'Saving...';

                // Prevent double submission
                setTimeout(() => {
                    form.submit();
                }, 300);
            }
        });

        // Real-time validation on blur
        const inputFields = form.querySelectorAll('input, textarea');
        inputFields.forEach(field => {
            field.addEventListener('blur', function() {
                validateField(this);
            });

            // Remove error state when user starts typing
            field.addEventListener('input', function() {
                if (this.classList.contains('is-invalid')) {
                    this.classList.remove('is-invalid');
                }
            });
        });

        function validateField(field) {
            if (!field.value.trim()) {
                if (field.hasAttribute('required')) {
                    field.classList.add('is-invalid');
                }
                return;
            }

            // Validate minimum length
            if (field.minLength && field.value.length < field.minLength) {
                field.classList.add('is-invalid');
                return;
            }

            // Validate pattern (for phone numbers)
            if (field.hasAttribute('pattern')) {
                const pattern = new RegExp(field.getAttribute('pattern'));
                if (!pattern.test(field.value)) {
                    field.classList.add('is-invalid');
                    return;
                }
            }

            field.classList.remove('is-invalid');
        }

        // Prevent form resubmission on page reload
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.href);
        }
    });
</script>
@endpush

@endsection