@extends('admin.layout.app')

@section('title', 'Danh mục')

@section('content')
    <div class="container-fluid {{Auth::check() && Auth::user()->is_layout_two == 1 ?  "mt-2 p-0" : ""}}">

        <!-- Page Heading -->
        {{-- <h1 class="h3 mb-2 text-gray-800">Danh mục app</h1> --}}
        <!-- DataTales Example -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary ">Thêm mới google_ads</h6>
                <a class="btn btn-primary btn-user" href="{{ route('google.ads.report.index') }}">Quay lại</a>
            </div>

            <div class="card-body">
                <form id="addProductForm" method="POST" action="{{ route('google.ads.report.store') }}">
                    @csrf
                    <div class="mb-4">
                        <label for="status" class="form-label required">
                            <i class="bi bi-bell me-1"></i>
                            Google ads
                        </label>
                        <select class="form-control" id="google_ads_id" name="google_ads_id" required>
                            <option value="">Chọn Google ads</option>
                            @foreach ($googleAds as $item)
                                <option value="{{ $item->id }}">{{ $item->google_ads_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-4">
                        <input type="hidden" name="campaign_value" id="campaign_value">
                        <input type="hidden" name="campaign_text" id="campaign_text">
                        <label for="status" class="form-label required">
                            <i class="bi bi-bell me-1"></i>
                            Campaign
                        </label>
                        <select class="form-control" id="mySelect" name="campaign_name" required>
                            <option value="">Chọn Campaign</option>
                            @foreach ($apps as $app)
                                <option value="{{ $app->id }}">{{ $app->google_ads_name }}</option>
                            @endforeach
                        </select>

                    </div>
                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Currency code
                        </label>
                        <input type="text" class="form-control" id="productName" name="currency_code"
                            placeholder="Currency code" required value="{{ old('currency_code') }}">
                    </div>

                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Currency code
                        </label>
                        <input type="text" class="form-control" id="productName" name="currency_code"
                            placeholder="Currency code" required value="{{ old('currency_code') }}">
                        <div class="form-text">Ví dụ: USD, JPY, VND...</div>
                    </div>
                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Cost
                        </label>
                        <input type="text" class="form-control" id="productName" name="cost" placeholder="Cost"
                            required value="{{ old('cost') }}">
                        <div class="invalid-feedback">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Conversions
                        </label>
                        <input type="text" class="form-control" id="productName" name="conversions"
                            placeholder="Conversions" required>
                        <div class="invalid-feedback">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Cost/conv.
                        </label>
                        <input type="text" class="form-control" id="productName" name="cost_per_conversion"
                            placeholder="Cost/conv." required>
                        <div class="invalid-feedback">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="productName" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            All conv. value/cost.
                        </label>
                        <input type="text" class="form-control" id="productName" name="conv_value_per_cost"
                            placeholder="All conv. value/cost." required>
                        <div class="invalid-feedback">
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-plus-lg me-1"></i>
                            Lưu
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection
<style scoped>
    .currency_code_warning {
        font-size: 13px;
        color: gray;
    }
</style>
@push('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#mySelect').select2({
                tags: true, // Cho phép nhập thêm
                placeholder: "-- Chọn hoặc nhập --",
                allowClear: true
            });
            $('#addProductForm').on('submit', function() {
                let val = $('#mySelect').val(); // id hoặc text
                let text = $('#mySelect').find("option:selected").text(); // luôn là text

                $('#campaign_value').val(val);
                $('#campaign_text').val(text);
            });
        });
    </script>
@endpush