@extends('layouts.app')

@section('title', 'Thêm API')
@section('page_title', 'Thêm API')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Trang chủ</a></li>
    <li class="breadcrumb-item"><a href="{{ route('apis.index') }}">API</a></li>
    <li class="breadcrumb-item active">Thêm</li>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-8">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Thông tin API</h3>
                </div>
                <form action="{{ route('apis.store') }}" method="POST">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="server_id">IP (server) <span class="text-danger">*</span></label>
                            <select name="server_id" id="server_id"
                                    class="form-control @error('server_id') is-invalid @enderror">
                                <option value="">-- Chọn IP --</option>
                                @foreach ($servers as $s)
                                    <option value="{{ $s->id }}" data-ip="{{ $s->ip_address }}"
                                            {{ (string) old('server_id') === (string) $s->id ? 'selected' : '' }}>
                                        {{ $s->domain?->name }} — {{ $s->ip_address }}
                                    </option>
                                @endforeach
                            </select>
                            @error('server_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            @if ($servers->isEmpty())
                                <small class="form-text text-warning">
                                    Chưa có IP nào.
                                    <a href="{{ route('servers.create') }}">Thêm IP mới</a> trước khi thêm API.
                                </small>
                            @endif
                        </div>

                        <div class="form-row">
                            <div class="col-md-8 form-group">
                                <label for="url">URL <span class="text-danger">*</span></label>
                                <input type="text" name="url" id="url"
                                       value="{{ old('url') }}"
                                       class="form-control @error('url') is-invalid @enderror"
                                       placeholder="https://66.175.223.81/health">
                                @error('url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-4 form-group">
                                <label for="method">Phương thức <span class="text-danger">*</span></label>
                                <select name="method" id="method"
                                        class="form-control @error('method') is-invalid @enderror">
                                    @foreach (['GET', 'POST', 'PUT', 'PATCH', 'DELETE'] as $m)
                                        <option value="{{ $m }}" {{ old('method', 'GET') === $m ? 'selected' : '' }}>{{ $m }}</option>
                                    @endforeach
                                </select>
                                @error('method') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="header">Header</label>
                            <textarea name="header" id="header" rows="3"
                                      class="form-control @error('header') is-invalid @enderror"
                                      placeholder='{"Authorization": "Bearer ...", "Content-Type": "application/json"}'>{{ old('header') }}</textarea>
                            @error('header') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="form-group">
                            <label for="payload">Payload (body)</label>
                            <textarea name="payload" id="payload" rows="4"
                                      class="form-control @error('payload') is-invalid @enderror"
                                      placeholder='{"key": "value"}'>{{ old('payload') }}</textarea>
                            @error('payload') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="form-group">
                            <label for="param">Param (query string)</label>
                            <textarea name="param" id="param" rows="2"
                                      class="form-control @error('param') is-invalid @enderror"
                                      placeholder="page=1&limit=20">{{ old('param') }}</textarea>
                            @error('param') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        @php
                            $oldSuccess = old('success_status', []);
                            $successStr = is_array($oldSuccess) ? implode(', ', $oldSuccess) : $oldSuccess;
                        @endphp

                        <div class="form-group">
                            <label for="success_status">Success status <span class="text-danger">*</span></label>
                            <input type="text" name="success_status" id="success_status"
                                   value="{{ $successStr }}"
                                   class="form-control @error('success_status') is-invalid @enderror @error('success_status.*') is-invalid @enderror"
                                   placeholder="200, 201, 204">
                            <small class="form-text text-muted">
                                Các mã HTTP coi là thành công, cách nhau bằng dấu phẩy.
                                Mã trả về khác (hoặc kết nối thất bại) sẽ bị tính là lỗi và gửi Telegram.
                            </small>
                            @error('success_status') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            @foreach ($errors->get('success_status.*') as $msgs)
                                @foreach ($msgs as $msg)
                                    <div class="invalid-feedback d-block">{{ $msg }}</div>
                                @endforeach
                            @endforeach
                        </div>

                        <div class="form-group">
                            <label class="d-block">Trạng thái</label>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" name="status" value="1" id="status"
                                       class="custom-control-input"
                                       {{ old('status', true) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="status">Kích hoạt (Active)</label>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary" {{ $servers->isEmpty() ? 'disabled' : '' }}>
                            <i class="fas fa-save"></i> Lưu
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            var serverSelect = document.getElementById('server_id');
            var urlInput = document.getElementById('url');
            if (!serverSelect || !urlInput) return;

            serverSelect.addEventListener('change', function () {
                var option = serverSelect.options[serverSelect.selectedIndex];
                var ip = option ? option.dataset.ip : '';
                if (ip) {
                    urlInput.value = 'https://' + ip;
                }
            });
        })();
    </script>
@endpush