@extends('layouts.app')

@section('content')

{{-- ERRORS --}}
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-4">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- OUTER CARD --}}
<div class="card">

    {{-- Card Header --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3>
            <i class="fa fa-arrow-circle-right"></i>
            Update Supplier
        </h3>
        <a href="{{ route('supplier.index') }}" class="btn btn-danger btn-sm px-4">
            <i class="fa fa-arrow-left me-1"></i> Back
        </a>
    </div>

    {{-- Breadcrumb --}}
    <div class="card-header border-bottom-0 px-4 py-2" style="border-top: 1px solid #f1f1f4;">
        <ul class="breadcrumb fs-7 my-0">
            <li class="breadcrumb-item">
                <a href="{{ route('supplier.index') }}">Home</a>
            </li>
            <li class="breadcrumb-item">Suppliers</li>
            <li class="breadcrumb-item">Edit</li>
        </ul>
    </div>

    {{-- Card Body --}}
    <div class="card-body pt-4">

        <form action="{{ route('supplier.update', $supplier->id) }}" method="POST">
        @csrf
        @method('PUT')

            {{-- Supplier Details --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header">
                    <i class="fa fa-info-circle"></i> Supplier Details
                </div>
                <div class="section-panel__body">
                    <div class="row g-4">

                        <div class="col-md-6">
                            <label class="setting-label">Supplier Name</label>
                            <input type="text" name="supp_name"
                                   class="setting-input"
                                   value="{{ old('supp_name', $supplier->supp_name) }}"
                                   placeholder="Enter supplier name">
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Service Type</label>
                            <select name="supp_type" class="setting-input setting-select">
                                @foreach(['flight' => 'Flight', 'hotel' => 'Hotel', 'transfer' => 'Transfer', 'insurance' => 'Insurance'] as $val => $label)
                                    <option value="{{ $val }}"
                                        {{ old('supp_type', $supplier->supp_type) == $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Supplier Code</label>
                            <input type="text" value="{{ $supplier->supp_code }}"
                                   class="setting-input" readonly>
                            <small class="text-muted">Read-only — assigned at creation</small>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Status</label>
                            <select name="status" class="setting-input setting-select">
                                <option value="1" {{ old('status', $supplier->status) ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ !old('status', $supplier->status) ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>

                    </div>
                </div>
            </div>

            {{-- API Configuration --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header">
                    <i class="fa fa-plug"></i> API Configuration
                    <span class="api-badge">Integration</span>
                </div>
                <div class="section-panel__body">
                    <div class="row g-4">

                        <div class="col-md-12">
                            <label class="setting-label">API URL</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-link input-icon"></i>
                                <input type="text" name="api_url"
                                       class="setting-input setting-input--icon"
                                       value="{{ old('api_url', $supplier->api_url) }}"
                                       placeholder="https://api.supplier.com/endpoint">
                            </div>
                        </div>

                        <div class="col-md-12">
                            <label class="setting-label">Fetch URL</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-globe input-icon"></i>
                                <input type="text" name="fetch_url"
                                       class="setting-input setting-input--icon"
                                       value="{{ old('fetch_url', $supplier->fetch_url) }}"
                                       placeholder="https://api.supplier.com/fetch">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">API Key</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-key input-icon"></i>
                                <input type="text" name="api_key" id="apiKey"
                                       class="setting-input setting-input--icon setting-input--pass"
                                       value="{{ old('api_key', $supplier->api_key) }}"
                                       placeholder="Enter API key">
                                <button type="button" class="pass-toggle" onclick="toggleApiKey()" title="Show/Hide">
                                    <i class="fa fa-eye" id="apiKeyIcon"></i>
                                </button>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">API ID</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-hashtag input-icon"></i>
                                <input type="text" name="api_id"
                                       class="setting-input setting-input--icon"
                                       value="{{ old('api_id', $supplier->api_id ?? '') }}"
                                       placeholder="Enter API ID">
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="fa fa-save me-1"></i> Update Supplier
                </button>
            </div>

        </form>

    </div>{{-- /card-body --}}

</div>{{-- /card --}}


<style>
    /* ---- Card header ---- */
    .card-header h3 {
        font-size: 16px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 8px;
    }

    /* ---- Section panel ---- */
    .section-panel {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        overflow: hidden;
    }
    .section-panel__header {
        display: flex; align-items: center; gap: 8px;
        background: #f8f9fc;
        border-bottom: 1px solid #e9ecef;
        padding: 12px 18px;
        font-size: 13px; font-weight: 600; color: #333;
    }
    .section-panel__header .fa { color: var(--bs-primary); font-size: 14px; }
    .section-panel__body { padding: 20px 18px; }

    /* API badge */
    .api-badge {
        margin-left: auto;
        background: #e3f2fd; color: #1565c0;
        font-size: 11px; font-weight: 700;
        padding: 2px 10px; border-radius: 20px;
        letter-spacing: 0.3px;
    }

    /* ---- Inputs ---- */
    .setting-label {
        display: block; font-size: 13px; font-weight: 600;
        color: #444; margin-bottom: 6px;
    }
    .setting-input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #dee2e6; border-radius: 10px;
        font-size: 14px; outline: none;
        background: #f8f9fc;
        transition: border-color 0.2s, box-shadow 0.2s; color: #333;
    }
    .setting-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
        background: #fff;
    }
    .setting-input[readonly] {
        background: #eef0f4; cursor: not-allowed; color: #888;
    }
    .setting-select { appearance: auto; cursor: pointer; }

    /* Icon inputs */
    .input-icon-wrap { position: relative; }
    .input-icon {
        position: absolute; left: 14px; top: 50%;
        transform: translateY(-50%);
        color: #aaa; font-size: 14px; pointer-events: none;
    }
    .setting-input--icon { padding-left: 38px; }
    .setting-input--pass { padding-right: 42px; }

    /* Password / key toggle */
    .pass-toggle {
        position: absolute; right: 12px; top: 50%;
        transform: translateY(-50%);
        background: none; border: none;
        color: #aaa; cursor: pointer; padding: 0; font-size: 14px;
        transition: color 0.2s;
    }
    .pass-toggle:hover { color: var(--bs-primary); }
</style>

<script>
    function toggleApiKey() {
        var inp  = document.getElementById('apiKey');
        var icon = document.getElementById('apiKeyIcon');
        if (inp.type === 'password') {
            inp.type = 'text';
            icon.classList.replace('fa-eye', 'fa-eye-slash');
        } else {
            inp.type = 'password';
            icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
    }
</script>

@endsection