@extends('layouts.admin.app')

@section('title', translate('Add new coupon'))

@push('css_or_js')

@endpush

@section('content')
    <div class="content container-fluid">
        <!-- Page Header -->
        <div class="d-flex flex-wrap gap-2 align-items-center mb-4">
            <h2 class="h1 mb-0 d-flex align-items-center gap-2">
                <img width="20" class="avatar-img" src="{{asset('assets/admin/img/icons/coupon.png')}}" alt="">
                <span class="page-header-title">
                    {{translate('Add_New_Coupon')}}
                </span>
            </h2>
        </div>
        <!-- End Page Header -->

        <div class="row g-2">
            <div class="col-12">
                <form action="{{route('admin.coupon.store')}}" method="post">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <div class="row">

                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label class="input-label">{{translate('Coupon_Title')}}</label>
                                        <input type="text" name="title" class="form-control" placeholder="{{ translate('New coupon') }}" required maxlength="100">
                                    </div>
                                </div>
                                {{-- <div class="col-md-4 col-sm-6">
                                    <div class="form-group">
                                        <div class="d-flex justify-content-between">
                                            <label class="input-label">{{translate('Coupon_Code')}}</label>
                                            <a href="javascript:void(0)" class="float-right c1 fz-12" onclick="generateCode()">{{translate('generate_code')}}</a>
                                        </div>
                                        <input type="text" name="code" id="coupon-code" class="form-control" maxlength="15"
                                            placeholder="{{\Illuminate\Support\Str::random(8)}}" required>
                                    </div>
                                </div> --}}
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label class="input-label">{{translate('Price Per Coupon')}} </label>
                                        <input type="number" name="price" id="coupon-price" class="form-control" placeholder="{{ translate('BHD: 2') }}" required min="1">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label class="input-label">{{translate('Coupon Quantity')}} </label>
                                        <input type="number" name="quantity" id="coupon-quantity" class="form-control" placeholder="{{ translate('Coupon Quantity') }}" required min="1">
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="form-group">
                                        <label class="input-label">{{translate('Offer Quantity')}} </label>
                                        <input type="number" name="offer_quantity" id="coupon-offer-quantity" class="form-control" placeholder="{{translate('Offer Quantity')}} " >
                                    </div>
                                </div>
                                {{-- <div class="col-md-4 col-sm-4">
                                    <div class="form-group">
                                        <label class="input-label">{{translate('coupon')}} {{translate('user')}}</label>
                                        <select name="user_id" class="form-control" id="select_user">
                                            <option selected disabled>---{{translate('select')}}---</option>
                                            @foreach ($users as $user)
                                            <option value="{{$user->id}}">{{ Str::limit($user->f_name, 40)}} {{ Str::limit($user->l_name, 40)}} - {{ Str::limit($user->phone)}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div> --}}


                            </div>
                            <div class="d-flex justify-content-end gap-3">
                                <button type="reset" class="btn btn-secondary">{{translate('reset')}}</button>
                                <button type="submit" class="btn btn-primary">{{translate('submit')}}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-top px-card pt-4">
                        <div class="row justify-content-between align-items-center gy-2">
                            <div class="col-sm-4 col-md-6 col-lg-8">
                                <h5 class="d-flex align-items-center gap-2 mb-0">
                                    {{translate('Coupon_Table')}}
                                    <span class="badge badge-soft-dark rounded-50 fz-12">{{ $coupons->total() }}</span>
                                </h5>
                            </div>
                            <div class="col-sm-8 col-md-6 col-lg-4">
                                <form action="{{url()->current()}}" class="mb-0" method="GET">
                                    <div class="input-group">
                                        <input id="datatableSearch_" type="search" name="search" class="form-control" placeholder="{{translate('Search by Title')}}" aria-label="Search" value="{{$search}}" required="" autocomplete="off">
                                        <div class="input-group-append">
                                            <button type="submit" class="btn btn-primary">
                                                {{translate('Search')}}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="py-4">
                        <div class="table-responsive datatable-custom">
                            <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th>{{translate('SL')}}</th>
                                        <th>{{translate('Coupon')}}</th>
                                        <th>{{translate('Total Actual Coupons')}}</th>

                                        <th>{{translate('Price Per Coupon')}}</th>
                                        <th>{{translate('Get Free Coupons')}}</th>
                                        <th>{{translate('Total Coupons')}}</th>

                                        <th>{{translate('status')}}</th>
                                        <th class="text-center">{{translate('action')}}</th>
                                    </tr>
                                </thead>

                                <tbody>
                                @foreach($coupons as $key=>$coupon)
                                    <tr>
                                        <td>{{$coupons->firstItem()+$key}}</td>
                                        <td>
                                            <div>
                                                <div class="max-w300 text-wrap fz-12 mt-1">{{$coupon['title']}}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <div class="fz-14"><strong>{{$coupon['quantity']}} </strong></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <div class="fz-14"><strong>{{$coupon['price']}} BHD</strong></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <div class="fz-14"><strong>{{$coupon['offer_quantity']}} </strong></div>
                                            </div>
                                        </td>
                                        <td>
                                            @php
                                            $total = 0;
                                                $total =$coupon['quantity']+ $coupon['offer_quantity'];
                                            @endphp
                                            <div>
                                                <div class="fz-14"><strong>{{$total }} </strong></div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="">
                                                <label class="switcher">
                                                    <input class="switcher_input" type="checkbox" {{$coupon['status']->value == App\Enums\CouponStatus::ACTIVE->value ? 'checked' : ''}} id="{{$coupon['id']}}"
                                                    onchange="status_change(this)" data-url="{{route('admin.coupon.status',[$coupon['id'],1])}}"
                                                    >
                                                    <span class="switcher_control"></span>
                                                </label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex justify-content-center gap-2">

                                                <a class="btn btn-outline-info btn-sm edit square-btn"
                                                href="{{route('admin.coupon.update',[$coupon['id']])}}"><i class="tio-edit"></i></a>
                                                <button type="button" class="btn btn-outline-danger btn-sm delete square-btn"
                                                onclick="form_alert('coupon-{{$coupon['id']}}','{{translate('Want to delete this coupon ?')}}')"><i class="tio-delete"></i></button>
                                            </div>
                                            <form action="{{route('admin.coupon.delete',[$coupon['id']])}}"
                                                method="post" id="coupon-{{$coupon['id']}}">
                                                @csrf @method('delete')
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="table-responsive mt-4 px-3">
                            <div class="d-flex justify-content-lg-end">
                                <!-- Pagination -->
                                {!! $coupons->links() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection

@push('script_2')
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

    <script>
        $(document).on('ready', function () {
            // INITIALIZATION OF FLATPICKR
            // =======================================================
            $('.js-flatpickr').each(function () {
                $.HSCore.components.HSFlatpickr.init($(this));
            });

            $('.js-select2-custom').each(function () {
        var select2 = $.HSCore.components.HSSelect2.init($(this));
    });
        });


    </script>

<script>
    //Select 2
    $("#select_user").select2({
        placeholder: "Select User",
        allowClear: true
    });

</script>
    <script>
        function generateCode() {
            $.get('{{route('admin.coupon.generate-coupon-code')}}', function (data) {
                $('#coupon-code').val(data)
            });
        }

    </script>

    <script>

        function modalShow(t) {
            let couponId = t.id;
            let targetUrl = "{{route('admin.coupon.coupon-details')}}" + "?id=" + couponId;
            $.ajax({
                url: targetUrl,
                type: 'GET',
                dataType: 'json', // added data type
                beforeSend: function () {
                    $('#loading').show();
                },
                success: function (data) {
                    // console.log("success...");
                    console.log(data.view);


                    $('.coupon__details').html(data.view);
                    $('#couponDetails').modal('show');
                },
                complete: function () {
                    $('#loading').hide();
                },
            });
        }
    </script>
@endpush