@extends('admin.layouts.app')

@section('panel')
@php
    $pageTitle = 'Add Courier Account';

    $oldDriver = old('driver', '');

    $defaultFraudProvider = $oldDriver === 'steadfast' ? 'native' : 'fraudbd';
    $defaultFraudBaseUrl = $oldDriver === 'steadfast'
        ? 'https://portal.packzy.com/api/v1'
        : 'https://fraudbd.com';

    $defaultFraudCheckUrl = $oldDriver === 'steadfast'
        ? 'https://portal.packzy.com/api/v1/fraud_check/{phone}'
        : '';

    $oldSupportsFraud = old('supports_fraud_check', false);
    $oldFraudProvider = old('fraud_provider', $defaultFraudProvider);
    $oldFraudCourier = old('fraud_courier_name', $oldDriver ?: 'all');
    $oldFraudBaseUrl = old('fraud_base_url', $defaultFraudBaseUrl);
    $oldFraudCheckUrl = old('fraud_check_url', $defaultFraudCheckUrl);
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.couriers.index') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-arrow-left"></i> @lang('Back')
    </a>
@endpush

<div class="row">
    <div class="col-lg-12">
        <div class="card courier-main-card">
            <form method="POST" action="{{ route('admin.couriers.store') }}">
                @csrf

                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert--danger mb-3">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="courier-box">

                        <div class="courier-section">
                            <div class="courier-section-head">
                                <div>
                                    <h6 class="courier-title">Courier Account Info</h6>
                                    <p class="courier-subtitle">Courier account name, driver and base API URL setup করুন।</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Account Name</label>
                                        <input
                                            type="text"
                                            name="name"
                                            value="{{ old('name') }}"
                                            class="form-control clean-input"
                                            placeholder="Steadfast Main / RedX Shop 1"
                                            required
                                        >
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Courier Driver</label>
                                        <select name="driver" id="courierDriver" class="form-control clean-input" required>
                                            <option value="">Select Courier</option>
                                            @foreach($drivers as $key => $label)
                                                <option value="{{ $key }}" @selected(old('driver') == $key)>
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="field-note">Driver change করলে নিচের API template auto update হবে।</div>
                                    </div>
                                </div>

                                <div class="col-lg-8 col-md-8">
                                    <div class="form-block mb-md-0">
                                        <label class="field-label">Base URL</label>
                                        <input
                                            type="text"
                                            name="base_url"
                                            id="baseUrl"
                                            value="{{ old('base_url') }}"
                                            class="form-control clean-input"
                                            placeholder="Base URL"
                                        >
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4">
                                    <div class="form-block mb-0">
                                        <label class="field-label">Sort Order</label>
                                        <input
                                            type="number"
                                            name="sort_order"
                                            value="{{ old('sort_order', 0) }}"
                                            class="form-control clean-input"
                                            min="0"
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="courier-section">
                            <div class="courier-section-head">
                                <div>
                                    <h6 class="courier-title">API Credentials</h6>
                                    <p class="courier-subtitle">Courier API credential এবং extra settings JSON format এ দিন।</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Credentials JSON</label>
                                        <textarea
                                            name="credentials"
                                            id="credentialsBox"
                                            rows="8"
                                            class="form-control json-input"
                                            placeholder='{"api_key":"...", "secret_key":"..."}'
                                            spellcheck="false"
                                        >{{ old('credentials') }}</textarea>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="form-block mb-0">
                                        <label class="field-label">Settings JSON</label>
                                        <textarea
                                            name="settings"
                                            id="settingsBox"
                                            rows="8"
                                            class="form-control json-input"
                                            placeholder='{"supports_fraud_check":true}'
                                            spellcheck="false"
                                        >{{ old('settings') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="courier-section">
                            <div class="courier-section-head">
                                <div>
                                    <h6 class="courier-title">Fraud Checker Settings</h6>
                                    <p class="courier-subtitle">এই courier account দিয়ে fraud report check করতে চাইলে নিচের settings update করুন।</p>
                                </div>
                            </div>

                            <div class="row fraud-row">
                                <div class="col-lg-4 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Fraud Checker</label>

                                        <label class="toggle-card">
                                            <input
                                                type="checkbox"
                                                name="supports_fraud_check"
                                                value="1"
                                                id="supportsFraudCheck"
                                                @checked($oldSupportsFraud)
                                            >
                                            <span>Enable fraud check</span>
                                        </label>

                                        <div class="field-note">Enable করলে এই account fraud report check করবে।</div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Fraud Provider</label>
                                        <select name="fraud_provider" id="fraudProvider" class="form-control clean-input">
                                            <option value="native" @selected($oldFraudProvider == 'native')>Courier Native API</option>
                                            <option value="fraudbd" @selected($oldFraudProvider == 'fraudbd')>FraudBD API</option>
                                            <option value="custom" @selected($oldFraudProvider == 'custom')>Custom API</option>
                                        </select>
                                        <div class="field-note">Steadfast official fraud API হলে Courier Native API সিলেক্ট করুন।</div>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Courier Name For Fraud API</label>
                                        <select name="fraud_courier_name" id="fraudCourierName" class="form-control clean-input">
                                            <option value="all" @selected($oldFraudCourier == 'all')>All Courier</option>
                                            <option value="steadfast" @selected($oldFraudCourier == 'steadfast')>Steadfast</option>
                                            <option value="pathao" @selected($oldFraudCourier == 'pathao')>Pathao</option>
                                            <option value="redx" @selected($oldFraudCourier == 'redx')>RedX</option>
                                            <option value="paperfly" @selected($oldFraudCourier == 'paperfly')>Paperfly</option>
                                            <option value="ecourier" @selected($oldFraudCourier == 'ecourier')>eCourier</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Fraud Base URL</label>
                                        <input
                                            type="text"
                                            name="fraud_base_url"
                                            id="fraudBaseUrl"
                                            value="{{ $oldFraudBaseUrl }}"
                                            class="form-control clean-input"
                                            placeholder="https://portal.packzy.com/api/v1"
                                        >
                                    </div>
                                </div>

                                <div class="col-lg-6 col-md-6">
                                    <div class="form-block">
                                        <label class="field-label">Fraud Check URL</label>
                                        <input
                                            type="text"
                                            name="fraud_check_url"
                                            id="fraudCheckUrl"
                                            value="{{ $oldFraudCheckUrl }}"
                                            class="form-control clean-input"
                                            placeholder="https://portal.packzy.com/api/v1/fraud_check/{phone}"
                                        >
                                        <div class="field-note">URL এর ভিতরে <b>{phone}</b> রাখতে হবে।</div>
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="fraud-note-box native-note">
                                        <div class="fraud-note-title">
                                            <i class="las la-check-circle"></i>
                                            Steadfast Native Fraud Check
                                        </div>

                                        <div class="fraud-note-text">
                                            Steadfast merchant API থাকলে <b>Fraud Provider = Courier Native API</b> রাখুন। Credentials JSON এ শুধু <b>api_key</b> এবং <b>secret_key</b> দিলেই হবে।
                                        </div>

                                        <div class="fraud-code">
                                            {"api_key":"YOUR_STEADFAST_API_KEY","secret_key":"YOUR_STEADFAST_SECRET_KEY"}
                                        </div>
                                    </div>

                                    <div class="fraud-note-box fraudbd-note d-none">
                                        <div class="fraud-note-title">
                                            <i class="las la-info-circle"></i>
                                            FraudBD API Key
                                        </div>

                                        <div class="fraud-note-text">
                                            FraudBD ব্যবহার করলে <b>Credentials JSON</b> এর ভিতরে <b>fraudbd_api_key</b> দিতে হবে।
                                        </div>

                                        <div class="fraud-code">
                                            {"api_key":"STEADFAST_KEY","secret_key":"STEADFAST_SECRET","fraudbd_api_key":"YOUR_FRAUDBD_API_KEY"}
                                        </div>
                                    </div>

                                    <div class="fraud-note-box custom-note d-none">
                                        <div class="fraud-note-title">
                                            <i class="las la-link"></i>
                                            Custom API
                                        </div>

                                        <div class="fraud-note-text">
                                            Custom API হলে Fraud Check URL অবশ্যই পূর্ণ URL হবে এবং URL এর ভিতরে <b>{phone}</b> placeholder থাকবে।
                                        </div>

                                        <div class="fraud-code">
                                            https://your-domain.com/api/fraud-check/{phone}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="courier-section border-bottom-0">
                            <div class="courier-section-head">
                                <div>
                                    <h6 class="courier-title">Status</h6>
                                    <p class="courier-subtitle">Default এবং active status control করুন।</p>
                                </div>
                            </div>

                            <div class="status-chip-wrap">
                                <label class="toggle-card status-chip">
                                    <input
                                        type="checkbox"
                                        name="is_default"
                                        value="1"
                                        @checked(old('is_default'))
                                    >
                                    <span>Default Courier</span>
                                </label>

                                <label class="toggle-card status-chip">
                                    <input
                                        type="checkbox"
                                        name="is_active"
                                        value="1"
                                        @checked(old('is_active', 1))
                                    >
                                    <span>Active</span>
                                </label>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn--primary w-100 h-45 save-btn">
                        <i class="las la-save"></i>
                        Save Courier Account
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('style')
<style>
    .courier-main-card{
        border:0;
        border-radius:14px;
        box-shadow:0 5px 22px rgba(15,23,42,.06);
    }

    .courier-box{
        border:1px solid #edf0f5;
        border-radius:14px;
        background:#fff;
        overflow:hidden;
    }

    .courier-section{
        padding:20px;
        border-bottom:1px solid #edf0f5;
    }

    .courier-section-head{
        margin-bottom:16px;
    }

    .courier-title{
        margin:0;
        font-size:15px;
        font-weight:900;
        color:#222;
        line-height:1.3;
    }

    .courier-subtitle{
        margin:5px 0 0;
        font-size:12px;
        font-weight:700;
        color:#7b8190;
        line-height:1.5;
    }

    .form-block{
        margin-bottom:16px;
    }

    .field-label{
        display:block;
        width:100%;
        margin:0 0 7px;
        font-size:13px;
        font-weight:900;
        color:#353945;
        line-height:1.3;
        white-space:normal;
    }

    .clean-input{
        height:44px;
        border-radius:9px !important;
        border:1px solid #dfe3ea !important;
        background:#fff !important;
        color:#222 !important;
        font-size:13px;
        font-weight:700;
        box-shadow:none !important;
    }

    .clean-input:focus{
        border-color:#ff5a00 !important;
        box-shadow:0 0 0 .12rem rgba(255,90,0,.12) !important;
    }

    .json-input{
        min-height:180px;
        resize:vertical;
        border-radius:10px !important;
        border:1px solid #dfe3ea !important;
        background:#fff !important;
        color:#222 !important;
        font-size:13px;
        font-weight:600;
        line-height:1.6;
        box-shadow:none !important;
        font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .json-input:focus{
        border-color:#ff5a00 !important;
        box-shadow:0 0 0 .12rem rgba(255,90,0,.12) !important;
    }

    .toggle-card{
        min-height:44px;
        display:flex;
        align-items:center;
        gap:8px;
        border:1px solid #dfe3ea;
        border-radius:9px;
        padding:9px 12px;
        background:#fff;
        cursor:pointer;
        margin:0;
        width:100%;
    }

    .toggle-card input{
        width:16px;
        height:16px;
        margin:0;
        flex-shrink:0;
    }

    .toggle-card span{
        font-size:13px;
        font-weight:800;
        color:#353945;
        line-height:1.4;
        white-space:normal;
    }

    .field-note{
        margin-top:6px;
        font-size:11px;
        font-weight:700;
        color:#7b8190;
        line-height:1.5;
    }

    .fraud-note-box{
        border:1px solid #dbeafe;
        background:#f8fbff;
        border-radius:12px;
        padding:13px 14px;
        margin-top:2px;
    }

    .fraud-note-title{
        display:flex;
        align-items:center;
        gap:6px;
        color:#1d4ed8;
        font-size:13px;
        font-weight:900;
        margin-bottom:6px;
    }

    .fraud-note-text{
        color:#334155;
        font-size:12px;
        font-weight:700;
        line-height:1.6;
    }

    .fraud-code{
        margin-top:8px;
        padding:8px 10px;
        border-radius:8px;
        border:1px solid #dfe3ea;
        background:#fff;
        color:#111827;
        font-size:11px;
        font-weight:700;
        line-height:1.5;
        word-break:break-all;
        font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .status-chip-wrap{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .status-chip{
        width:auto;
        min-width:150px;
    }

    .save-btn{
        border-radius:10px;
        font-weight:900;
    }

    .d-none{
        display:none !important;
    }

    @media(max-width:991px){
        .fraud-row > [class*="col-"]{
            flex:0 0 100%;
            max-width:100%;
        }
    }

    @media(max-width:575px){
        .card-body{
            padding:12px !important;
        }

        .courier-section{
            padding:16px;
        }

        .courier-title{
            font-size:14px;
        }

        .courier-subtitle{
            font-size:11px;
        }

        .json-input{
            min-height:155px;
            font-size:12px;
        }

        .status-chip{
            width:100%;
            min-width:100%;
        }

        .fraud-code{
            font-size:10.5px;
        }
    }
</style>
@endpush

@push('script')
<script>
(function(){
    "use strict";

    const templates = {
        steadfast: {
            base_url: "https://portal.packzy.com/api/v1",
            credentials: {
                api_key: "YOUR_STEADFAST_API_KEY",
                secret_key: "YOUR_STEADFAST_SECRET_KEY"
            },
            settings: {
                supports_fraud_check: false,
                fraud_checker_enabled: false,
                features: {
                    fraud_check: false,
                    fraud_checker: false
                },
                fraud_provider: "native",
                fraud_courier_name: "steadfast",
                fraud_base_url: "https://portal.packzy.com/api/v1",
                fraud_check_url: "https://portal.packzy.com/api/v1/fraud_check/{phone}"
            },
            fraud_provider: "native",
            fraud_courier_name: "steadfast",
            fraud_base_url: "https://portal.packzy.com/api/v1",
            fraud_check_url: "https://portal.packzy.com/api/v1/fraud_check/{phone}"
        },

        redx: {
            base_url: "https://openapi.redx.com.bd/v1.0.0-beta",
            credentials: {
                access_token: "YOUR_REDX_ACCESS_TOKEN",
                fraudbd_api_key: "YOUR_FRAUDBD_API_KEY"
            },
            settings: {
                pickup_store_id: 1,
                delivery_area_id: 12,
                parcel_weight: 500,
                is_closed_box: "false",
                supports_fraud_check: false,
                fraud_checker_enabled: false,
                features: {
                    fraud_check: false,
                    fraud_checker: false
                },
                fraud_provider: "fraudbd",
                fraud_courier_name: "redx",
                fraud_base_url: "https://fraudbd.com",
                fraud_check_url: ""
            },
            fraud_provider: "fraudbd",
            fraud_courier_name: "redx",
            fraud_base_url: "https://fraudbd.com",
            fraud_check_url: ""
        },

        pathao: {
            base_url: "https://api-hermes.pathao.com",
            credentials: {
                access_token: "YOUR_PATHAO_ACCESS_TOKEN",
                fraudbd_api_key: "YOUR_FRAUDBD_API_KEY"
            },
            settings: {
                store_id: 123,
                delivery_type: 48,
                item_type: 2,
                item_weight: 0.5,
                supports_fraud_check: false,
                fraud_checker_enabled: false,
                features: {
                    fraud_check: false,
                    fraud_checker: false
                },
                fraud_provider: "fraudbd",
                fraud_courier_name: "pathao",
                fraud_base_url: "https://fraudbd.com",
                fraud_check_url: ""
            },
            fraud_provider: "fraudbd",
            fraud_courier_name: "pathao",
            fraud_base_url: "https://fraudbd.com",
            fraud_check_url: ""
        },

        ecourier: {
            base_url: "https://backoffice.ecourier.com.bd/api",
            credentials: {
                api_key: "YOUR_ECOURIER_API_KEY",
                api_secret: "YOUR_ECOURIER_API_SECRET",
                user_id: "YOUR_ECOURIER_USER_ID",
                fraudbd_api_key: "YOUR_FRAUDBD_API_KEY"
            },
            settings: {
                package_code: "BOX",
                parcel_type: "BOX",
                pick_hub: 3,
                pick_address: "Your pickup address",
                supports_fraud_check: false,
                fraud_checker_enabled: false,
                features: {
                    fraud_check: false,
                    fraud_checker: false
                },
                fraud_provider: "fraudbd",
                fraud_courier_name: "ecourier",
                fraud_base_url: "https://fraudbd.com",
                fraud_check_url: ""
            },
            fraud_provider: "fraudbd",
            fraud_courier_name: "ecourier",
            fraud_base_url: "https://fraudbd.com",
            fraud_check_url: ""
        }
    };

    const driverEl = document.getElementById('courierDriver');
    const baseUrlEl = document.getElementById('baseUrl');
    const credentialsEl = document.getElementById('credentialsBox');
    const settingsEl = document.getElementById('settingsBox');

    const fraudProviderEl = document.getElementById('fraudProvider');
    const fraudCourierNameEl = document.getElementById('fraudCourierName');
    const fraudBaseUrlEl = document.getElementById('fraudBaseUrl');
    const fraudCheckUrlEl = document.getElementById('fraudCheckUrl');

    const nativeNote = document.querySelector('.native-note');
    const fraudbdNote = document.querySelector('.fraudbd-note');
    const customNote = document.querySelector('.custom-note');

    function prettyJson(data){
        return JSON.stringify(data || {}, null, 2);
    }

    function setSelectValue(selectEl, value){
        if(!selectEl || !value) return;

        const option = Array.from(selectEl.options).find(function(item){
            return item.value === value;
        });

        if(option){
            selectEl.value = value;
        }
    }

    function currentTemplate(){
        const driver = driverEl ? driverEl.value : '';
        return templates[driver] || null;
    }

    function updateProviderUi(){
        const provider = fraudProviderEl ? fraudProviderEl.value : '';

        if(nativeNote) nativeNote.classList.add('d-none');
        if(fraudbdNote) fraudbdNote.classList.add('d-none');
        if(customNote) customNote.classList.add('d-none');

        if(provider === 'native' && nativeNote){
            nativeNote.classList.remove('d-none');
        }

        if(provider === 'fraudbd' && fraudbdNote){
            fraudbdNote.classList.remove('d-none');
        }

        if(provider === 'custom' && customNote){
            customNote.classList.remove('d-none');
        }

        if(fraudCheckUrlEl){
            fraudCheckUrlEl.readOnly = false;
            fraudCheckUrlEl.placeholder = "https://portal.packzy.com/api/v1/fraud_check/{phone}";
        }

        if(provider === 'fraudbd'){
            if(fraudBaseUrlEl && !fraudBaseUrlEl.value.trim()){
                fraudBaseUrlEl.value = "https://fraudbd.com";
            }

            if(fraudCheckUrlEl && !fraudCheckUrlEl.value.trim()){
                fraudCheckUrlEl.placeholder = "FraudBD হলে খালি রাখুন";
            }
        }

        if(provider === 'native'){
            const template = currentTemplate();

            if(template && fraudBaseUrlEl && !fraudBaseUrlEl.value.trim()){
                fraudBaseUrlEl.value = template.fraud_base_url || template.base_url || '';
            }

            if(template && fraudCheckUrlEl && !fraudCheckUrlEl.value.trim()){
                fraudCheckUrlEl.value = template.fraud_check_url || '';
            }
        }
    }

    function fillTemplate(force = false){
        const driver = driverEl.value;
        const template = templates[driver];

        if(!template){
            if(force){
                baseUrlEl.value = '';
                credentialsEl.value = '';
                settingsEl.value = '';

                if(fraudProviderEl) fraudProviderEl.value = 'fraudbd';
                if(fraudCourierNameEl) fraudCourierNameEl.value = 'all';
                if(fraudBaseUrlEl) fraudBaseUrlEl.value = 'https://fraudbd.com';
                if(fraudCheckUrlEl) fraudCheckUrlEl.value = '';
            }

            updateProviderUi();
            return;
        }

        if(force || !baseUrlEl.value.trim()){
            baseUrlEl.value = template.base_url || '';
        }

        if(force || !credentialsEl.value.trim()){
            credentialsEl.value = prettyJson(template.credentials);
        }

        if(force || !settingsEl.value.trim()){
            settingsEl.value = prettyJson(template.settings);
        }

        if(force || (fraudProviderEl && !fraudProviderEl.value)){
            setSelectValue(fraudProviderEl, template.fraud_provider || 'fraudbd');
        }

        if(force || (fraudCourierNameEl && !fraudCourierNameEl.value)){
            setSelectValue(fraudCourierNameEl, template.fraud_courier_name || driver);
        }

        if(force || (fraudBaseUrlEl && !fraudBaseUrlEl.value.trim())){
            fraudBaseUrlEl.value = template.fraud_base_url || 'https://fraudbd.com';
        }

        if(force || (fraudCheckUrlEl && !fraudCheckUrlEl.value.trim())){
            fraudCheckUrlEl.value = template.fraud_check_url || '';
        }

        updateProviderUi();
    }

    if(driverEl){
        driverEl.addEventListener('change', function(){
            fillTemplate(true);
        });
    }

    if(fraudProviderEl){
        fraudProviderEl.addEventListener('change', function(){
            const provider = fraudProviderEl.value;
            const template = currentTemplate();

            if(provider === 'native' && template){
                if(fraudBaseUrlEl) fraudBaseUrlEl.value = template.fraud_base_url || template.base_url || '';
                if(fraudCheckUrlEl) fraudCheckUrlEl.value = template.fraud_check_url || '';
                if(fraudCourierNameEl) setSelectValue(fraudCourierNameEl, template.fraud_courier_name || driverEl.value);
            }

            if(provider === 'fraudbd'){
                if(fraudBaseUrlEl) fraudBaseUrlEl.value = 'https://fraudbd.com';
                if(fraudCheckUrlEl) fraudCheckUrlEl.value = '';
            }

            if(provider === 'custom'){
                if(fraudCheckUrlEl && !fraudCheckUrlEl.value.trim()){
                    fraudCheckUrlEl.value = '';
                }
            }

            updateProviderUi();
        });
    }

    fillTemplate(false);
    updateProviderUi();
})();
</script>
@endpush