@extends('backend.layouts.app')
@section('title', $title)
@section('content')

    <x-back-button :route="route('admin.coupons.index')">Back to coupons</x-back-button>

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        {{ $title }}
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.coupons.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="code">Code <span class="text-danger">*</span></label>
                                <input class="form-control @error("code") is-invalid @enderror" type="text" id="code"
                                       name="code" value="{{ old('code') }}" required/>
                                <button type="button" class="btn btn-pink mt-2" onclick="generateCouponCode(6)">
                                    <i class="ri-ai-generate me-1"></i>
                                    Generate coupon
                                </button>
                                @error("code")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="user_usage_limit">User usage limit <span class="text-danger">*</span></label>
                                <input class="form-control @error("user_usage_limit") is-invalid @enderror" type="number" min="1"
                                       id="user_usage_limit" name="user_usage_limit" value="{{ old('user_usage_limit', 1) }}" required/>
                                @error("user_usage_limit")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="profit_percentage">Profit percentage % <small class="text-success">for employees</small> <span class="text-danger">*</span></label>
                                <input class="form-control @error("profit_percentage") is-invalid @enderror" type="number" min="1"
                                       id="profit_percentage" name="profit_percentage" value="{{ old('profit_percentage', 0) }}" required/>
                                @error("profit_percentage")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <input class="form-check-input @error("is_free_shipping") is-invalid @enderror"
                                       type="checkbox" id="is_free_shipping" name="is_free_shipping" value="true"
                                       required @checked((bool)old('is_free_shipping') === true) />
                                <label class="form-check-label" for="is_free_shipping">Free shipping</label>
                                @error("is_free_shipping")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label" for="start_date">Start Date <span class="text-danger">*</span></label>
                                <input class="form-control @error("start_date") is-invalid @enderror" type="date"
                                       id="start_date" name="start_date" value="{{ old('start_date') }}" required/>
                                @error("start_date")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="end_date">End Date <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error("end_date") is-invalid @enderror" type="date"
                                       id="end_date" name="end_date" value="{{ old('end_date') }}" required/>
                                @error("end_date")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3 hideable-free-shipping">
                            <div class="col">
                                <label class="form-label" for="min_value">Min Value <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error("min_value") is-invalid @enderror" type="number"
                                       id="min_value" name="min_value" value="{{ old('min_value') }}" required/>
                                @error("min_value")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="max_value">Max Value <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error("max_value") is-invalid @enderror" type="number"
                                       id="max_value" name="max_value" value="{{ old('max_value') }}" required/>
                                @error("max_value")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3 hideable-free-shipping">
                            <div class="col">
                                <label class="form-label" for="discount">Discount <span
                                        class="text-danger">*</span></label>
                                <input class="form-control @error("discount") is-invalid @enderror" type="number"
                                       id="discount" name="discount" value="{{ old('discount') }}" required/>
                                @error("discount")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="discount_type">Discount Type <span
                                        class="text-danger">*</span></label>
                                <select class="form-select @error("discount_type") is-invalid @enderror"
                                        id="discount_type" name="discount_type" required>
                                    @foreach(App\Enums\CouponDiscountType::getValues() as $key => $value)
                                        <option class="text-capitalize"
                                                value="{{ $value }}" {{ old('discount_type') == $key ? 'selected' : '' }}>{{ $value }}</option>
                                    @endforeach
                                </select>
                                @error("discount_type")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        function generateCouponCode(length) {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let couponCode = '';
            for (let i = 0; i < length; i++) {
                couponCode += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            document.getElementById('code').value = couponCode;
        }
    </script>

    <script>
        if(document.getElementById('is_free_shipping').checked) {
            document.querySelectorAll('.hideable-free-shipping').forEach(function(element) {
                element.classList.add('d-none');
            });
        }
        else {
            document.querySelectorAll('.hideable-free-shipping').forEach(function(element) {
                element.classList.remove('d-none');
            });
        }
    </script>

    <script>
        document.getElementById('is_free_shipping').addEventListener('change', function() {
            if (this.checked) {
                document.getElementById('min_value').value = 0;
                document.getElementById('max_value').value = 0;
                document.getElementById('discount').value = 0;
                document.getElementById('discount_type').value = 'none';
                document.querySelectorAll('.hideable-free-shipping').forEach(function(element) {
                    element.classList.add('d-none');
                });

            } else {
                document.getElementById('min_value').value = "";
                document.getElementById('max_value').value = "";
                document.getElementById('discount').value = "";
                document.getElementById('discount_type').value = 'fixed';
                document.querySelectorAll('.hideable-free-shipping').forEach(function(element) {
                    element.classList.remove('d-none');
                });
            }
        });
    </script>
@endsection