@extends('layouts.admin.app')

@section('title', translate('Courier Automation'))

@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm mb-2 mb-sm-0">
                    <h1 class="page-header-title">{{ translate('Courier Automation Settings') }}</h1>
                    <p class="mb-0 text-body">{{ translate('Manual confirm first, then one-click courier booking.') }}</p>
                </div>
            </div>
        </div>

        @include('admin-views.business-settings.partials.third-party-links')

        <form action="{{ route('admin.business-settings.third-party.courier.update') }}" method="post">
            @csrf
            <div class="card mb-3">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ translate('Integration Control') }}</h4>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label d-flex justify-content-between align-items-center">
                                <span>{{ translate('Enable Courier Integration') }}</span>
                                <span class="badge badge-soft-info">{{ translate('Manual First') }}</span>
                            </label>
                            <input type="hidden" name="enabled" value="0">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="courier-enabled" name="enabled" value="1" {{ data_get($integration, 'enabled') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="courier-enabled">{{ translate('Enable') }}</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Mode') }}</label>
                            <select class="form-control" name="mode" required>
                                <option value="sandbox" {{ data_get($integration, 'mode') === 'sandbox' ? 'selected' : '' }}>{{ translate('Sandbox') }}</option>
                                <option value="live" {{ data_get($integration, 'mode') === 'live' ? 'selected' : '' }}>{{ translate('Live') }}</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Provider') }}</label>
                            <input type="text" class="form-control" value="SteadFast" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label d-flex justify-content-between align-items-center">
                                <span>{{ translate('Enable Provider') }}</span>
                            </label>
                            <input type="hidden" name="provider_enabled" value="0">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="provider-enabled" name="provider_enabled" value="1" {{ data_get($providerConfig, 'enabled') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="provider-enabled">{{ translate('Enable SteadFast') }}</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Manual Sync') }}</label>
                            <input type="hidden" name="manual_sync_enabled" value="0">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="manual-sync-enabled" name="manual_sync_enabled" value="1" {{ data_get($integration, 'manual_sync_enabled') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="manual-sync-enabled">{{ translate('Allow Sync Courier Status') }}</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Auto Sync') }}</label>
                            <input type="hidden" name="auto_sync_enabled" value="0">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="auto-sync-enabled" name="auto_sync_enabled" value="1" {{ data_get($integration, 'auto_sync_enabled') ? 'checked' : '' }}>
                                <label class="custom-control-label" for="auto-sync-enabled">{{ translate('Future-ready toggle') }}</label>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <label class="form-label">{{ translate('Allowed Booking Status') }}</label>
                        <div class="d-flex flex-wrap __gap-12px">
                            @foreach (['confirmed' => 'Confirmed', 'processing' => 'Packaging'] as $key => $label)
                                <label class="checkbox--item">
                                    <input type="checkbox" name="allowed_booking_statuses[]" value="{{ $key }}" {{ in_array($key, data_get($integration, 'allowed_booking_statuses', []), true) ? 'checked' : '' }}>
                                    <span class="checkmark mr-2"></span>
                                    {{ translate($label) }}
                                </label>
                            @endforeach
                        </div>
                        @if (isset($errors) && $errors->has('allowed_booking_statuses'))
                            <small class="text-danger d-block mt-2">{{ $errors->first('allowed_booking_statuses') }}</small>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ translate('Sender Profile') }}</h4>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Sender Name') }}</label>
                            <input type="text" class="form-control" name="sender_name" value="{{ old('sender_name', data_get($senderProfile, 'sender_name')) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Sender Phone') }}</label>
                            <input type="text" class="form-control" name="sender_phone" value="{{ old('sender_phone', data_get($senderProfile, 'sender_phone')) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Sender District') }}</label>
                            <input type="text" class="form-control" name="sender_district" value="{{ old('sender_district', data_get($senderProfile, 'sender_district')) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Default Parcel Note') }}</label>
                            <input type="text" class="form-control" name="default_parcel_note" value="{{ old('default_parcel_note', data_get($senderProfile, 'default_parcel_note')) }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ translate('Sender Address') }}</label>
                            <textarea class="form-control" rows="3" name="sender_address" required>{{ old('sender_address', data_get($senderProfile, 'sender_address')) }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ translate('SteadFast API Configuration') }}</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-soft-info mb-4">
                        <strong>{{ translate('Latest public package reference') }}:</strong>
                        <span>{{ translate('Base URL and endpoint paths are editable so the integration can be aligned safely with the latest merchant credential/documentation without changing the code structure.') }}</span>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Base URL') }}</label>
                            <input type="url" class="form-control" name="base_url" value="{{ old('base_url', data_get($providerConfig, 'base_url')) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Booking Path') }}</label>
                            <input type="text" class="form-control" name="booking_path" value="{{ old('booking_path', data_get($providerConfig, 'booking_path')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Status by Consignment Path') }}</label>
                            <input type="text" class="form-control" name="status_by_consignment_path" value="{{ old('status_by_consignment_path', data_get($providerConfig, 'status_by_consignment_path')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Status by Invoice Path') }}</label>
                            <input type="text" class="form-control" name="status_by_invoice_path" value="{{ old('status_by_invoice_path', data_get($providerConfig, 'status_by_invoice_path')) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">{{ translate('Status by Tracking Path') }}</label>
                            <input type="text" class="form-control" name="status_by_tracking_path" value="{{ old('status_by_tracking_path', data_get($providerConfig, 'status_by_tracking_path')) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('API Key') }}</label>
                            <input type="text" class="form-control" name="api_key" value="{{ old('api_key', data_get($providerConfig, 'api_key')) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Secret Key') }}</label>
                            <input type="text" class="form-control" name="secret_key" value="{{ old('secret_key', data_get($providerConfig, 'secret_key')) }}">
                        </div>
                        <div class="col-12">
                            <div class="alert alert-soft-warning mb-0">
                                <strong>{{ translate('SteadFast Webhook Integration') }}:</strong>
                                <span>{{ translate('Provide the callback URL and bearer token below to SteadFast so shipment status changes can sync automatically into the admin panel.') }}</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Callback URL') }}</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="steadfast-callback-url" value="{{ $webhookCallbackUrl }}" readonly>
                                <button type="button" class="btn btn-outline-primary copy-to-clipboard" data-target="#steadfast-callback-url">
                                    <i class="tio-copy"></i>
                                </button>
                            </div>
                            <small class="text-muted d-block mt-2">{{ translate('SteadFast should send parcel status updates to this URL.') }}</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ translate('Auth Token (Bearer)') }}</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="steadfast-webhook-token" name="webhook_bearer_token" value="{{ old('webhook_bearer_token', data_get($providerConfig, 'webhook_bearer_token')) }}">
                                <button type="button" class="btn btn-outline-primary copy-to-clipboard" data-target="#steadfast-webhook-token">
                                    <i class="tio-copy"></i>
                                </button>
                            </div>
                            <small class="text-muted d-block mt-2">{{ translate('SteadFast will send this as Authorization: Bearer <token>.') }}</small>
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-4">
                        <button type="submit" class="btn btn--primary">{{ translate('Save Courier Settings') }}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('script_2')
    <script>
        'use strict';

        $(document).on('click', '.copy-to-clipboard', function () {
            const target = $(this).data('target');
            const element = document.querySelector(target);

            if (!element) {
                return;
            }

            navigator.clipboard.writeText(element.value).then(function () {
                toastr.success('Copied to clipboard!');
            });
        });
    </script>
@endpush
