@extends('backEnd.layouts.master')
@section('title', 'Courier Settings')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-truck me-2 text-success"></i>Courier API Settings</h4>
    </div>
</div>

<form action="{{ route('admin.settings.courier.update') }}" method="POST">
    @csrf
    <div class="row g-4">
        {{-- Steadfast --}}
        <div class="col-md-6">
            <div class="admin-card">
                <div class="admin-card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-shipping-fast me-2"></i>Steadfast Courier</h5>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="steadfast_status" value="1"
                               {{ isset($couriers['steadfast']) && $couriers['steadfast']->status ? 'checked' : '' }}>
                    </div>
                </div>
                <div class="admin-card-body">
                    <div class="mb-3">
                        <label class="form-label">API Key</label>
                        <input type="text" name="steadfast_api_key" class="form-control font-monospace"
                               value="{{ $couriers['steadfast']->api_key ?? '' }}"
                               placeholder="Steadfast API Key">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Secret Key</label>
                        <input type="password" name="steadfast_secret_key" class="form-control font-monospace"
                               value="{{ $couriers['steadfast']->secret_key ?? '' }}"
                               placeholder="Steadfast Secret Key">
                    </div>
                    <div class="alert alert-info p-2 small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Steadfast: <a href="https://steadfast.com.bd" target="_blank">steadfast.com.bd</a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Pathao --}}
        <div class="col-md-6">
            <div class="admin-card">
                <div class="admin-card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-motorcycle me-2"></i>Pathao Courier</h5>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="pathao_status" value="1"
                               {{ isset($couriers['pathao']) && $couriers['pathao']->status ? 'checked' : '' }}>
                    </div>
                </div>
                <div class="admin-card-body">
                    <div class="mb-3">
                        <label class="form-label">Client ID</label>
                        <input type="text" name="pathao_api_key" class="form-control font-monospace"
                               value="{{ $couriers['pathao']->api_key ?? '' }}"
                               placeholder="Pathao Client ID">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Client Secret</label>
                        <input type="password" name="pathao_secret_key" class="form-control font-monospace"
                               value="{{ $couriers['pathao']->secret_key ?? '' }}"
                               placeholder="Pathao Client Secret">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Store ID</label>
                        <input type="text" name="pathao_store_id" class="form-control"
                               value="{{ $couriers['pathao']->store_id ?? '' }}"
                               placeholder="Pathao Store ID">
                    </div>
                    <div class="alert alert-info p-2 small mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Pathao: <a href="https://pathao.com" target="_blank">pathao.com</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Manual Couriers --}}
    <div class="admin-card mt-4">
        <div class="admin-card-header d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
                <h5 class="mb-0"><i class="fas fa-list me-2"></i>Manual Courier Names</h5>
                <div class="form-check form-switch mb-0">
                    <input class="form-check-input" type="checkbox" name="manual_status" value="1"
                           {{ ($couriers['manual']->status ?? true) ? 'checked' : '' }}>
                    <label class="form-check-label small">Manual Book ON/OFF</label>
                </div>
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary" id="addManualCourierRow">
                <i class="fas fa-plus me-1"></i> Add Courier
            </button>
        </div>
        <div class="admin-card-body">
            <p class="text-muted small">এক বা একাধিক courier name add করুন। Booking → Manual Book dropdown-এ দেখাবে।</p>
            <div id="manualCourierRows" class="d-flex flex-column gap-2">
                @forelse($manualCouriers as $i => $mc)
                <div class="manual-courier-row d-flex gap-2 align-items-center border rounded p-2">
                    <input type="hidden" name="manual_couriers[{{ $i }}][id]" value="{{ $mc->id }}">
                    <input type="text" name="manual_couriers[{{ $i }}][name]" class="form-control form-control-sm"
                           value="{{ $mc->name }}" placeholder="Courier name" required>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="manual_couriers[{{ $i }}][status]" value="1"
                               {{ $mc->status ? 'checked' : '' }}>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-manual-courier"><i class="fas fa-trash"></i></button>
                </div>
                @empty
                <div class="manual-courier-row d-flex gap-2 align-items-center border rounded p-2">
                    <input type="text" name="manual_couriers[0][name]" class="form-control form-control-sm" placeholder="Courier name">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" name="manual_couriers[0][status]" value="1" checked>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-manual-courier"><i class="fas fa-trash"></i></button>
                </div>
                @endforelse
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i>Save Courier Settings
        </button>
    </div>
</form>
@endsection

@push('scripts')
<script>
let manualCourierIndex = {{ max($manualCouriers->count(), 1) }};
document.getElementById('addManualCourierRow')?.addEventListener('click', function () {
    const wrap = document.getElementById('manualCourierRows');
    const row = document.createElement('div');
    row.className = 'manual-courier-row d-flex gap-2 align-items-center border rounded p-2';
    row.innerHTML = `
        <input type="text" name="manual_couriers[${manualCourierIndex}][name]" class="form-control form-control-sm" placeholder="Courier name" required>
        <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" name="manual_couriers[${manualCourierIndex}][status]" value="1" checked>
        </div>
        <button type="button" class="btn btn-sm btn-outline-danger remove-manual-courier"><i class="fas fa-trash"></i></button>`;
    wrap.appendChild(row);
    manualCourierIndex++;
});
document.getElementById('manualCourierRows')?.addEventListener('click', function (e) {
    const btn = e.target.closest('.remove-manual-courier');
    if (!btn) return;
    const rows = this.querySelectorAll('.manual-courier-row');
    if (rows.length <= 1) {
        btn.closest('.manual-courier-row').querySelector('input[type=text]').value = '';
        return;
    }
    btn.closest('.manual-courier-row').remove();
});
</script>
@endpush