@extends('layouts.app')

@section('title', 'Create Connection Type')

@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-network-wired"></i>
                        </div>
                        <div class="header-text">
                            <h2 class="header-title">Create New Connection Type</h2>
                            <p class="header-subtitle">Add a new connection type to the system</p>
                        </div>
                    </div>
                    <div class="header-right">
                        <a href="{{ route('connection-types.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>
                        Connection Type Information
                    </h5>
                </div>
                <div class="card-body-modern">
                    <form action="{{ route('connection-types.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>
                                        <div class="d-flex align-items-center" style="gap: 0.5rem;">
                                        <input type="text" class="form-control-modern @error('name') is-invalid @enderror" 
                                               id="name" name="name" value="{{ old('name') }}" 
                                                   placeholder="Enter connection type name" required style="flex: 1;">
                                            <div class="form-check d-flex align-items-center" style="min-width: 100px; margin-top: 0; margin-bottom: 0;">
                                                <input class="form-check-input" type="checkbox" id="include" 
                                                       name="include" value="1" {{ old('include') ? 'checked' : '' }} style="margin-top: 0; margin-right: 0.5rem;">
                                                <label class="form-check-label mb-0" for="include" style="cursor: pointer;">
                                                    Include
                                                </label>
                                            </div>
                                        </div>
                                        @error('name')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group-modern">
                                        <label for="isp_id" class="form-label-modern">
                                            <i class="fas fa-building me-1"></i>
                                            ISP/Branch <span class="text-danger">*</span>
                                        </label>
                                        <select class="form-control-modern @error('isp_id') is-invalid @enderror" 
                                                id="isp_id" name="isp_id" required>
                                            <option value="">Select ISP/Branch</option>
                                            @foreach($branches as $branch)
                                                <option value="{{ $branch->id }}" {{ old('isp_id') == $branch->id ? 'selected' : '' }}>
                                                    {{ $branch->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('isp_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <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', true) ? 'checked' : '' }}>
                                                <label class="form-check-label-modern" for="is_active">
                                                    <span class="switch-label">Active</span>
                                                    <span class="switch-description">Enable this connection type</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 connection type">{{ 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 Connection Type</span>
                            </button>
                            <a href="{{ route('connection-types.index') }}" class="btn btn-secondary-modern">
                                <i class="fas fa-times"></i>
                                <span>Cancel</span>
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form.form-modern');
    const nameInput = document.getElementById('name');
    const includeCheckbox = document.getElementById('include');
    
    if (form && nameInput && includeCheckbox) {
        form.addEventListener('submit', function(e) {
            const nameValue = nameInput.value.trim();
            const isChecked = includeCheckbox.checked;
            
            // If checkbox is checked, append "Include" to the name
            if (isChecked && nameValue) {
                // Check if "Include" is not already in the name
                if (!nameValue.toLowerCase().includes('include')) {
                    nameInput.value = nameValue + ' Include';
                }
            }
        });
    }
});
</script>

@section('styles')
<style>
.page-header-modern{background:#2F4255;border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem;box-shadow:0 2px 10px rgba(47,66,85,0.2)}
.header-content{display:flex;justify-content:space-between;align-items:center}
.header-left{display:flex;align-items:center;gap:0.75rem}
.header-icon{width:45px;height:45px;background:rgba(255,255,255,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:white}
.header-title{color:white;font-size:1.35rem;font-weight:700;margin:0}
.header-subtitle{color:rgba(255,255,255,0.8);font-size:0.85rem;margin:0.15rem 0 0 0}
.btn-primary-modern,.btn-secondary-modern{border:none;border-radius:6px;padding:0.5rem 1rem;font-weight:600;font-size:0.875rem;display:flex;align-items:center;gap:0.4rem;transition:all 0.3s ease;text-decoration:none}
.btn-primary-modern{background:#3b82f6;color:white;box-shadow:0 2px 8px rgba(59,130,246,0.3)}
.btn-primary-modern:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 3px 12px rgba(59,130,246,0.4);color:white}
.btn-secondary-modern{background:#6b7280;color:white;box-shadow:0 2px 8px rgba(107,114,128,0.3)}
.btn-secondary-modern:hover{background:#4b5563;transform:translateY(-1px);box-shadow:0 3px 12px rgba(107,114,128,0.4);color:white}
.card-modern{background:white;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.06);border:none;overflow:hidden}
.card-header-modern{background:#f8fafc;padding:0.75rem 1rem;border-bottom:1px solid #e5e7eb}
.card-title-modern{color:#374151;font-size:0.95rem;font-weight:600;margin:0;display:flex;align-items:center}
.card-body-modern{padding:1rem 1.25rem}
.form-modern{max-width:none}
.form-section{margin-bottom:1.25rem}
.form-section-title{color:#374151;font-size:0.9rem;font-weight:600;margin-bottom:0.75rem;padding-bottom:0.4rem;border-bottom:2px solid #e5e7eb}
.form-group-modern{margin-bottom:1rem}
.form-label-modern{color:#374151;font-weight:600;font-size:0.8rem;margin-bottom:0.4rem;display:flex;align-items:center}
.form-control-modern{width:100%;padding:0.5rem 0.75rem;border:2px solid #e5e7eb;border-radius:6px;font-size:0.875rem;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.35rem 0}
.form-switch-modern{display:flex;align-items:center;gap:0.75rem}
.form-check-input-modern{width:2.5rem;height:1.25rem;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.25rem)}
.form-check-input-modern::before{content:'';position:absolute;top:0.1rem;left:0.1rem;width:1.05rem;height:1.05rem;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.8rem}
.switch-description{font-size:0.7rem;color:#6b7280;margin-top:0.1rem}
.form-actions-modern{display:flex;gap:0.75rem;padding-top:0.75rem;border-top:1px solid #e5e7eb;margin-top:1.25rem}
.form-check{margin-bottom:0}
.form-check-label{font-size:0.85rem;font-weight:500}
textarea.form-control-modern{min-height:80px}
@media (max-width:768px){
.header-content{flex-direction:column;gap:0.75rem;text-align:center}
.form-actions-modern{flex-direction:column}
.card-body-modern{padding:0.75rem}
}
</style>
@endsection
@endsection