@extends('layouts.admin')

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

@section('content')
<x-admin.form-page
    title="Add Carrier"
    :crumbs="[['label' => 'Carriers', 'url' => route('admin.carriers.index')], 'Add New']"
    :back-url="route('admin.carriers.index')"
    :action="route('admin.carriers.store')"
    form-id="carrierForm"
    submit-label="Create Carrier"
>
    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-box-seam"></i></span>
            <div>
                <h2 class="pp-card__title">Carrier Details</h2>
                <p class="pp-card__sub">Name, slug and process type</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-grid pp-grid--2">
                <div class="pp-field">
                    <label for="name">Name <span class="pp-req">*</span></label>
                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
                           value="{{ old('name') }}" required>
                    @error('name')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    <span class="pp-hint">e.g., "Delhivery", "XpressBees", "IndiaPost"</span>
                </div>

                <div class="pp-field">
                    <label for="slug">Slug</label>
                    <input type="text" name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror"
                           value="{{ old('slug') }}" placeholder="Auto-generated if empty">
                    @error('slug')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    <span class="pp-hint">Unique identifier (e.g., "delhivery", "expressbees")</span>
                </div>
            </div>

            <div class="pp-toggles mt-3">
                <label class="pp-toggle" for="enabled">
                    <input type="checkbox" name="enabled" class="form-check-input" role="switch" id="enabled"
                           value="1" {{ old('enabled', true) ? 'checked' : '' }}>
                    Enabled
                </label>
            </div>

            <div class="pp-field mt-3">
                <label>Process Type <span class="pp-req">*</span></label>
                <div class="pp-toggles">
                    <label class="pp-toggle" for="process_type_automatic">
                        <input class="form-check-input" type="radio" name="process_type" id="process_type_automatic" value="automatic" {{ old('process_type', 'automatic') === 'automatic' ? 'checked' : '' }}>
                        Automatic
                    </label>
                    <label class="pp-toggle" for="process_type_manual">
                        <input class="form-check-input" type="radio" name="process_type" id="process_type_manual" value="manual" {{ old('process_type', 'automatic') === 'manual' ? 'checked' : '' }}>
                        Manual
                    </label>
                </div>
                <span class="pp-hint">Automatic: API creates shipment. Manual: staff enters tracking on the order.</span>
            </div>
        </div>
    </section>

    <section class="pp-card mt-3" id="carrier-config-fields" style="{{ old('process_type', 'automatic') === 'manual' ? 'display:none;' : '' }}">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-key"></i></span>
            <div>
                <h2 class="pp-card__title">API Configuration</h2>
                <p class="pp-card__sub">Credentials and shipment form schema</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-field">
                <label for="api_keys">API Keys (JSON) <span class="pp-req">*</span></label>
                <textarea name="api_keys" id="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 d-block">{{ $message }}</div>@enderror
                <span class="pp-hint">JSON object containing API credentials. Will be encrypted.</span>
            </div>

            <div class="pp-field mt-3">
                <label for="config_schema">Config Schema (JSON)</label>
                <textarea name="config_schema" id="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 d-block">{{ $message }}</div>@enderror
                <span class="pp-hint">JSON array defining form fields for shipment creation. Each field: name, type (text/number/select), label, required, options (for select).</span>
            </div>
        </div>
    </section>
</x-admin.form-page>

@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