@extends('layouts.admin')

@section('title', 'Add Carrier')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom" style="padding-top: 56px;">
    <h1 class="h2">Add Carrier</h1>
    <div>
        <a href="{{ route('admin.carriers.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Back to List
        </a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form action="{{ route('admin.carriers.store') }}" method="POST">
            @csrf

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Name *</label>
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" 
                           value="{{ old('name') }}" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">e.g., "Delhivery", "XpressBees", "IndiaPost"</small>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Slug</label>
                    <input type="text" name="slug" class="form-control @error('slug') is-invalid @enderror" 
                           value="{{ old('slug') }}" placeholder="Auto-generated if empty">
                    @error('slug')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">Unique identifier (e.g., "delhivery", "expressbees")</small>
                </div>

                <div class="col-12 mb-3">
                    <div class="form-check">
                        <input type="checkbox" name="enabled" class="form-check-input" id="enabled" 
                               value="1" {{ old('enabled', true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="enabled">
                            Enabled
                        </label>
                    </div>
                </div>

                <div class="col-12 mb-3">
                    <label class="form-label">Process Type *</label>
                    <div class="d-flex gap-4">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="process_type" id="process_type_automatic" value="automatic" {{ old('process_type', 'automatic') === 'automatic' ? 'checked' : '' }}>
                            <label class="form-check-label" for="process_type_automatic">Automatic</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="process_type" id="process_type_manual" value="manual" {{ old('process_type', 'automatic') === 'manual' ? 'checked' : '' }}>
                            <label class="form-check-label" for="process_type_manual">Manual</label>
                        </div>
                    </div>
                    <small class="form-text text-muted">Automatic: API creates shipment. Manual: staff enters tracking on the order.</small>
                </div>

                <div id="carrier-config-fields" style="{{ old('process_type', 'automatic') === 'manual' ? 'display:none;' : '' }}">
                <div class="col-12 mb-3">
                    <label class="form-label">API Keys (JSON) *</label>
                    <textarea name="api_keys" class="form-control @error('api_keys') is-invalid @enderror" 
                              rows="8" placeholder='{"api_token": "your_token", "api_url": "https://api.example.com", ...}'>{{ old('api_keys') }}</textarea>
                    @error('api_keys')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">JSON object containing API credentials. Will be encrypted.</small>
                </div>

                <div class="col-12 mb-3">
                    <label class="form-label">Config Schema (JSON)</label>
                    <textarea name="config_schema" class="form-control @error('config_schema') is-invalid @enderror" 
                              rows="10" placeholder='[{"name": "weight", "type": "number", "label": "Weight (grams)", "required": true}, ...]'>{{ old('config_schema') }}</textarea>
                    @error('config_schema')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="form-text text-muted">JSON array defining form fields for shipment creation. Each field: name, type (text/number/select), label, required, options (for select).</small>
                </div>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-save"></i> Create Carrier
                </button>
                <a href="{{ route('admin.carriers.index') }}" class="btn btn-secondary">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var automatic = document.getElementById('process_type_automatic');
    var manual = document.getElementById('process_type_manual');
    var configFields = document.getElementById('carrier-config-fields');
    function toggle() {
        configFields.style.display = (automatic && automatic.checked) ? '' : 'none';
    }
    if (automatic) automatic.addEventListener('change', toggle);
    if (manual) manual.addEventListener('change', toggle);
});
</script>
@endpush
@endsection