@extends('layouts.app')

@section('title', 'Create Active Client - ISP ERP System')

@section('page-title', 'Create Active Client')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-plus me-2"></i>
                                Create Active Client
                            </h3>
                            <p class="mb-0 opacity-75">Add new active client information</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('active-clients.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-arrow-left me-2"></i>Back to Active Clients
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user-plus me-2"></i>
                        Active Client Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <form action="{{ route('active-clients.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Basic Information Section -->
                        <div class="info-block mb-4">
                            <div class="info-block-header">
                                <h6 class="text-white mb-0">
                                    <i class="fas fa-info-circle me-2"></i>Basic Information
                                </h6>
                                <small class="text-white-50">Fill Up All Required(*) Field Data</small>
                            </div>
                            <div class="info-block-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="client_id" class="form-label">Client <span class="text-danger">*</span></label>
                                            <select class="form-select @error('client_id') is-invalid @enderror" id="client_id" name="client_id" required>
                                                <option value="">Select a Client</option>
                                                @foreach(\App\Models\Client::where('status', 'Active')->orderBy('name')->get() as $client)
                                                    <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                                        {{ $client->name }} ({{ $client->username }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('client_id')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="full_name" class="form-label">Full Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('full_name') is-invalid @enderror" 
                                                   id="full_name" name="full_name" value="{{ old('full_name') }}" required>
                                            @error('full_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="mobile_number" class="form-label">Mobile Number <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('mobile_number') is-invalid @enderror" 
                                                   id="mobile_number" name="mobile_number" value="{{ old('mobile_number') }}" required>
                                            @error('mobile_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="email_address" class="form-label">Email Address</label>
                                            <input type="email" class="form-control @error('email_address') is-invalid @enderror" 
                                                   id="email_address" name="email_address" value="{{ old('email_address') }}">
                                            @error('email_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="address" class="form-label">Address</label>
                                            <textarea class="form-control @error('address') is-invalid @enderror" 
                                                      id="address" name="address" rows="3">{{ old('address') }}</textarea>
                                            @error('address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Personal Information Section -->
                        <div class="info-block mb-4">
                            <div class="info-block-header">
                                <h6 class="text-white mb-0">
                                    <i class="fas fa-user me-2"></i>Personal Information
                                </h6>
                                <small class="text-white-50">Personal Details</small>
                            </div>
                            <div class="info-block-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="occupation" class="form-label">Occupation</label>
                                            <input type="text" class="form-control @error('occupation') is-invalid @enderror" 
                                                   id="occupation" name="occupation" value="{{ old('occupation') }}">
                                            @error('occupation')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="gender" class="form-label">Gender</label>
                                            <select class="form-select @error('gender') is-invalid @enderror" id="gender" name="gender">
                                                <option value="">Select Gender</option>
                                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                                <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                                            </select>
                                            @error('gender')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="date_of_birth" class="form-label">Date of Birth</label>
                                            <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror" 
                                                   id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}">
                                            @error('date_of_birth')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="nid_birth_certificate_no" class="form-label">NID/Birth Certificate No</label>
                                            <input type="text" class="form-control @error('nid_birth_certificate_no') is-invalid @enderror" 
                                                   id="nid_birth_certificate_no" name="nid_birth_certificate_no" value="{{ old('nid_birth_certificate_no') }}">
                                            @error('nid_birth_certificate_no')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="father_name" class="form-label">Father's Name</label>
                                            <input type="text" class="form-control @error('father_name') is-invalid @enderror" 
                                                   id="father_name" name="father_name" value="{{ old('father_name') }}">
                                            @error('father_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="mother_name" class="form-label">Mother's Name</label>
                                            <input type="text" class="form-control @error('mother_name') is-invalid @enderror" 
                                                   id="mother_name" name="mother_name" value="{{ old('mother_name') }}">
                                            @error('mother_name')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information Section -->
                        <div class="info-block mb-4">
                            <div class="info-block-header">
                                <h6 class="text-white mb-0">
                                    <i class="fas fa-address-book me-2"></i>Contact Information
                                </h6>
                                <small class="text-white-50">Contact Details</small>
                            </div>
                            <div class="info-block-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="phone_number" class="form-label">Phone Number</label>
                                            <input type="text" class="form-control @error('phone_number') is-invalid @enderror" 
                                                   id="phone_number" name="phone_number" value="{{ old('phone_number') }}">
                                            @error('phone_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="facebook_url" class="form-label">Facebook URL</label>
                                            <input type="url" class="form-control @error('facebook_url') is-invalid @enderror" 
                                                   id="facebook_url" name="facebook_url" value="{{ old('facebook_url') }}">
                                            @error('facebook_url')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="linkedin_url" class="form-label">LinkedIn URL</label>
                                            <input type="url" class="form-control @error('linkedin_url') is-invalid @enderror" 
                                                   id="linkedin_url" name="linkedin_url" value="{{ old('linkedin_url') }}">
                                            @error('linkedin_url')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="road_number" class="form-label">Road Number</label>
                                            <input type="text" class="form-control @error('road_number') is-invalid @enderror" 
                                                   id="road_number" name="road_number" value="{{ old('road_number') }}">
                                            @error('road_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="house_number" class="form-label">House Number</label>
                                            <input type="text" class="form-control @error('house_number') is-invalid @enderror" 
                                                   id="house_number" name="house_number" value="{{ old('house_number') }}">
                                            @error('house_number')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="present_address" class="form-label">Present Address</label>
                                            <textarea class="form-control @error('present_address') is-invalid @enderror" 
                                                      id="present_address" name="present_address" rows="3">{{ old('present_address') }}</textarea>
                                            @error('present_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="permanent_address" class="form-label">Permanent Address</label>
                                            <textarea class="form-control @error('permanent_address') is-invalid @enderror" 
                                                      id="permanent_address" name="permanent_address" rows="3">{{ old('permanent_address') }}</textarea>
                                            @error('permanent_address')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="same_as_present_address" name="same_as_present_address" 
                                                       {{ old('same_as_present_address') ? 'checked' : '' }}>
                                                <label class="form-check-label" for="same_as_present_address">
                                                    Same as Present Address
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- File Upload Section -->
                        <div class="info-block mb-4">
                            <div class="info-block-header">
                                <h6 class="text-white mb-0">
                                    <i class="fas fa-upload me-2"></i>File Uploads
                                </h6>
                                <small class="text-white-50">Upload Required Documents</small>
                            </div>
                            <div class="info-block-content">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="profile_picture" class="form-label">Profile Picture</label>
                                            <input type="file" class="form-control @error('profile_picture') is-invalid @enderror" 
                                                   id="profile_picture" name="profile_picture" accept="image/*">
                                            @error('profile_picture')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="nid_birth_certificate_picture" class="form-label">NID/Birth Certificate Picture</label>
                                            <input type="file" class="form-control @error('nid_birth_certificate_picture') is-invalid @enderror" 
                                                   id="nid_birth_certificate_picture" name="nid_birth_certificate_picture" accept="image/*">
                                            @error('nid_birth_certificate_picture')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="registration_form_picture" class="form-label">Registration Form Picture</label>
                                            <input type="file" class="form-control @error('registration_form_picture') is-invalid @enderror" 
                                                   id="registration_form_picture" name="registration_form_picture" accept="image/*">
                                            @error('registration_form_picture')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Information Section -->
                        <div class="info-block mb-4">
                            <div class="info-block-header">
                                <h6 class="text-white mb-0">
                                    <i class="fas fa-info-circle me-2"></i>Additional Information
                                </h6>
                                <small class="text-white-50">Additional Details</small>
                            </div>
                            <div class="info-block-content">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="registration_form_no" class="form-label">Registration Form No</label>
                                            <input type="text" class="form-control @error('registration_form_no') is-invalid @enderror" 
                                                   id="registration_form_no" name="registration_form_no" value="{{ old('registration_form_no') }}">
                                            @error('registration_form_no')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="reference_by" class="form-label">Reference By</label>
                                            <input type="text" class="form-control @error('reference_by') is-invalid @enderror" 
                                                   id="reference_by" name="reference_by" value="{{ old('reference_by') }}">
                                            @error('reference_by')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="remarks" class="form-label">Remarks</label>
                                            <textarea class="form-control @error('remarks') is-invalid @enderror" 
                                                      id="remarks" name="remarks" rows="3">{{ old('remarks') }}</textarea>
                                            @error('remarks')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary btn-custom">
                                <i class="fas fa-save me-2"></i>Create Active Client
                            </button>
                            <a href="{{ route('active-clients.index') }}" class="btn btn-secondary btn-custom">
                                <i class="fas fa-times me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.btn-custom {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Info Block Styles */
.info-block {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

.info-block-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.info-block-header h6 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.info-block-header small {
    font-size: 0.85rem;
    opacity: 0.9;
}

.info-block-content {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
}

/* Form Controls */
.info-block-content .form-control,
.info-block-content .form-select {
    border: 2px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.info-block-content .form-control:focus,
.info-block-content .form-select:focus {
    border-color: #2a5298;
    box-shadow: 0 0 0 0.2rem rgba(42, 82, 152, 0.25);
    outline: none;
}

.info-block-content .form-control:hover,
.info-block-content .form-select:hover {
    border-color: #2a5298;
}

/* Form Labels */
.info-block-content .form-label {
    color: #495057;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* File Upload Styles */
.info-block-content .form-control[type="file"] {
    padding: 0.5rem 1rem;
}

/* Checkbox Styles */
.info-block-content .form-check-input:checked {
    background-color: #2a5298;
    border-color: #2a5298;
}

.info-block-content .form-check-input:focus {
    border-color: #2a5298;
    box-shadow: 0 0 0 0.2rem rgba(42, 82, 152, 0.25);
}

/* Responsive Design */
@media (max-width: 768px) {
    .info-block-header {
        padding: 0.75rem 1rem;
    }
    
    .info-block-content {
        padding: 1rem;
    }
    
    .info-block-header h6 {
        font-size: 1rem;
    }
    
    .info-block-header small {
        font-size: 0.8rem;
    }
}
</style>
@endsection