@extends('layout.app')

@section('title', 'Tambah Jalur Fiber - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah Jalur Fiber" 
    :breadcrumbs="[
        ['name' => 'Jalur Fiber', 'url' => route('jalur-fiber.index')],
        ['name' => 'Tambah']
    ]"
    :action="route('jalur-fiber.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">

<div class="row">
    <div class="col-lg-8">
        <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
            <div class="card-header pb-3">
                <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                    <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">cable</i> Form Tambah Jalur Fiber
                </h6>
            </div>
            <div class="card-body pt-3">
                <form method="POST" action="{{ route('jalur-fiber.store') }}">
                    @csrf
                    
                    <div class="form-group mb-3">
                        <label class="form-label">Nama Jalur <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control @error('nama_jalur') is-invalid @enderror" 
                               id="nama_jalur" 
                               name="nama_jalur" 
                               value="{{ old('nama_jalur') }}" 
                               required>
                        @error('nama_jalur')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Tipe Jalur <span class="text-danger">*</span></label>
                                <select class="form-control @error('tipe_jalur') is-invalid @enderror" 
                                        id="tipe_jalur" name="tipe_jalur" required>
                                    <option value="">Pilih Tipe Jalur</option>
                                    <option value="Backbone" {{ old('tipe_jalur') == 'Backbone' ? 'selected' : '' }}>Backbone</option>
                                    <option value="Distribution" {{ old('tipe_jalur') == 'Distribution' ? 'selected' : '' }}>Distribution</option>
                                    <option value="Access" {{ old('tipe_jalur') == 'Access' ? 'selected' : '' }}>Access</option>
                                    <option value="Feeder" {{ old('tipe_jalur') == 'Feeder' ? 'selected' : '' }}>Feeder</option>
                                </select>
                                @error('tipe_jalur')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select class="form-control @error('status') is-invalid @enderror" 
                                        id="status" name="status" required>
                                    <option value="">Pilih Status</option>
                                    <option value="Aktif" {{ old('status', 'Aktif') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="Maintenance" {{ old('status') == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                                    <option value="Nonaktif" {{ old('status') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label">Panjang (Meter) <span class="text-danger">*</span></label>
                        <input type="number" 
                               class="form-control @error('panjang_meter') is-invalid @enderror" 
                               id="panjang_meter" 
                               name="panjang_meter" 
                               value="{{ old('panjang_meter') }}" 
                               min="0" 
                               step="0.01"
                               required>
                        <small class="text-muted">Panjang jalur fiber dalam meter</small>
                        @error('panjang_meter')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label">Koordinat <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('koordinat') is-invalid @enderror" 
                                  id="koordinat" 
                                  name="koordinat" 
                                  rows="4" 
                                  required>{{ old('koordinat') }}</textarea>
                        <small class="text-muted">
                            Format: JSON array koordinat [{"lat": -6.2088, "lng": 106.8456}, {"lat": -6.2089, "lng": 106.8457}]
                        </small>
                        @error('koordinat')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea class="form-control @error('keterangan') is-invalid @enderror" 
                                  id="keterangan" 
                                  name="keterangan" 
                                  rows="3">{{ old('keterangan') }}</textarea>
                        @error('keterangan')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn bg-gradient-primary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i>Simpan Jalur Fiber
                        </button>
                        <a href="{{ route('jalur-fiber.index') }}" class="btn bg-gradient-secondary mb-0">
                            <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">close</i>Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
            <div class="card-header pb-3">
                <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                    <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">info</i> Informasi
                </h6>
            </div>
            <div class="card-body pt-3">
                <p class="text-muted">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">info</i>
                    <strong>Backbone:</strong> Jalur utama dengan kapasitas tinggi
                </p>
                <p class="text-muted">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">info</i>
                    <strong>Distribution:</strong> Jalur distribusi dari backbone
                </p>
                <p class="text-muted">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">info</i>
                    <strong>Access:</strong> Jalur akses ke pelanggan
                </p>
                <p class="text-muted">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">info</i>
                    <strong>Feeder:</strong> Jalur pengumpul dari access
                </p>
                
                <div class="alert alert-warning text-white mt-3 mb-0">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">warning</i>
                    <strong>Penting:</strong> Pastikan koordinat dalam format JSON yang valid untuk menampilkan di peta.
                </div>
                
                <div class="mt-3">
                    <p class="text-muted mb-2">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">map</i>
                        Visualisasi jalur di peta
                    </p>
                    <p class="text-muted mb-2">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">straighten</i>
                        Tracking panjang fiber
                    </p>
                    <p class="text-muted mb-2">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">monitoring</i>
                        Status monitoring
                    </p>
                    <p class="text-muted mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">download</i>
                        Export data
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection