@extends('dashboard.layout.content')

@section('customTitle')
{{ __('dashboard.wallet_logs.wallet') }}
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/flatpickr.css") }}' rel="stylesheet" type="text/css" />
<link href='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="container">
        <div class="container">
            <div class="row">
                <div id="flStackForm" class="col-12 layout-spacing layout-top-spacing">
                    <div class="statbox widget box box-shadow">
                        <div class="widget-header">
                            <div class="row">
                                <div class="col-12">
                                    <h4>{{ __('dashboard.wallet_logs.wallet') }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content widget-content-area">
                            <form class="uroad-form" action="{{route('dashboard.wallets.store_for_all_users')}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-row mb-4">

                                    <div class="form-group col-md-4">
                                        <label for="title">{{__('dashboard.wallet_logs.title')}}</label>
                                        <input type="text" id="title" class="form-control" name="title" placeholder="{{__('dashboard.wallet_logs.title')}}" value="{{ old('title') }}" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="category">{{__('dashboard.wallet_logs.category')}}</label>
                                        <select class="form-control" id="category" name="category" required>
                                            <option value="charge">{{ __('dashboard.wallet_logs.charge') }}</option>
                                            <option value="offer">{{ __('dashboard.wallet_logs.offer') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="amount">{{__('dashboard.wallet_logs.amount')}}</label>
                                        <input type="number" min="1" id="amount" class="form-control" name="amount" placeholder="{{__('dashboard.wallet_logs.amount')}}" value="{{ old('amount') }}" step="any" required>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="has_expire_date">{{__('dashboard.wallet_logs.has_expire_date')}}</label>
                                        <select class="form-control" id="has_expire_date" name="has_expire_date" required>
                                            <option value="1">{{ __('general.yes') }}</option>
                                            <option value="0" selected>{{ __('general.no') }}</option>
                                        </select>
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="start-date">{{__('dashboard.wallet_logs.start_date')}}</label>
                                        <input type="date" class="form-control basicFlatpickrStartDate flatpickr flatpickr-input" id="start-date" placeholder="{{__('dashboard.wallet_logs.start_date')}}" onchange="MinDateDependsOnStartDate('offer-expiry-date', this)" name="start_date">
                                    </div>

                                    <div class="form-group col-md-4">
                                        <label for="end-date">{{__('dashboard.wallet_logs.end_date')}}</label>
                                        <input type="date" class="form-control offer-expiry-date basicFlatpickr flatpickr flatpickr-input" id="end-date" placeholder="{{__('dashboard.wallet_logs.end_date')}}" name="end_date">
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="note">{{__('dashboard.wallet_logs.note')}}</label>
                                        <textarea id="note" class="form-control" placeholder="{{__('dashboard.wallet_logs.note')}}" name="note">{{ old('note') }}</textarea>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="notification_title">{{__('dashboard.wallet_logs.notification_title')}}</label>
                                        <input type="text" id="notification_title" class="form-control" placeholder="{{__('dashboard.wallet_logs.notification_title')}}" name="notification_title" value="{{ old('notification_title') }}">
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="notification_text">{{__('dashboard.wallet_logs.notification_text')}}</label>
                                        <textarea id="notification_text" class="form-control" placeholder="{{__('dashboard.wallet_logs.notification_text')}}" name="notification_text">{{ old('notification_text') }}</textarea>
                                    </div>

                                    <div class="col-12">
                                        <input type="submit" class="btn btn-primary" value="{{__('general.submit')}}">
                                    </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('customScript')
<script src='{{ asset("company/$locale/plugins/flatpickr/flatpickr.js") }}'></script>
<script src='{{ asset("company/$locale/plugins/flatpickr/custom-flatpickr.js") }}'></script>

<script>
    $('#has_expire_date').attr('selected', function() {
        if($(this).val() == true)
        {
            $('#start-date').prop('disabled', false);
            $('#end-date').prop('disabled', false);
        }else{
            $('#start-date').prop('disabled', true);
            $('#end-date').prop('disabled', true);
        }
    });

    $('#has_expire_date').on('change input', function() {
        if($(this).val() == true)
        {
            $('#start-date').prop('disabled', false);
            $('#end-date').prop('disabled', false);
        }else{
            $('#start-date').prop('disabled', true);
            $('#end-date').prop('disabled', true);
        }
    });

    $("#amount").on("input", function(){

        var amount = $(this).val();
        var category = $('#category').val();
        var end_date = $('#end-date').val();

        if(amount > 0)
        {
            $("#has_expire_date").val("1").change();
            $("#start-date").prop("disabled", false);
            $("#end-date").prop("disabled", false);
            $("#has_expire_date").prop("readonly", true);
            if(category == "charge")
            {
                $("#notification_title").val("تم شحن محفظتك");
                $("#notification_text").val("تم شحن محفظتك بقيمة " + amount + " ريال ");
            }
            if(category == "offer")
            {   
                if($('#end-date').length > 0)
                {
                    $("#notification_title").val("تم شحن محفظتك");
                    $("#notification_text").val("تم شحن محفظتك بقيمة " + amount + " ريال " + "صالحة لغاية " + end_date);
                }else{
                    $("#notification_title").val("تم شحن محفظتك");
                    $("#notification_text").val("تم شحن محفظتك بقيمة " + amount + " ريال ");
                }
            }
        }else{
            $("#start-date").val("");
            $("#end-date").val("");
            $("#has_expire_date").val("0").change();
            $("#start-date").prop("disabled", true);
            $("#end-date").prop("disabled", true);
            $("#has_expire_date").prop("readonly", false);
            $("#notification_title").val("disabled");
            $("#notification_text").val("disabled");
            $("#notification_title").val("خصم من المحفظة");
            $("#notification_text").val("تم خصم مبلغ من محفظتك بقيمة " + amount + " ريال ");
        }
    });
</script>
@endsection