@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 ">Chỉnh sửa 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.update', ['id' => $GoogleAdsReport->id]) }}">
                    @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 }}"
                                    {{ $GoogleAdsReport->google_ads_id == $item->id ? 'selected' : '' }}>
                                    {{ $item->google_ads_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="status" class="form-label required">
                            <i class="bi bi-bell me-1"></i>
                            Campaign
                        </label>
                         <input type="text" class="form-control" id="campaign_name" name="campaign_name"
                            placeholder="Campaign" required value="{{ $GoogleAdsReport->campaign_name }}">
                    </div>


                    <div class="mb-3">
                        <label for="currency_code" class="form-label required">
                            <i class="bi bi-box me-1"></i>
                            Currency code
                        </label>
                        <input type="text" class="form-control" id="currency_code" name="currency_code"
                            placeholder="Currency code" required value="{{ $GoogleAdsReport->currency_code }}">
                        <div class="form-text">Ví dụ: USD, JPY, VND...</div>
                        <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
                        </label>
                        <input type="text" class="form-control" id="productName" name="cost"
                            value="{{ $GoogleAdsReport->cost }}" placeholder="Cost" 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>
                            Conversions
                        </label>
                        <input type="text" class="form-control" value="{{ $GoogleAdsReport->conversions }}"
                            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"
                            value="{{ $GoogleAdsReport->cost_per_conversion }}"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" value="{{ $GoogleAdsReport->conv_value_per_cost }}"
                            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
@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,
                placeholder: "-- Chọn hoặc nhập --",
                allowClear: true
            });

            // Nếu campaign_name cũ không có trong list thì thêm mới
            let defaultText = "{{ $GoogleAdsReport->campaign_name ?? '' }}";
            if (defaultText && $("#mySelect option[value='" + defaultText + "']").length === 0) {
                let newOption = new Option(defaultText, defaultText, true, true);
                $('#mySelect').append(newOption).trigger('change');
            } else {
                $('#mySelect').val(defaultText).trigger('change');
            }
        });
    </script>
@endpush

<style scoped>
    .currency_code_warning {
        font-size: 13px;
        color: gray;
    }
</style>