@extends('layouts.admin')

@section('content')
<section class="content px-3 px-md-4 py-4 py-lg-5">
    <div class="container-xl">

        <!-- Page Header -->
        <div class="page-header mb-4 mb-lg-5">
            <div class="row align-items-center justify-content-between g-3">
                <div class="col-auto">
                    <div>
                        <h1 class="page-title mb-2">Add Corporate Client</h1>
                        <p class="subtitle text-muted">Register a new corporate client in the system</p>
                    </div>
                </div>
                <div class="col-auto">
                    <a href="{{ route('corporate_client.index') }}" class="btn btn-outline-secondary btn-sm gap-2">
                        <i class="fas fa-arrow-left"></i>
                        <span>Back to List</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Main Form Card -->
        <div class="card border-0 shadow-sm rounded-lg overflow-hidden">

            <!-- Card Header -->
            <div class="card-header bg-gradient-primary text-white border-0 py-4 px-4 px-lg-5">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="mb-1 fw-bold d-flex align-items-center gap-2">
                            <i class="fas fa-building"></i>
                            Corporate Client Details
                        </h5>
                        <p class="mb-0 small opacity-90">Complete all required fields to register</p>
                    </div>
                </div>
            </div>

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

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

                    <!-- Section 1: Company Information -->
                    <div class="form-section mb-5">
                        <div class="section-header mb-4 pb-3 border-bottom">
                            <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                                <span class="section-badge">
                                    <i class="fas fa-briefcase"></i>
                                </span>
                                Company Information
                            </h6>
                        </div>

                        <div class="row g-4">
                            <!-- Company Name -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="company_name" class="form-label fw-600 mb-3">
                                        <i class="fas fa-building text-primary"></i>
                                        Company Name
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-briefcase text-primary"></i>
                                        </span>
                                        <input
                                            type="text"
                                            class="form-control border-start-0 @error('company_name') is-invalid @enderror"
                                            name="company_name"
                                            id="company_name"
                                            value="{{ old('company_name') }}"
                                            placeholder="Enter Corporate Client Name"
                                            tabindex="1"
                                            required
                                            minlength="3"
                                            maxlength="100">

                                        @error('company_name')
                                        <div class="invalid-feedback">
                                            <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                    <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="mobile_number" class="form-label fw-600 mb-3">
                                        <i class="fas fa-phone text-primary"></i>
                                        Contact Number
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-phone text-primary"></i>
                                        </span>
                                        <input
                                            type="tel"
                                            class="form-control border-start-0 @error('mobile_number') is-invalid @enderror"
                                            name="mobile_number"
                                            id="mobile_number"
                                            value="{{ old('mobile_number') }}"
                                            placeholder="Enter Contact Number"
                                            tabindex="2"
                                            required
                                            pattern="^[+]?[0-9]{10,15}$"
                                            maxlength="15">

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

                    <!-- Section 2: Tax & Identification -->
                    <div class="form-section mb-5">
                        <div class="section-header mb-4 pb-3 border-bottom">
                            <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                                <span class="section-badge">
                                    <i class="fas fa-id-card"></i>
                                </span>
                                Tax & Identification
                            </h6>
                        </div>

                        <div class="row g-4">
                            <!-- BIN -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="bin" class="form-label fw-600 mb-3">
                                        <i class="fas fa-barcode text-primary"></i>
                                        BIN / NID
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-id-card text-primary"></i>
                                        </span>
                                        <input
                                            type="text"
                                            class="form-control border-start-0 @error('bin') is-invalid @enderror"
                                            name="bin"
                                            id="bin"
                                            value="{{ old('bin') }}"
                                            placeholder="Enter BIN/NID"
                                            tabindex="4"
                                            required
                                            maxlength="17">

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

                            <!-- Discount Percentage -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="dis_percent" class="form-label fw-600 mb-3">
                                        <i class="fas fa-percentage text-primary"></i>
                                        Discount (%)
                                        <span class="badge bg-light text-dark ms-2">Optional</span>
                                    </label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-tag text-primary"></i>
                                        </span>
                                        <select
                                            id="dis_percent"
                                            name="dis_percent"
                                            class="form-select border-start-0 @error('dis_percent') is-invalid @enderror"
                                            tabindex="3">
                                            <option value="">-- Select Discount --</option>
                                            @for ($i = 1; $i <= 25; $i++)
                                                <option value="{{ $i }}" {{ old('dis_percent') == $i ? 'selected' : '' }}>
                                                {{ $i }}%
                                                </option>
                                                @endfor
                                        </select>
                                        <span class="input-group-text bg-light border-start-0">
                                            <i class="fas fa-chevron-down text-primary"></i>
                                        </span>

                                        @error('dis_percent')
                                        <div class="invalid-feedback">
                                            <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Section 3: Status & Address -->
                    <div class="form-section mb-4">
                        <div class="section-header mb-4 pb-3 border-bottom">
                            <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                                <span class="section-badge">
                                    <i class="fas fa-map-marker-alt"></i>
                                </span>
                                Location & Status
                            </h6>
                        </div>

                        <div class="row g-4 mb-4">
                            <!-- Status -->
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="status" class="form-label fw-600 mb-3">
                                        <i class="fas fa-toggle-on text-primary"></i>
                                        Status
                                        <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light border-end-0">
                                            <i class="fas fa-check-circle text-primary"></i>
                                        </span>
                                        <select
                                            id="status"
                                            name="status"
                                            class="form-select border-start-0 @error('status') is-invalid @enderror"
                                            required>
                                            <option value="">-- Select Status --</option>
                                            <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>
                                                <i class="fas fa-check-circle"></i> Active
                                            </option>
                                            <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>
                                                <i class="fas fa-times-circle"></i> Inactive
                                            </option>
                                        </select>
                                        <span class="input-group-text bg-light border-start-0">
                                            <i class="fas fa-chevron-down text-primary"></i>
                                        </span>

                                        @error('status')
                                        <div class="invalid-feedback">
                                            <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Spacer -->
                            <div class="col-lg-6"></div>
                        </div>

                        <!-- Address -->
                        <div class="form-group">
                            <label for="address" class="form-label fw-600 mb-3">
                                <i class="fas fa-home text-primary"></i>
                                Address
                                <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0">
                                    <i class="fas fa-location-dot text-primary"></i>
                                </span>
                                <textarea
                                    name="address"
                                    class="form-control border-start-0 @error('address') is-invalid @enderror"
                                    id="address"
                                    rows="3"
                                    placeholder="Enter complete address (street, city, postal code)"
                                    tabindex="5"
                                    minlength="5"
                                    maxlength="500">{{ old('address') }}</textarea>

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

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

                </div>

                <!-- Card 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('corporate_client.index') }}" class="btn btn-outline-secondary btn-lg gap-2">
                            <i class="fas fa-times"></i>
                            <span>Cancel</span>
                        </a>

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

            </form>

        </div>

        <!-- Info Banner -->
        <div class="alert alert-info rounded-lg border-0 mt-4 shadow-sm" role="alert">
            <div class="d-flex align-items-start gap-3">
                <i class="fas fa-lightbulb mt-1"></i>
                <div>
                    <strong>Tip:</strong> All fields marked with <span class="text-danger">*</span> are required. Make sure all information is accurate before submitting.
                </div>
            </div>
        </div>

    </div>
</section>

@push('styles')
<style>
    :root {
        --primary: #0d6efd;
        --danger: #dc3545;
        --light: #f8f9fa;
        --gray: #6b7280;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --border-radius: 0.75rem;
        --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

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

    /* Page Header */
    .page-header {
        margin-bottom: 2rem;
    }

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

    .subtitle {
        font-size: 0.95rem;
        color: #6b7280;
    }

    /* Card Styles */
    .card {
        background: #fff;
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
        overflow: hidden;
        animation: slideUp 0.3s ease-out;
    }

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

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

    .card-header {
        background: linear-gradient(135deg, var(--primary) 0%, #0a58ca 100%);
    }

    .bg-gradient-primary {
        background: linear-gradient(135deg, var(--primary) 0%, #0a58ca 100%) !important;
    }

    .card-body {
        padding: 2rem;
    }

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

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

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .section-header {
        border-bottom: 2px solid var(--gray-200);
    }

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

    /* Form Labels */
    .form-label {
        font-size: 0.95rem;
        font-weight: 600;
        color: #2a2a2a;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

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

    /* Input Groups */
    .input-group {
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;
    }

    .input-group:focus-within {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    }

    .input-group-text {
        background-color: var(--light);
        border-color: var(--gray-200);
        color: var(--primary);
        border: 1px solid var(--gray-200);
    }

    .input-group-lg {
        min-height: 48px;
    }

    .input-group-lg .form-control,
    .input-group-lg .form-select {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-height: 48px;
    }

    /* Form Controls */
    .form-control,
    .form-select {
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius);
        padding: 0.625rem 1rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background-color: #fff;
        color: #2a2a2a;
    }

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

    .form-control::placeholder {
        color: #9ca3af;
    }

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

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

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

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

    /* Helper Text */
    .form-text {
        font-size: 0.85rem;
        color: var(--gray);
    }

    /* Buttons */
    .btn {
        border-radius: var(--border-radius);
        font-weight: 500;
        font-size: 0.95rem;
        padding: 0.625rem 1.25rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: none;
    }

    .btn-lg {
        padding: 0.75rem 1.75rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--primary) 0%, #0a58ca 100%);
        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 var(--gray);
        color: var(--gray);
    }

    .btn-outline-secondary:hover {
        background-color: var(--light);
        border-color: #4b5563;
        color: #4b5563;
    }

    .btn-light {
        background-color: #f3f4f6;
        border: 1.5px solid var(--gray-300);
        color: #4b5563;
    }

    .btn-light:hover {
        background-color: var(--gray-200);
        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);
        background-color: rgba(13, 110, 253, 0.05);
        color: #0c5de6;
    }

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

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

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

        .card-body,
        .card-footer {
            padding: 1.25rem;
        }

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

        .btn {
            width: 100%;
            justify-content: center;
            margin-bottom: 0.5rem;
        }

        .btn-lg {
            width: 100%;
        }

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

        .d-flex.gap-3 {
            flex-direction: column;
        }

        .section-badge {
            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');
        const resetBtn = document.getElementById('resetBtn');

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

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

            if (form.checkValidity()) {
                submitBtn.disabled = true;
                submitSpinner.classList.remove('d-none');
                submitText.textContent = 'Submitting...';
            }
        });

        // Real-time validation on blur
        const inputs = form.querySelectorAll('input, textarea, select');
        inputs.forEach(field => {
            field.addEventListener('blur', () => validateField(field));
            field.addEventListener('input', () => {
                if (field.classList.contains('is-invalid')) {
                    field.classList.remove('is-invalid');
                }
            });
        });

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

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

            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');
        }

        // Reset button confirmation
        resetBtn.addEventListener('click', () => {
            const inputs = form.querySelectorAll('input:not([type="hidden"]), textarea, select');
            let hasValues = false;

            inputs.forEach(input => {
                if (input.value && input.name !== 'entrydate') {
                    hasValues = true;
                }
            });

            if (hasValues && !confirm('Clear all fields?')) {
                return false;
            }

            form.classList.remove('was-validated');
            inputs.forEach(input => {
                if (input.type !== 'hidden') {
                    input.classList.remove('is-invalid');
                }
            });
        });
    });
</script>
@endpush

@endsection