@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>
            Create 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">Create</li>
        </ul>
    </div>

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

        <form action="{{ route('supplier.store') }}" method="POST">
        @csrf

            {{-- 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 <span class="text-danger">*</span></label>
                            <input type="text" name="supp_name" id="supp_name"
                                   class="setting-input"
                                   value="{{ old('supp_name') }}"
                                   placeholder="Enter supplier name" required>
                        </div>

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

                        <div class="col-md-6">
                            <label class="setting-label">Supplier Code</label>
                            <input type="text" id="supp_code_preview"
                                   class="setting-input"
                                   readonly placeholder="Auto Generated">
                            <small class="text-muted">Auto-generated from name &amp; type</small>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="setting-input setting-select">
                                <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ old('status') == '0' ? '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 <span class="text-danger">*</span></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') }}"
                                       placeholder="https://api.supplier.com/endpoint" required>
                            </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"
                                       class="setting-input setting-input--icon"
                                       value="{{ old('api_key') }}"
                                       placeholder="Enter API key">
                            </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') }}"
                                       placeholder="Enter API ID">
                            </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') }}"
                                       placeholder="https://api.supplier.com/fetch">
                            </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> Save 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; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {

    function generateCode() {
        var name = document.getElementById('supp_name').value;
        var type = document.getElementById('supp_type').value;

        if (!name || !type) {
            document.getElementById('supp_code_preview').value = '';
            return;
        }

        var clean    = name.replace(/\s+/g, '').toLowerCase();
        var shortName = clean.substring(0, 10);
        document.getElementById('supp_code_preview').value = shortName + '_' + type;
    }

    document.getElementById('supp_name').addEventListener('input', generateCode);
    document.getElementById('supp_type').addEventListener('change', generateCode);
});
</script>

@endsection