@extends('admin::layouts.app')
@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <form class="form" role="post-data" method="POST" action="/api/admin/offers" redirect="/admin/offers">
                <div class="row titlepad publsih-sticky">
                    <div class="col-md-12">
                        <div class="mt-3 mb-3">
                            <div class="dashbed-border-bottom"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <h4>{{ __('admin.offer') }}</h4>
                                <p class="page-sub-head">{{ __('admin.add_offer') }}</p>
                            </div>
                            <div class="col-md-4 text-sm-right mt-2">
                                <button type="button" class="btn-md px-3 py-2 btn-primary" role="button"
                                    data-request="ajax-submit" data-target="[role=post-data]"><i
                                        class="fa fa-check-square-o"></i> {{ __('admin.submit') }}</button>
                                <a href="javascript:history.back()" class="btn-md px-3 py-2 btn-secondary"><i
                                        class="fa fa-chevron-circle-left"></i> {{ __('static.cancel') }}</a>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8">
                        <div class="tabData mt-4">
                            <h6>{{ __('admin.enter_the_details_below_for_create_offers') }}</h6>
                            <div class="mt-2 mb-2">
                                <div class="dashbed-border-bottom"></div>
                            </div>
                            <div class="pb-4">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{ __('admin.select_workshop') }} <span class="text-red">*</span></label>
                                            <select class="form-control select2" name="workshop_id[]" id="workshop_id" multiple
                                                onchange="multidropdownall('/api/admin/get-services', 'workshop_id','services', '');">
                                                <option value="all">{{__('static.all')}}</option>
                                                @foreach ($branches as $key => $branch)
                                                    <option value="{{ $branch->id }}">{{$locale == App\Helpers\ConstantHelper::ARABIC ? $branch->name_ar : $branch->name_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    @php
                                        $isSuperAdmin = '';
                                        $isSuperAdmin = auth()
                                            ->user()
                                            ->hasRole([App\Helpers\ConstantHelper::SUPER_ADMIN]);
                                    @endphp

                                    <div class="col-md-6" style="display: {{ $isSuperAdmin ? 'none' : 'block' }};">
                                        <div class="form-group">
                                            <label>{{ __('admin.offer_type') }} <span class="text-red">*</span></label>
                                            <select class="form-control selectpicker" name="offer_type" id="offer_type">
                                                <option value="">{{ __('label.Select') }} </option>
                                                @foreach ($offerTypes as $offer)
                                                    <option value="{{ $offer }}"
                                                        {{ $isSuperAdmin && $offer == App\Helpers\ConstantHelper::COUPON ? 'selected' : '' }}>
                                                        {{__('static.'.$offer) }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="promotion"
                                        style="display: {{ $isSuperAdmin ? 'none' : 'block' }};">
                                        <div class="form-group">
                                            <label>{{ __('admin.promotion_name_coupon_code') }} <span
                                                    class="text-red">*</span></label>
                                            <input type="text" name="promotion_name" id="promotion_name"
                                                class="form-control" placeholder="{{ __('placeholder.enter_offer_name') }}" />
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="coupon">
                                        <div class="form-group">
                                            <label>{{ __('admin.promotion_name_coupon_code') }} <span
                                                    class="text-red">*</span></label>
                                            <input type="text" name="coupon_code" id="coupon_code" class="form-control"
                                                placeholder="{{ __('placeholder.enter_offer_name') }}" readonly />
                                            <button class="btn-md px-3 py-2 btn-primary mt-2" onclick="generateCouponCode()"
                                                type="button"
                                                id="generateButton">{{ __('admin.generate_coupon_code') }}</button>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{ __('admin.discount_value') }} ( {{__('static.in') }}) <span
                                                    class="text-red">*</span></label>
                                            <input type="number" name="discount" class="form-control"
                                                placeholder="{{ __('placeholder.enter_discount_value') }}" />
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="usage_type">
                                        <div class="form-group">
                                            <label>{{ __('admin.usage_type') }} <span class="text-red">*</span></label>
                                            <select class="form-control selectpicker" name="usage_type">
                                                <option value="">{{ __('label.Select') }} </option>
                                                @foreach ($usageTypes as $usageType)
                                                    @if ($usageType == App\Helpers\ConstantHelper::UNLIMITED)
                                                        <option value="{{ $usageType }}">{{ __('static.'.$usageType) }}
                                                        </option>
                                                    @else
                                                        <option value="{{ $usageType }}">{{ ucfirst($usageType) }} /
                                                           {{__('static.person')}} </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{ __('admin.start_date') }} <span class="text-red">*</span></label>
                                            <input type="date" class="form-control" name="start_date"
                                                placeholder="{{ __('placeholder.enter_offer_name') }}" />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{ __('admin.end_date') }} <span class="text-red">*</span></label>
                                            <input type="date" class="form-control" name="end_date"
                                                placeholder="Enter Offer Name" />
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>{{ __('admin.select_services') }} <span
                                                    class="text-red">*</span></label>
                                            <select class="form-control select2" name="service_id[]" id="services"
                                                multiple>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h5 class="mb-0">
                                    <button
                                        class="btn btn-link text-black shadow-none pl-0 pb-0 staturightghead">{{ __('admin.status_update') }}</button>
                                </h5>
                            </div>

                            <div class="card-body">
                                <div>
                                    <label class="logCheck mb-3">
                                        <input type="radio" name="status" value="active" checked>
                                        <div>{{ __('admin.active') }}</div>
                                        <span class="checkmark"></span>
                                    </label>

                                    <label class="logCheck mb-0">
                                        <input type="radio" name="status" value="inactive">
                                        <div>{{ __('admin.inactive') }}</div>
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection
@section('script')
    <script>
        //
        $('#workshop_id').on('change', function() {
            var selectedValues = $(this).val();
            if (selectedValues.length > 0) {
                $.each(selectedValues, function(index, value) {
                    if (value == 'all') {
                        $("#workshop_id option[value!='all']").prop('disabled', true);
                    } else if (value != 'all') {
                        $("#workshop_id option[value='all']").prop('disabled', true);
                    } else {
                        $('#workshop_id').prop('disabled', false);
                    }
                });
            } else {
                $("#workshop_id option[value!='all']").prop('disabled', false);
                $("#workshop_id option[value='all']").prop('disabled', false);
            }

        });
        // show hide offer promotion and coupon
        $('#offer_type').on('change', function() {
            var offer_type = $('#offer_type').val();
            $("#coupon_code").val('');
            $("#promotion_name").val('');
            if (offer_type == 'promotion') {
                $("#coupon").hide();
                $("#usage_type").hide();
                $("#promotion").show();
            } else {
                $("#coupon").show();
                $("#usage_type").show();
                $("#promotion").hide();
            }
        });

        //generate coupon code
        function generateCouponCode() {
            const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            let couponCode = "";
            for (let i = 0; i < 10; i++) {
                const randomIndex = Math.floor(Math.random() * charset.length);
                couponCode += charset[randomIndex];
            }
            let coupon = 'QUICK-FIX-' + couponCode;
            $("#coupon_code").val(coupon);
        }

        var branch = $('#branch');
        branch.on('change', function() {
            if (this.selectedIndex) return; //not `Select All`
            branch.find('option:gt(0)').prop('selected', true);
            branch.find('option').eq(0).prop('selected', false);

        });

        var services = $('#services');
        services.on('change', function() {
            if (this.selectedIndex) return; //not `Select All`
            services.find('option:gt(0)').prop('selected', true);
            services.find('option').eq(0).prop('selected', false);

        });
    </script>
@endsection