@extends('layouts.layout')
@section('title', 'Voucher Code')
@include('scripts.setting_terms_script')
@include('scripts.settings')

@section('content')
    @include('settings.setting_sidebar')
    <div class="tab-content-wrap">
        <div class="tab-pane" id="setVoucher">
            <div class="pb-4">
                <h3 class="pb-3">Voucher Code</h3>
                <h4>Add New Voucher Code</h4>
            </div>
            <form action="{{ url('/setting/store-voucher-code') }}" method="post" id="add-voucher-code">
                @csrf
                <div class="custom-form-inner">
                    <div class="custom-form-column">
                        <div class="form-wrap  style-input">
                            <label for="name" class="style-label">Name*</label>
                            <input type="text" class="form-control" name="name" id="name" value="">
                        </div>
                        <div class="form-wrap style-input">
                            <label for="description" class="style-label">Description*</label>
                            <input type="text" class="form-control" name="description" id="description" value="">
                        </div>
                        @if (Auth::user()->role_id == 1)
                            <div class="form-wrap style-input">
                                <label for="voucher_type" class="style-label with-value">Voucher Type*</label>
                                <select class="form-select" onchange="select_voucher_type(this.value)" name="voucher_type" id="voucher_type">
                                    <option value="">Select Option</option>
                                    <option value="Class">Class</option>
                                    <option value="Product">Product</option>
                                    <option value="Both">Both</option>
                                </select>
                            </div>
                        @else
                            <input type="hidden" name="voucher_type" id="voucher_type" value="Class" />
                        @endif

                        <div class="form-wrap style-input">
                            <label for="discount_type" class="style-label with-value ">Discount Type*</label>
                            <select name="discount_type" id="discount_type" class="form-select">
                                <option value="">Discount Type</option>
                                <option value="Amount">Amount(£)</option>
                                <option value="Percentage">Percentage(%)</option>
                            </select>

                        </div>
                        <div class="form-wrap style-input currency-input showhideinputclass">
                            <div class="currency-text signhideshow">£</div>
                            <label for="discount_amount"
                                class="style-label @if (old('discount_amount')) with-value @endif">Discount <span
                                    class="discountamounthideshow">Amount</span>*</label>
                            <input type="text" class="form-control" name="discount_amount" id="discount_amount"
                                value="">
                        </div>
                        <div class="form-wrap style-input currency-input">
                            <div class="currency-text">£</div>
                            <label for="maximum_discount" class="style-label">Maximum Discount (£)</label>
                            <input type="text" class="form-control maximum_discount" name="maximum_discount"
                                id="maximum_discount" value="">
                        </div>
                        <div class="form-wrap style-input">
                            <label for="number_of_users" class="style-label">No of uses</label>
                            <input type="text" class="form-control" name="number_of_users" id="number_of_users"
                                value="">

                        </div>
                    </div>
                    <div class="custom-form-column">
                        <div class="form-wrap datepicker date input-group style-input">
                            <label for="valid_from" class="style-label">Valid From</label>
                            <input type="text" class="form-control datepicker-custom" id="valid_from"
                                name="valid_from" />
                            <div class="input-group-append">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                        </div>

                        <div class="form-wrap datepicker date input-group style-input">
                            <label for="valid_to" class="style-label">Valid To</label>
                            <input type="text" class="form-control datepicker-custom" id="valid_to" name="valid_to" />
                            <div class="input-group-append">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                        </div>
                        <div class="form-wrap style-input">
                            <label for="voucher_status" class="style-label with-value">Status*</label>
                            <select name="voucher_status" id="voucher_status" class="form-select">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

                        @if (Auth::user()->role_id == 1)
                            <div class="form-wrap select_all_franchise d-none">
                                <label for="" class="custom-switch-label mb-0">Use for all franchise</label>
                                <div class="switch-field">
                                    <input type="radio" onchange="select_all_franchise('yes')" name="use_for_all_franchise" id="use_for_all_franchise_yes" value="yes" checked />
                                    <label for="use_for_all_franchise_yes">Yes</label>
                                    <input type="radio" onchange="select_all_franchise('no')" name="use_for_all_franchise" id="use_for_all_franchise_no" value="no" />
                                    <label for="use_for_all_franchise_no">No</label>
                                </div>
                            </div>
                        @else
                            <input type="hidden" name="use_for_all_franchise" value="no" />
                        @endif

                        @if (!empty($franchise_id))
                            <input type="hidden" name="franchise_id" value="{{$franchise_id}}" />
                        @else

                            <div class="form-wrap style-input franchise_list d-none">
                                <label for="franchise_id" class="style-label with-value">Select Franchises*</label>
                                <select class="form-select" name="franchise_id" id="franchise_id">
                                    @foreach ($franchisesData as $franchisesItem)
                                        <option value="{{ $franchisesItem['id'] }}">{{ $franchisesItem['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif


                    </div>
                </div>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn">Save Code</button>
                </div>
            </form>
            <div class="custom-hr my-4"></div>
            <h4 class="mb-4">Existing Voucher Codes</h4>
            <div class="table-custom-wrap">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Franchise Name</th>
                            <th>Voucher Type</th>
                            <th>Discount Type</th>
                            <th>Discount</th>
                            <th>Valid From</th>
                            <th>Valid Until</th>
                            <th>No. Uses</th>
                            <th>Created By</th>
                            <th>Updated By</th>
                            <th width="40px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- @if (!empty($setting_voucher_code))
                            @foreach ($setting_voucher_code as $value)
    <tr>
                                <td>{{ $value['name'] }}</td>
                                <td>{{ $value['voucher_type'] }}</td>
                                <td>{{ $value['discount_amount'] }}</td>
                                <td>{{ date('d/m/20y', strtotime($value['valid_from'])) }}</td>
                                <td>{{ date('d/m/20y', strtotime($value['valid_to'])) }}</td>
                                <td>{{ $value['number_of_users'] }}</td>
                                <td>
                                    <div class="link-btn-group">
                                        <button type="button" class="btn" onclick="vouchercodeEditFunction()"><i class="fas fa-edit"></i></button>
                                        <button type="button" class="btn" onclick="vouchercodeDeleteFunction()"><i class="fas fa-trash-alt"></i></button>
                                    </div>
                                </td>
                            </tr>
    @endforeach
                            @endif -->
                    </tbody>
                </table>
                <div class="modal fade bg-model small-modal show" id="edit_voucher_code" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3 class="modal-title" id="exampleModalLabel">Edit Voucher Code</h3>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <!-- {{ url('admin/staff/update') }} -->
                            <div class="modal-body">

                                <form action="{{ url('/setting/update-voucher-code') }}" method="post"
                                    id="edit-voucher-code">
                                    @csrf
                                    <div class="custom-form-inner">
                                        <div class="custom-form-column">
                                            <div class="form-wrap style-input">
                                                <label for="name" class="style-label with-value">Name*</label>
                                                <input type="hidden" class="form-control" name="id"
                                                    id="id">
                                                <input type="text" class="form-control" name="name"
                                                    id="name">
                                            </div>
                                            <div class="form-wrap style-input">
                                                <label for="description"
                                                    class="style-label with-value">Description*</label>
                                                <input type="text" class="form-control" name="description"
                                                    id="description">
                                            </div>
                                            <!-- <div class="form-wrap style-input">
                                                    <label for="valid_from_second" class="style-label with-value">Valid From</label>
                                                    <input type="text" class="form-control" name="valid_from" id="valid_from_second">
                                                </div> -->
                                            {{-- <div class="form-wrap style-input">
                                                <label for="voucher_type" class="style-label with-value">Voucher
                                                    Type*</label>
                                                <select class="form-select" name="voucher_type" id="voucher_type">
                                                    <option value="Class">Class</option>
                                                    <option value="Product">Product</option>
                                                    <option value="Both">Both</option>
                                                </select>
                                            </div> --}}

                                            @if (Auth::user()->role_id == 1)
                                                <div class="form-wrap style-input">
                                                    <label for="voucher_type" class="style-label with-value">Voucher Type*</label>
                                                    <select class="form-select" name="voucher_type" id="voucher_type">
                                                        <option value="">Select Option</option>
                                                        <option value="Class">Class</option>
                                                        <option value="Product">Product</option>
                                                        <option value="Both">Both</option>
                                                    </select>
                                                </div>
                                            @else
                                                <input type="hidden" name="voucher_type" id="voucher_type" value="Class" />
                                            @endif

                                            <div class="form-wrap style-input">
                                                <label for="discount_type" class="style-label with-value">Discount
                                                    Type*</label>
                                                <select name="discount_type" id="edit_discount_type" class="form-select">
                                                    <option value="Amount">Amount(£)</option>
                                                    <option value="Percentage">Percentage(%)</option>

                                                </select>
                                            </div>
                                            <div class="form-wrap style-input currency-input">
                                                <div class="currency-text">£</div>
                                                <label for="discount_amount" class="style-label with-value">Discount
                                                    Amount*</label>
                                                <input type="text" class="form-control" name="discount_amount"
                                                    id="discount_amount">
                                            </div>
                                            <div class="form-wrap form-wrap-custom currency-input">
                                                <div class="currency-text">£</div>

                                                <input type="text" placeholder=" "
                                                    class="form-control edit_maximum_discount" name="maximum_discount"
                                                    id="maximum_discount" pattern="^[0-9]$"
                                                    title="Please Enter only number">
                                                <label for="maximum_discount">Maximum Discount (£)</label>
                                            </div>
                                            <div class="form-wrap form-wrap-custom">
                                                <input type="text" placeholder=" " class="form-control"
                                                    name="number_of_users" id="number_of_users">
                                                <label for="number_of_users">No of uses</label>
                                            </div>
                                        </div>
                                        <div class="custom-form-column">
                                            <div class="form-wrap datepicker date input-group form-wrap-custom">
                                                <input type="text"
                                                    class="form-control datepicker-custom" id="valid_from_second"
                                                    name="valid_from" />
                                                <label for="valid_from_second">Valid From</label>
                                                <div class="input-group-append">
                                                    <i class="fas fa-calendar-alt"></i>
                                                </div>
                                            </div>

                                            <div class="form-wrap datepicker date input-group form-wrap-custom">

                                                <input type="text" placeholder=" "
                                                    class="form-control datepicker-custom" id="valid_to_second"
                                                    name="valid_to" />
                                                <label for="valid_to">Valid To</label>
                                                <div class="input-group-append">
                                                    <i class="fas fa-calendar-alt"></i>
                                                </div>
                                            </div>
                                            <div class="form-wrap style-input">
                                                <label for="voucher_status1"
                                                    class="style-label with-value">Status*</label>
                                                <select name="voucher_status" id="voucher_status1" class="form-select">
                                                    <option value="1">Active</option>
                                                    <option value="0">Inactive</option>
                                                </select>
                                            </div>


                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end">
                                        <button type="submit" class="btn">Save Code</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

    </div>
    </div>
    </div>
    <script type="text/javascript">

        function select_voucher_type(value) {
            if(value == "Class") {
                $(".select_all_franchise").removeClass('d-none');
            }else {
                $(".select_all_franchise").addClass('d-none');
            }
        }

        function select_all_franchise(value) {
            if(value == "yes") {
                $(".franchise_list").addClass('d-none');
            }else {
                $(".franchise_list").removeClass('d-none');
            }
        }

        var RoleId =  "{{ Auth::user()->role_id == 1 }}"
        $("#discount_type").change(function() {
            var discoun_type = $(this).val();
            if (discoun_type == 'Percentage') {
                $('.maximum_discount').prop('disabled', false);
                $('.signhideshow').hide();
                $('.discountamounthideshow').hide();
                $('.showhideinputclass').removeClass('currency-input');
            } else {
                $('.maximum_discount').prop('disabled', true);
                $('.maximum_discount').val("");
                $('.signhideshow').show();
                $('.discountamounthideshow').show();
                $('.showhideinputclass').addClass('currency-input');
            }
        });

        $("#edit_discount_type").change(function() {
            var discoun_type = $(this).val();
            if (discoun_type == 'Percentage') {
                $('.edit_maximum_discount').prop('disabled', false);
                $('.signhideshow').hide();
                $('.discountamounthideshow').hide();
                $("#edit_discount_type option[value='Percentage']").prop('selected', true);
                $('.showhideinputclass').removeClass('currency-input');
            } else {
                $('.edit_maximum_discount').prop('disabled', true);
                $('.edit_maximum_discount').val("");
                $('.signhideshow').show();
                $('.discountamounthideshow').show();
                $("#edit_discount_type option[value='Amount']").prop('selected', true);
                $('.showhideinputclass').addClass('currency-input');
            }
        });

        $(function() {

            var table = $('.table-custom-wrap .table').DataTable({
                processing: true,
                "order": [],
                language: {
                    searchPlaceholder: "Search",
                },

                dom: '<"custom-table-info"<"custom-table-left"B><"custom-table-right"frlp>><"custom-table"t>p',
                language: {
                    searchPlaceholder: "Search",
                    "lengthMenu": '<select class="form-select">' +
                        '<option value="10">Show: 10</option>' +
                        '<option value="25">Show: 25</option>' +
                        '<option value="50">Show: 50</option>' +
                        '<option value="75">Show: 75</option>' +
                        '<option value="-1">Show: All</option>' +
                        '</select> '
                },
                serverSide: true,
                buttons: ["excel", "pdf", "print"],
                ajax: "{{ route('setting.voucher.code') }}",
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'franchise_name',
                        name: 'franchise_name',
                        visible: ((RoleId == 1) ? true: false)
                    },
                    {
                        data: 'voucher_type',
                        name: 'voucher_type',
                        visible: ((RoleId == 1) ? true: false)
                    },
                    {
                        data: 'discount_type',
                        name: 'discount_type'
                    },
                    {
                        data: 'discount_amount',
                        name: 'discount_amount'
                    },
                    {
                        data: 'valid_from',
                        name: 'valid_from'
                    },
                    {
                        data: 'valid_to',
                        name: 'valid_to'
                    },
                    {
                        data: 'number_of_users',
                        name: 'number_of_users'
                    },
                    {
                        data: 'created_by',
                        name: 'created_by'
                    },
                    {
                        data: 'updated_by',
                        name: 'updated_by'
                    },
                    {
                        data: 'InventoryActive1',
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            var editButton =
                                '<div class="link-btn-group"> <button type="button" class="btn" onclick="vouchercodeEditFunction(' +
                                row.id + ')"><i class="fas fa-edit"></i></button>';
                            var deleteButton =
                                '<button type="button" class="btn" onclick="vouchercodeDeleteFunction(' +
                                row.id + ')"><i class="fas fa-trash-alt"></i></button></div>';
                            return editButton + deleteButton;
                        }
                    }
                ],
                fnDrawCallback: function(oSettings, json) {
                    console.log("scroll");
                    $("html, body").animate({
                            scrollTop: $(".table-custom-wrap").offset().top,
                        },
                        "slow"
                    );
                    if ($('.table-custom-wrap').find(".dataTables_paginate").eq(0).find('span').find(
                            "a").length > 1) {
                        $('.table-custom-wrap').find(".dataTables_paginate").show();
                    } else {
                        $('.table-custom-wrap').find(".dataTables_paginate").hide();
                    }
                },
            });

        });

        function vouchercodeEditFunction(voucher_code_id) {
            axios.post('{{ url('/setting/edit-voucher-code/') }}', {
                    id: voucher_code_id
                })
                .then(function(response) {
                    const get_voucher_code = response.data.voucher_code_data;
                    console.log(get_voucher_code.valid_from);
                    if (get_voucher_code.valid_from != null) {
                        valid_from = get_voucher_code.valid_from;
                        var valid_from_result = valid_from.split("-");
                        var valid_from_display = valid_from_result[2] + '/' + valid_from_result[1] + '/' +
                            valid_from_result[0];

                    } else {
                        var valid_from_display = '';
                    }
                    if (get_voucher_code.valid_to != null) {
                        valid_to = get_voucher_code.valid_to;
                        var valid_to_result = valid_to.split("-");
                        var valid_to_display = valid_to_result[2] + '/' + valid_to_result[1] + '/' + valid_to_result[0];
                    } else {
                        var valid_to_display = ' ';
                    }
                    const modalBody = document.querySelector('#edit_voucher_code .modal-body');
                    if (get_voucher_code.discount_type == 'Amount') {
                        $("#edit_discount_type option[value='Amount']").prop('selected', true);
                        $('.edit_maximum_discount').prop('disabled', true);
                    } else {
                        $("#edit_discount_type option[value='Percentage']").prop('selected', true);
                        $('.edit_maximum_discount').prop('disabled', false);
                    }
                    $('#edit_voucher_code #id').val(get_voucher_code.id);
                    $('#edit_voucher_code #name').val(get_voucher_code.name);
                    $('#edit_voucher_code #description').val(get_voucher_code.description);
                    $('#edit_voucher_code #valid_from_second').val(valid_from_display);
                    $('#edit_voucher_code #valid_to_second').val(valid_to_display);
                    $('#edit_voucher_code #voucher_type').val(get_voucher_code.voucher_type);
                    $('#edit_voucher_code #discount_type').val(get_voucher_code.discount_type);
                    $('#edit_voucher_code #discount_amount').val(get_voucher_code.discount_amount);
                    $('#edit_voucher_code #maximum_discount').val(get_voucher_code.maximum_discount);
                    $('#edit_voucher_code #number_of_users').val(get_voucher_code.number_of_users);
                    $('#edit_voucher_code #voucher_status1').val(get_voucher_code.status);
                    $('#edit_voucher_code').modal('show');
                })
                .catch(function(error) {

                });
        }

        function vouchercodeDeleteFunction(supplier_id) {
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: "btn btn-success",
                    cancelButton: "btn btn-danger",
                },
                buttonsStyling: false,
            });
            swalWithBootstrapButtons
                .fire({
                    title: "Are you sure?",
                    text: "Are you sure want to delete record!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel!",
                    reverseButtons: true,
                })
                .then((result) => {
                    if (result.isConfirmed) {
                        axios.post('{{ url('/setting/destroy-voucher-code/') }}', {
                                id: supplier_id
                            })
                            .then(function(response) {
                                setTimeout(function() {
                                    location.reload();
                                }, 2000);

                            })
                            .catch(function(error) {});
                    }
                });

        }
    </script>
    {!! JsValidator::formRequest('App\Http\Requests\SettingVoucherCode', '#add-voucher-code') !!}
    {!! JsValidator::formRequest('App\Http\Requests\SettingVoucherCodeUpdate', '#edit-voucher-code') !!}
    <script src="{{ url('admin/js/setting.js') }}"></script>

@endsection