@extends('layouts.app')

@section('title', 'Create Billing Status')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header-modern">
                <div class="header-content">
                    <div class="header-left">
                        <div class="header-icon">
                            <i class="fas fa-receipt"></i>
                        </div>
                        <div class="header-text">
                            <h2 class="header-title">Create New Billing Status</h2>
                            <p class="header-subtitle">Add a new billing status to the system</p>
                        </div>
                    </div>
                    <div class="header-right">
                        <a href="{{ route('billing-statuses.index') }}" class="btn btn-secondary-modern">
                            <i class="fas fa-arrow-left"></i>
                            <span>Back to List</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card-modern">
                <div class="card-header-modern">
                    <h5 class="card-title-modern">
                        <i class="fas fa-info-circle me-2"></i>
                        Billing Status Information
                    </h5>
                </div>
                <div class="card-body-modern">
                    <form action="{{ route('billing-statuses.store') }}" method="POST" class="form-modern">
                        @csrf
                        
                        <div class="form-section">
                            <h6 class="form-section-title">Basic Information</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="name" class="form-label-modern">
                                            <i class="fas fa-tag me-1"></i>
                                            Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control-modern @error('name') is-invalid @enderror" 
                                               id="name" name="name" value="{{ old('name') }}" 
                                               placeholder="Enter billing status name" required>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="is_active" class="form-label-modern">
                                            <i class="fas fa-toggle-on me-1"></i>
                                            Status
                                        </label>
                                        <div class="switch-container">
                                            <div class="form-check form-switch-modern">
                                                <input class="form-check-input-modern" type="checkbox" id="is_active" 
                                                       name="is_active" value="1" {{ old('is_active') ? 'checked' : '' }}>
                                                <label class="form-check-label-modern" for="is_active">
                                                    <span class="switch-label">Active</span>
                                                    <span class="switch-description">Enable this billing status</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-section">
                            <h6 class="form-section-title">Additional Details</h6>
                            <div class="form-group-modern">
                                <label for="description" class="form-label-modern">
                                    <i class="fas fa-align-left me-1"></i>
                                    Description
                                </label>
                                <textarea class="form-control-modern @error('description') is-invalid @enderror" 
                                          id="description" name="description" rows="4" 
                                          placeholder="Enter a detailed description for this billing status">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="form-actions-modern">
                            <button type="submit" class="btn btn-primary-modern">
                                <i class="fas fa-save"></i>
                                <span>Create Billing Status</span>
                            </button>
                            <a href="{{ route('billing-statuses.index') }}" class="btn btn-secondary-modern">
                                <i class="fas fa-times"></i>
                                <span>Cancel</span>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section('styles')
<style>
.page-header-modern{background:#2F4255;border-radius:12px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 20px rgba(47,66,85,0.3)}
.header-content{display:flex;justify-content:space-between;align-items:center}
.header-left{display:flex;align-items:center;gap:1rem}
.header-icon{width:60px;height:60px;background:rgba(255,255,255,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:white}
.header-title{color:white;font-size:1.75rem;font-weight:700;margin:0}
.header-subtitle{color:rgba(255,255,255,0.8);font-size:0.95rem;margin:0.25rem 0 0 0}
.btn-primary-modern,.btn-secondary-modern{border:none;border-radius:8px;padding:0.75rem 1.5rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:all 0.3s ease;text-decoration:none}
.btn-primary-modern{background:#3b82f6;color:white;box-shadow:0 2px 10px rgba(59,130,246,0.3)}
.btn-primary-modern:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 20px rgba(59,130,246,0.4);color:white}
.btn-secondary-modern{background:#6b7280;color:white;box-shadow:0 2px 10px rgba(107,114,128,0.3)}
.btn-secondary-modern:hover{background:#4b5563;transform:translateY(-2px);box-shadow:0 4px 20px rgba(107,114,128,0.4);color:white}
.card-modern{background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:none;overflow:hidden}
.card-header-modern{background:#f8fafc;padding:1.5rem;border-bottom:1px solid #e5e7eb}
.card-title-modern{color:#374151;font-size:1.1rem;font-weight:600;margin:0;display:flex;align-items:center}
.card-body-modern{padding:2rem}
.form-modern{max-width:none}
.form-section{margin-bottom:2rem}
.form-section-title{color:#374151;font-size:1rem;font-weight:600;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid #e5e7eb}
.form-group-modern{margin-bottom:1.5rem}
.form-label-modern{color:#374151;font-weight:600;font-size:0.875rem;margin-bottom:0.5rem;display:flex;align-items:center}
.form-control-modern{width:100%;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:0.95rem;transition:all 0.2s ease;background:white}
.form-control-modern:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}
.form-control-modern.is-invalid{border-color:#dc2626}
.form-control-modern.is-invalid:focus{box-shadow:0 0 0 3px rgba(220,38,38,0.1)}
.switch-container{padding:0.5rem 0}
.form-switch-modern{display:flex;align-items:center;gap:1rem}
.form-check-input-modern{width:3rem;height:1.5rem;background-color:#e5e7eb;border:none;border-radius:1rem;position:relative;cursor:pointer;transition:all 0.3s ease}
.form-check-input-modern:checked{background-color:#10b981}
.form-check-input-modern:checked::before{transform:translateX(1.5rem)}
.form-check-input-modern::before{content:'';position:absolute;top:0.125rem;left:0.125rem;width:1.25rem;height:1.25rem;background:white;border-radius:50%;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.form-check-label-modern{display:flex;flex-direction:column;cursor:pointer}
.switch-label{font-weight:600;color:#374151;font-size:0.875rem}
.switch-description{font-size:0.75rem;color:#6b7280;margin-top:0.125rem}
.form-actions-modern{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid #e5e7eb;margin-top:2rem}
@media (max-width:768px){
.header-content{flex-direction:column;gap:1rem;text-align:center}
.form-actions-modern{flex-direction:column}
.card-body-modern{padding:1rem}
}
</style>
@endsection
@endsection